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

Vous pouvez utiliser TouchableOpacity pour onPress événement. View ne fournit pas onPress prop.

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

Answer 2

Vous pouvez envelopper la vue avec un TouchableWithoutFeedback et ensuite utiliser onPress et vos amis comme d'habitude. Vous pouvez aussi toujours bloquer pointerEvents en définissant l'attribut on sur la vue enfant, il bloque même les événements de pointeur sur la vue parent TouchableWithoutFeedback C'est intéressant, c'était mon besoin sur Android, je n'ai pas testé sur iOS :

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html

<TouchableWithoutFeedback onPressIn={this.closeDrawer}>
    <Animated.View style={[styles.drawerBackground, styleBackground]} pointerEvents={isOpen ? undefined : 'none'} />
</TouchableWithoutFeedback>

Answer 3

Vous pouvez également fournir onStartShouldSetResponder à votre vue, comme suit :

<View onStartShouldSetResponder={() => console.log("View click")}>
  // some code here
</View>

Answer 4

Vous pouvez utiliser TouchableOpacity, TouchableHighlight, TouchableNativeFeedback, pour y parvenir. Le composant View ne fournit pas onPress comme props. Vous pouvez donc utiliser ces éléments à la place.

<TouchableNativeFeedback
        onPress={this._onPressButton}
</TouchableNativeFeedback>

OR

<TouchableHighlight onPress={this._onPressButton}>
</TouchableHighlight>

OR

<TouchableOpacity onPress={this._onPressButton}>
</TouchableOpacity>

Answer 5

OnPress ne fonctionne pas sur <View> utilisation des étiquettes <TouchableOpacity> au lieu de View

<View>
<TouchableOpacity onPress={() => 'call your function here'}>
</TouchableOpacity>
</View>