React Native: View onPress nie działa

105

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

mehulmpt
źródło

Odpowiedzi:

176

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>
Ahsan Ali
źródło
4
Pełna dokumentacja referencyjna jest dostępna tutaj: facebook.github.io/react-native/docs/touchableopacity.html
Muhammad Hannan
Czy onPress może współpracować z funkcją asynchroniczną jako funkcją zwrotną? Nie widzę wzmianki o tym w oficjalnej dokumentacji.
ryanwebjackson
27

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>
Noitidart
źródło
2
Testowane na iOS i działa dobrze. Oba z dotykalnym bez sprzężenia zwrotnego i
dotykowym
Dzięki za udostępnienie @habed! Czy pointerEventsNoneblok dziecka naciska na zawijającego rodzica?
Noitidart
6

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>

Naleen Dissanayake
źródło
2

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

<View onStartShouldSetResponder={() => console.log("View click")}>
  // some code here
</View>
Sydney C.
źródło