React Native: View onPress ne fonctionne pas

104

Je suis confronté à un problème étrange. Dans mon application native react, si je mets un onPressévénement sur Viewcelui-ci, il n'est pas déclenché mais si je le mets à l' Textintérieur View, il se déclenche. Qu'est-ce que j'oublie 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 cela est-il ainsi? Est-ce un problème avec React Native? J'utilise la version 0.43

mehulmpt
la source

Réponses:

176

Vous pouvez utiliser TouchableOpacitypour l' onPressévénement. Viewne fournit pas d' onPressaccessoire.

<TouchableOpacity style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log('does not work');
    }
  }>
  <Text>X</Text>
</TouchableOpacity>
Ahsan Ali
la source
4
La documentation de référence complète est ici: facebook.github.io/react-native/docs/touchableopacity.html
Muhammad Hannan
OnPress peut-il fonctionner avec une fonction asynchrone comme rappel? Je n'en vois aucune mention dans la documentation officielle.
ryanwebjackson
27

Vous pouvez envelopper la vue avec un TouchableWithoutFeedback, puis utiliser onPresset des amis comme d'habitude. De plus, vous pouvez toujours bloquer pointerEventsen définissant l'attribut sur la vue enfant, il bloque même les événements de pointeur sur le 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>
Noitidart
la source
2
Testé sur iOS et cela fonctionne très bien. Les deux avec touchable sans rétroaction et point culminant touchable
habed le
Merci d'avoir partagé @habed! Le pointerEventsNonesur le bloc enfant appuie-t-il sur le parent enveloppeur?
Noitidart
6

Vous pouvez utiliser TouchableOpacity, TouchableHighlight, TouchableNativeFeedback, pour y parvenir. Le composant View ne fournit pas onPress comme accessoires. Vous utilisez donc ces derniers au lieu de cela.

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

OR

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

OR

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

Naleen Dissanayake
la source
2

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

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