reactjs - 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 中以按下它并转到另一个页面.但是当我按下盾牌时，没有任何反应，但是当我按下背景上的 View 时，它应用了代码，它应该在盾牌上完成......我该如何解决这个问题？

编辑:现在当盾牌图标在背景 View 上时它可以工作，但是当我将它放在底部时，图标的溢出区域不起作用，只有上半部分需要点击。我需要它在整个图像上工作

这个区域 - 蓝色 - 没有点击:

Answer 1

确保你从 react-native 而不是 react-native-gesture-handler 导入了 TouchableOpacity