TouchableOpacity的行为很奇怪

Question

    <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中，然后按下它，然后转到另一个页面。但是当我按下屏蔽时，什么都没有发生，但是当我按下背景视图时，它应用了代码，它应该在shield...How上完成它，我能修复这个吗？

编辑:现在它工作时，盾牌图标在背景视图，但当我将它定位在底部，图标的溢出区域不工作，只是上半采取点击。我需要它在图像上运行

此区域-with蓝色-不单击：

​

​

Answer 1

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

Answer 2

其想法是只将样式(高度、宽度、位置：‘绝对’、顶部、左边)修正为TouchableOpacity组件。因为，例如，如果将top: 50设置为子组件，则该子组件将位于touchableOpacity组件下50，并且只有在您按下组件顶部50的时候才会触发您的onPress函数。您只需要在文本组件上绝对定位，因为它应该在图像上。

<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>

希望我说的很清楚。