React Native: View onPress non funziona

Sto affrontando uno strano problema. Nella mia app nativa di reazione, se imposto l' onPressevento Viewnon viene attivato, ma se imposto lo stesso Textall'interno View, si attiva . Cosa mi manca qui?

<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>

Perché è così? È un problema con React Native? Sto usando la versione 0.43

Puoi usare TouchableOpacityper onPressevento. Viewnon fornisce onPressprop.

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

Puoi avvolgere la vista con un TouchableWithoutFeedbacke poi usare onPresse amici come al solito. Inoltre puoi ancora bloccare pointerEventsimpostando l'attributo sulla visualizzazione figlio, blocca persino gli eventi del puntatore sul genitore TouchableWithoutFeedback, è interessante, questo era il mio bisogno su Android, non ho testato su 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>

Puoi usare TouchableOpacity, TouchableHighlight, TouchableNativeFeedback per ottenere questo risultato. Il componente Visualizza non fornisce onPress come oggetti di scena. Quindi usi questi invece di quello.

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

OR

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

OR

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

In alternativa puoi anche fornire onStartShouldSetResponder alla tua visualizzazione, in questo modo:

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