乐趣区

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