关于前端:RN-TouchableOpacity点击事件不响应原因详解

1次阅读

共计 2279 个字符，预计需要花费 6 分钟才能阅读完成。

首先是整个页面布局如上：

在理论开发中发现如下红框中的所有区域点击事件均没有成果，不会触发

TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback

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

以上触摸事件无论怎么尝试在红框区域内都是有效事件

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();}}
  />