首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

嵌套的TouchableOpacity父onPress不起作用

是因为TouchableOpacity组件会拦截触摸事件,导致父组件的onPress事件无法触发。这种情况下,可以通过调整组件结构或使用其他组件来解决。

解决方法之一是使用TouchableWithoutFeedback组件来替代TouchableOpacity作为父组件,因为TouchableWithoutFeedback不会拦截触摸事件,可以使父组件的onPress事件正常触发。

另一种方法是使用TouchableOpacity的属性activeOpacity设置为1,将其透明度设为不透明。这样设置后,TouchableOpacity将不会拦截触摸事件,而是将事件传递给其父组件,从而使父组件的onPress事件能够正常触发。

示例代码:

代码语言:txt
复制
import React from 'react';
import { View, TouchableOpacity, TouchableWithoutFeedback, Text } from 'react-native';

const App = () => {
  const handleParentPress = () => {
    console.log('父组件被点击');
  };

  const handleChildPress = () => {
    console.log('子组件被点击');
  };

  return (
    <TouchableWithoutFeedback onPress={handleParentPress}>
      <View>
        <TouchableOpacity onPress={handleChildPress} activeOpacity={1}>
          <Text>子组件</Text>
        </TouchableOpacity>
      </View>
    </TouchableWithoutFeedback>
  );
};

export default App;

在上述示例代码中,使用了TouchableWithoutFeedback作为父组件,它不会拦截触摸事件。TouchableOpacity作为子组件,并通过activeOpacity属性设置透明度为1,使其不拦截触摸事件。这样就能够同时触发父组件和子组件的onPress事件了。

腾讯云相关产品中,与前端开发和移动开发相关的推荐产品有:

  1. 云函数 SCF(Serverless Cloud Function):无需搭建和管理服务器的场景下,通过编写函数代码即可实现后端逻辑。适用于快速开发云端应用,节省服务器成本。详细信息请参考:腾讯云云函数 SCF
  2. 小程序云开发:为小程序开发提供一套完整的后端支持,包括云数据库、云存储、云函数等服务,能够快速构建小程序应用。详细信息请参考:腾讯云小程序云开发
  3. 轻量应用服务器 Lighthouse:高性能、低成本的轻量级应用服务器,支持多种编程语言和开发框架,适用于Web应用和API服务的部署。详细信息请参考:腾讯云轻量应用服务器 Lighthouse
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • ReactNative之参照具体示例来看RN中的FlexBox布局

    顾名思义,容器属性是用来添加到 父组件上来控制子组件的位置的属性,而 元素属性则是添加到子组件本身控制本身的一种属性。稍后会详细介绍。...space-between:从字面意思上不难看出,该属性值对应的是左右间距平分于子元素中间的布局方式,设置该属性值后,左右边上是子元素是紧贴父View的左右边距的,间距平分与子元素中间。...space-evenly: 该属性值的意思是子元素的左右间距均分,这个间距包括子元素与子元素的间距,还包括子元素与父元素的间距。 ?...stretch:拉伸,该属性只有在子元素的高度没有设置的情况下适用,该情况下会自适应高度,以至填满父视图,具体如下所示: ?...AlignSelf的作用方式与AlignItem差不多,只不过一个作用于父元素,一个是作用于子元素。

    1.9K30

    React Native仿美团下拉菜单

    在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可。...如果使用React Native开发上面的效果,需要注意几个问题: 1、 在下拉的时候有动画过度效果; 2、下拉菜单出现后点击菜单项,菜单项可选择,并触发对应的事件; 3、下拉菜单中的项目可以配置; 要实现弹框效果...,我们马上回想到使用Model组件,而要绘制打钩图标和下拉三角,我们首先想到使用ART实现,当然选择使用图标也是可以的。...> TouchableOpacity style={styles.action} onPress={() => { this.setState({ showPop: !...(props.index, props.subindex, props.data); } return ( onPress={onPress

    5.3K50

    React Native仿美团下拉菜单

    在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可。...如果使用React Native开发上面的效果,需要注意几个问题: 1、 在下拉的时候有动画过度效果; 2、下拉菜单出现后点击菜单项,菜单项可选择,并触发对应的事件; 3、下拉菜单中的项目可以配置...; 要实现弹框效果,我们马上回想到使用Model组件,而要绘制打钩图标和下拉三角,我们首先想到使用ART实现,当然选择使用图标也是可以的。...> TouchableOpacity style={styles.action} onPress={() => { this.setState({ showPop: !...(props.index, props.subindex, props.data); } return ( onPress={onPress

    3.1K100

    react-navigation重复点击多次跳转的解决方案

    (感谢测试小姐姐丧心病狂的操作),症状如下图 分析问题 经过观察发现,在onPress事件执行后会触发navigation.navigate(...)方法,加载新的页面。...显然,页面跳转时,并未对事件进行控制,只要触发,就会加载新的页面 解决方案 既然源码未加控制,我们就手动加上,目前思路有2种 – 普通版 在onPress事件处控制,第一次点击后,加上延时,禁止之后的点击操作...(props) { super(props) this.state = { waiting: false,//防止多次重复点击 } } 利用this.state.waiting控制TouchableOpacity...的disabled属性 TouchableOpacity disabled={ this.state.waiting} onPress={ () => this.repeatClick...此时onPress事件无需再加控制 TouchableOpacity // disabled={this.state.waiting} onPress={() => this.props.navigation.navigate

    1.7K10
    领券