TouchableOpacity / Pressable 即使相对于 React Native，也不能在具有绝对位置的视图上工作

Question

大家好，我目前遇到的问题是 touchableopacity 或 pressable 在绝对视图位置内无法正常工作。

这是我的代码

<View style={styles.Wallet}>
          <Text style={styles.Wallet_Text}>Wallet</Text>
            <TouchableOpacity onPress={()=> console.log('Pressed')}
            <Image 
              source={require('../../Assets/Icons/ui-walelt_icon-history.png')}
              resizeMode='contain'
              style={styles.Wallet_History}
            />
            </TouchableOpacity>
          <Text style={styles.Wallet_Amount}>₱0.00</Text>
          <Image 
            source={require('../../Assets/Icons/ui-walelt_icon-wallet.png')}
            resizeMode='contain'
            style={styles.Wallet_CashIn}
          />
          <Text style={styles.Wallet_TextCashIn}>Cash In</Text>
          <Image 
          source={require('../../Assets/Icons/ui-walelt_icon-transfer.png')}
          resizeMode='contain'
          style={styles.Wallet_Transfer}
          />
          <Text style={styles.Wallet_TextTransfer}>Transfer</Text>
</View>

我的风格是这样的

Wallet: {
    position:'absolute',
    top:0,
    right:0,
    bottom:0,
    left:0,
    alignItems:'flex-start',
    zIndex:1,
  },
  Wallet_Text:{
    color:'#fff',
    marginTop: 180,
    marginLeft: 40,
    fontSize:20,
    fontWeight: 'bold',
  },
  Wallet_History:{
    width:35,
    height:35,
    alignSelf:'flex-end',
    marginRight: 40,
    marginTop: -40,
    tintColor:'#fff',
  }, 
  Wallet_Amount:{
    color:'#fff',
    marginTop: 20,
    alignSelf:'flex-end',
    marginRight: 40,
    fontSize:20,
    fontWeight: 'bold',
  },
  Wallet_CashIn:{
    width:20,
    height:20,
    alignSelf:'flex-end',
    marginRight: 230,
    marginTop: 25,
    tintColor:'#fdeb1d',
  }, 
  Wallet_TextCashIn:{
    color:'#fff',
    marginTop: -20,
    alignSelf:'flex-end',
    marginRight: 170,
    fontSize:15,
  },
  Wallet_Transfer:{
    width:20,
    height:20,
    alignSelf:'flex-end',
    marginRight: 120,
    marginTop: -20,
    tintColor:'#fdeb1d',
  },
  Wallet_TextTransfer:{
    color:'#fff',
    marginTop: -20,
    alignSelf:'flex-end',
    marginRight: 55,
    fontSize:15,
  },

到目前为止我试过的是这个

我把zIndex放在

Wallet: {
   zIndex: 1,
}

也尝试使用 import { TouchableOpacity } from 'react-native-gesture-handler'; 而不是 TouchableOpacity of react-native

Answer 1

<TouchableOpacity onPress={()=> console.log('Pressed')}

将此更改为

<TouchableOpacity onPress={()=> console.log('Pressed')}>

Answer 2

对于那些仍然有问题的人，我发现了 TouchableWithoutFeedback 并使用了 onPress 而不是 onPress 我使用了 onPressIn 这个唯一的缺点是它只适用于单个例如像这样反应 child

<View>
   <TouchableWithoutFeedback onPressIn={youFunctionHere}>
       <Image />
   </TouchableWithoutFeedback>

</View>

但是如果你这样使用它

<View>
   <TouchableWithoutFeedback onPressIn={youFunctionHere}>
       <Image />
       <Text></Text>
   </TouchableWithoutFeedback>

</View>

这行不通。希望对大家有帮助

TouchableOpacity / Pressable 即使相对于 React Native，也不能在具有绝对位置的视图上工作

TouchableOpacity / Pressable Not working on view with position absolute even with position relative React Native

react-native

touchableopacity

react-hooks