React Native: View onPress nie działa

Mam dziwny problem. W mojej natywnej aplikacji React, jeśli onPressustawię na Viewto zdarzenie, nie jest wyzwalane, ale jeśli ustawię to samo na Textwnętrze View, zostanie uruchomione . Czego tu brakuje?

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

Dlaczego tak jest? Czy to problem z React Native? Używam wersji 0.43

Możesz użyć TouchableOpacityna onPresswydarzenie. Viewnie zapewnia onPressrekwizytu.

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

Możesz zawinąć widok, TouchableWithoutFeedbacka następnie użyć onPressi przyjaciół jak zwykle. Możesz również nadal blokować pointerEvents, ustawiając atrybut na widoku dziecka, blokuje nawet zdarzenia wskaźnika na rodzica TouchableWithoutFeedback, jest to interesujące, taka była moja potrzeba na Androidzie, nie testowałem na 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>

Aby to osiągnąć, możesz użyć TouchableOpacity, TouchableHighlight, TouchableNativeFeedback. Komponent widoku nie udostępnia onPress jako rekwizytów. Więc używasz ich zamiast tego.

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

OR

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

OR

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

Alternatywnie możesz również podać onStartShouldSetResponder do swojego widoku, na przykład:

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