RN|RN TouchableOpacity点击事件不响应原因详解 RNTouchableOpacity点击事件不响应

问题 【RN|RN TouchableOpacity点击事件不响应原因详解】
文章图片

首先是整个页面布局如上：
在实际开发中发现如下红框中的所有区域点击事件均没有效果，不会触发

文章图片

问题定位 RN基本触摸组件尝试

TouchableHighlight、TouchableNativeFeedback、 TouchableOpacity 、 TouchableWithoutFeedback

onPressIn：点击开始；
onPressOut：点击结束或者离开；
onPress：单击事件回调；
onLongPress：长按事件回调。

以上触摸事件无论怎么尝试在红框区域内都是无效事件
Pressable
Pressable 是一个核心组件的封装，它可以检测到任意子组件的不同阶段的按压交互情况
这个点击也是无效操作，到时官方文档里面的一句提示：触控区域不会超出绑定的父级 view，在按压到重叠的兄弟视图时，z-index 更高的那个视图会更优先
受到启发做一下尝试：
定位布局&解决方案
首先真机上打开Android调试工具的布局边框，展示如下前端的布局效果

文章图片

首先是顶部带背景banner区域的
然后是签到卡片
从布局上可以明显看到banner和签到卡片是有区域交叉重叠的
从代码定位来一步步排查

const styles = StyleSheet.create({ banner: { height: 170, width: width, paddingTop: 25, paddingLeft: 15, backgroundColor: Colors.F4F5F7, }, }) 当前可用积分 {taskInfo?.totalPoints} { jumpToNewTask(); }} > 新手任务 { jumpToRedeem(); }} > 积分兑换 {/* 七天签到区域 */} { getTaskInfo(); getSignListInit(); }} />

从代码中可以明显看到签到卡片被包裹到banner的ImageBackground内部了而banner的高度只有170px
这样的话根据官方说的触控区域不会超过父级容器区域，那可实际可点击区域只有banner高度170内是可触控区域了

文章图片
那么到这问题就已经很清晰了，需要修改页面整体布局，具体如下

const styles = StyleSheet.create({ banner: { height: 170, width: width, paddingTop: 25, paddingLeft: 15, backgroundColor: Colors.F4F5F7, }, signListContent: { borderRadius: 8, backgroundColor: Colors.FFFFFF, width: width - 30, marginTop: 25, paddingVertical: 20, position: 'absolute', top: 80, left: 15, } }) 当前可用积分 ... ... {/* 七天签到区域 */} { getTaskInfo(); getSignListInit(); }} />