问题
首先是整个页面布局如上：
在理论开发中发现 如下红框中的所有区域点击事件均没有成果，不会触发
问题定位
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, },})<ImageBackground style={styles.banner} source={imageBanner} resizeMode="contain" > <Text style={styles.bannerTitle}>以后可用积分</Text> <View style={styles.bannerLeft}> <Text style={styles.bannerLeftCount}> {taskInfo?.totalPoints} </Text> <TouchableOpacity onPress={() => { jumpToNewTask(); }} > <ImageBackground style={styles.newTaskBtn} source={NewTaskBtn} > <Image style={styles.bannerLeftImage} source={MoneyImage} /> <Text style={styles.newTaskText}>老手工作</Text> <Image style={styles.triangle} source={TriangleRight} /> </ImageBackground> </TouchableOpacity> </View> <TouchableOpacity style={styles.redeemBtnContent} onPress={() => { jumpToRedeem(); }} > <ImageBackground style={styles.redeemBtn} source={RedeemBtn} > <Text style={styles.redeemBtnText}>积分兑换</Text> </ImageBackground> </TouchableOpacity> {/* 七天签到区域 */} <SignList data={taskDaily} info={taskInfo} signCallback={() => { getTaskInfo(); getSignListInit(); }} /> </ImageBackground>
- 从代码中能够显著看到签到卡片被包裹到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, }})<ImageBackground style={styles.banner} source={imageBanner} resizeMode="contain" > <Text style={styles.bannerTitle}>以后可用积分</Text> <View style={styles.bannerLeft}> ... </View> ... </ImageBackground> {/* 七天签到区域 */} <SignList data={taskDaily} info={taskInfo} signCallback={() => { getTaskInfo(); getSignListInit(); }} />
- 签到卡片间接拿进去和banner平级，而后应用定位absolute来把卡片叠加到banner区域，这样他的父容器就是最外层的body文档流了，这样卡片外部都是可触控区域了，完满解决问题