React Native: просмотр onPress не работает

У меня возникла странная проблема. В моем onPress на родном приложении, если я установил onPress событие для View он не запускается, но если я установлю его в Text внутри View, он запускается. Что мне здесь не хватает?

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

Почему это так? Это проблема с React Native? Я использую версию 0.43

Ответ 1

Вы можете использовать TouchableOpacity для события onPress. View не предоставляет onPress prop.

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

Ответ 2

Вы можете обернуть представление с помощью TouchableWithoutFeedback а затем использовать onPress и друзей, как обычно. Кроме того, вы все равно можете блокировать pointerEvents, установив атрибут на дочернем представлении, он даже блокирует события указателя на родительском TouchableWithoutFeedback, его интересный, это была моя потребность в Android, я не тестировал на 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>

Ответ 3

Для этого вы можете использовать TouchableOpacity, TouchableHighlight, TouchableNativeFeedback. Компонент просмотра не предоставляет onPress в качестве реквизита. Поэтому вы используете их вместо этого.

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

OR

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

OR

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