React Native: View 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


react-native react-native-android
person mehulmpt    schedule 27.04.2017    source источник

Ответы (9)


arrow_upward
218
arrow_downward

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

<TouchableOpacity style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log('does not work');
    }
  }>
  <Text>X</Text>
</TouchableOpacity>
person Ahsan Ali    schedule 27.04.2017
comment
Полная справочная документация находится здесь: facebook.github.io/react-native/docs/ touchableopacity.html - person Nah; 10.01.2018
comment
Может ли onPress работать с асинхронной функцией в качестве обратного вызова? Я не вижу упоминания об этом в официальной документации. - person ryanwebjackson; 08.05.2020

arrow_upward
33
arrow_downward

Вы можете обернуть представление 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>
person Noitidart    schedule 28.09.2017
comment
Протестировано на iOS, работает отлично. Оба с сенсорным без обратной связи и с сенсорным выделением - person habed; 01.04.2018
comment
Спасибо, что поделились @habed! Нажимает ли pointerEventsNone в дочернем блоке родительский элемент-оболочку? - person Noitidart; 01.04.2018

arrow_upward
7
arrow_downward

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

<View onStartShouldSetResponder={() => console.log("View click")}>
  // some code here
</View>
person Sydney C.    schedule 17.02.2020

arrow_upward
6
arrow_downward

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

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

OR

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

OR

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

person Naleen Dissanayake    schedule 22.08.2018

arrow_upward
3
arrow_downward

onPress не работает с тегом <View>, используйте <TouchableOpacity> вместо просмотра

<View>
<TouchableOpacity onPress={() => 'call your function here'}>
</TouchableOpacity>
</View>
person bisma    schedule 26.12.2020

arrow_upward
2
arrow_downward

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

<View onStartShouldSetResponder={() => console.log("View click")}>
  <Text>X</Text>
</View>

В противном случае вы можете использовать TouchableOpacity

<TouchableOpacity onPress={this._onPress}>
<Text>X</Text>
</TouchableOpacity>
person Biplov Kumar    schedule 10.10.2020

arrow_upward
0
arrow_downward

Для всех, кто ищет решение этой проблемы, начиная с версии RN 0.63, существует новый api Pressabe. Возможно, он был выпущен на пару версий раньше, но он отлично подходит для таких случаев использования.

<Pressable onPress={onPressFunction}>
    <Text onPress={() => {
        console.log('works');
    }}>X</Text>
</Pressable>
person Ajay Bhargav    schedule 08.12.2020

arrow_upward
0
arrow_downward

ну, мы можем сделать так, чтобы View имел свойства onPress onStartShouldSetResponder и onResponderGrant

<View
    onStartShouldSetResponder={() => true}
    onResponderGrant={() => console.log("view pressed")}
  >
</View>
person thunder775    schedule 18.06.2021

arrow_upward
0
arrow_downward

Для этого можно использовать TouchableOpacity.

<TouchableOpacity onPress={() => {your code here}}>
    //Your inner views here
</TouchableOpacity>
person AIK    schedule 08.07.2021