web-dev-qa-db-fra.com

React Native: View onPress ne fonctionne pas

Je suis confronté à un problème étrange. Dans mon application native rea, si je règle onPress sur View, il n'est pas déclenché, mais si je règle le même paramètre sur Text dans 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

react-nativereact-native-android
79
mehulmpt

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

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

Vous pouvez envelopper la vue avec un TouchableWithoutFeedback, puis utiliser onPress et des amis comme d'habitude. Aussi, vous pouvez toujours bloquer pointerEvents en 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 sous Android, je n'ai pas testé 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>
21
Noitidart

Vous pouvez utiliser TouchableOpacity, TouchableHighlight, TouchableNativeFeedback pour y parvenir. Le composant View ne fournit pas onPress comme accessoire. Donc, vous utilisez ceux-ci au lieu de cela.

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

OR

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

OR

<TouchableOpacity onPress={this._onPressButton}>
</TouchableOpacity>
4
Naleen Dissanayake