绝对定位TouchableOpacity在Android端无法点击,触摸事件被下层按钮消费
React Native安卓下拉列表点击事件透传解决方案
- 显式给承载下拉选项的绝对定位根容器设置背景色,哪怕你需要透明效果也要显式声明
backgroundColor: 'transparent',安卓原生触摸事件分发逻辑默认会跳过无背景配置的视图,不会将触摸事件分配给这类视图 - 确认
elevation与zIndex属性绑定在下拉选项的绝对定位根容器上,不要仅绑定在单个下拉选项组件上,属性值要至少比下层提交按钮对应属性高3以上,避免不同安卓版本的数值计算误差 - 调整组件在视图树中的书写顺序,将下拉列表的绝对定位容器代码放到下层提交按钮的代码之后,React Native同层级元素默认遵循后渲染层级更高的规则,能避免部分安卓系统的zIndex解析异常
- 排查react-native-gesture-handler组件适配问题,可先替换为React Native官方的
TouchableOpacity做测试,如果官方组件可正常响应点击,可给手势库的TouchableOpacity添加hitSlop={{top: 5, bottom:5, left:5, right:5}}配置扩大点击检测范围,同时给下拉根容器添加onStartShouldSetResponder={() => true}配置,强制容器在触摸开始时接管事件,阻止向下冒泡 - 若仍存在问题,可参考以下示例代码配置下拉根容器:
<View style={{ position: 'absolute', top: '100%', left: 0, right: 0, zIndex: 20, elevation: 20, backgroundColor: '#fff', // 替换为你需要的背景色 borderRadius: 4, }} onStartShouldSetResponder={() => true} > {/* 你的下拉选项组件 */} </View>
内容的提问来源于stack exchange,提问作者Snehal singh
相关产品推荐
相关产品推荐

