React Native : View onPress ne fonctionne pas

Question

Je suis confronté à un problème étrange. Dans mon application react native, si je mets onPress à l'événement View il n'est pas déclenché mais si je mets la même chose à Text à l'intérieur de View il fait feu. Qu'est-ce que je rate ici ?

<View style={{backgroundColor: "red", padding: 20}}>
  <Text onPress={()=> {
    console.log('works');
    }
  }>X</Text>
</View>

<View style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log('does not work');
    }
  }>
  <Text>X</Text>
</View>

Pourquoi en est-il ainsi ? Est-ce un problème avec React Native ? J'utilise la version 0.43

Answer 1

Voir ne fournit pas de prop onPress. En option vous pouvez utiliser

<View onStartShouldSetResponder={() => console.log("View click")}>
  <Text>X</Text>
</View>

Sinon, vous pouvez utiliser TouchableOpacity

<TouchableOpacity onPress={this._onPress}>
<Text>X</Text>
</TouchableOpacity>

Answer 2

2021

Si vous recherchez un moyen plus complet et plus évolutif de gérer les entrées tactiles, consultez le site Web de la Commission européenne. Pressable API.

Fuente: https://reactnative.dev/docs/touchablewithoutfeedback

Answer 3

Nous pouvons faire en sorte que la vue ait une fonction onPress. onStartShouldSetResponder y onResponderGrant

<View
    onStartShouldSetResponder={() => true}
    onResponderGrant={() => console.log("view pressed")}
  >
</View>

Answer 4

Vous pouvez utiliser TouchableOpacity à cette fin.

<TouchableOpacity onPress={() => {your code here}}>
    //Your inner views here
</TouchableOpacity>

Answer 5

Pour tous ceux qui cherchent une solution à ce problème, à partir de la RN 0.63, il y a un nouvel outil de gestion de la qualité. Pressabe api. Elle aurait pu être déployée quelques versions plus tôt, mais elle fonctionne parfaitement pour ce type d'utilisation.

<Pressable onPress={onPressFunction}>
    <Text onPress={() => {
        console.log('works');
    }}>X</Text>
</Pressable>