React Native: View onPress не работает


108

У меня странная проблема. В моем собственном приложении для реагирования, если я устанавливаю 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

Ответы:


179

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

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

4
Полная справочная документация находится здесь: facebook.github.io/react-native/docs/touchableopacity.html
Мухаммад Ханнан,

Может ли onPress работать с асинхронной функцией в качестве обратного вызова? Я не вижу упоминания об этом в официальной документации.
Райанвебджексон

27

Вы можете обернуть вид, 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>

2
Протестировано на iOS, работает отлично. Оба с сенсорным управлением без обратной связи и с сенсорным выделением
произошло 01

Спасибо, что поделились @habed! Давит ли pointerEventsNoneдочерний блок на оборачивающего родителя?
Noitidart 01

6

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

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

OR

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

OR

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


2

В качестве альтернативы вы также можете предоставить onStartShouldSetResponder своему представлению, например:

<View onStartShouldSetResponder={() => console.log("View click")}>
  // some code here
</View>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.