TouchableOpacity表现得很奇怪

Posted 2021-04-03

    <View
        style={{
          flex: 1,
          width: BannerWidth,
          height: (deviceHeight * 25) / 100,
          marginBottom: 40,
          backgroundColor: theme.colors.batiLacivert,
        }}>   
         <TouchableOpacity onPress={() => Actions.portfoy()}>
          <View
            style={{
              width: 48,
              height: 60,
              left: 0,
              top: 50,
            }}>
            <Image
              style={{
                width: 48,
                height: 60,
                left: 40,
                bottom: -30,
                position: 'absolute',
              }}
              source={require('../../assets/yuzdeler/0yuzde_yeni.png')}
            />
            <Text
              style={{
                position: 'absolute',
                color: 'black',
                left: 47,
                bottom: 0,
                fontSize: 20,
              }}>
              %{this.state.anasayfaBilgiler.Performans}
            </Text>
          </View>
        </TouchableOpacity>
        </View>

我的项目中有这样的代码。我使用 position: absolute 将我的盾牌图标放置在 View我把它包成一个 TouchableOpacity 按下它，然后转到另一个页面。但是当我在盾牌上按下时，什么都没有发生，但是当我在背景上按下View时，它应用了代码，它应该在盾牌上完成......我怎样才能解决这个问题？

编辑：现在，当盾牌图标在背景视图上时，它可以工作，但当我把它定位在底部时，图标的溢出区域不工作，只是上半部分需要点击。我需要它在整个图像上工作

这个区域--蓝色的--不能点击。

答案

请确认您已经导入了 TouchableOpacity 从 react-native 而不是 react-native-gesture-handler

另一答案

我们的想法是将样式（高度、宽度、位置：'绝对'、顶部、左侧）只固定到 TouchableOpacity 组件。因为如果你设置例如 top: 50 到一个子组件上，这个子组件将在可触摸的透明度组件下面50，只有当你按下组件的顶部50时，你的onPress功能才会被启动。你只需要将Text组件的位置绝对化，因为它应该在Image上。

<View
  style={{
    flex: 1,
    width: BannerWidth,
    height: (deviceHeight * 25) / 100,
    marginBottom: 40,
    backgroundColor: theme.colors.batiLacivert,
  }}
>
  <TouchableOpacity style={{ position: 'absolute', top: 50, left: 40 }} onPress={() => Actions.portfoy()}>
    <View
      style={{
        width: 48,
        height: 60,
      }}
    >
      <Image
        style={{
          width: 48,
          height: 60,
        }}
        source={require('../../assets/yuzdeler/0yuzde_yeni.png')}
      />
      <Text
        style={{
          position: 'absolute',
          color: 'black',
          fontSize: 20,
        }}
      >
          %
        {this.state.anasayfaBilgiler.Performans}
      </Text>
    </View>
  </TouchableOpacity>
</View>

希望我说的清楚。