关于前端: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,
      },
  })
  <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 文档流了，这样卡片外部都是可触控区域了，完满解决问题