React Native: View onPress tidak berfungsi


104

Saya menghadapi masalah yang aneh. Dalam aplikasi react native saya, jika saya mengatur onPressevent ke Viewitu tidak dipicu tetapi jika saya mengatur hal yang sama ke Textdalam View, itu akan aktif. Apa yang kulewatkan di sini?

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

Mengapa demikian? Apakah ini masalah dengan React Native? Saya menggunakan versi 0.43

Jawaban:


176

Anda dapat menggunakan TouchableOpacityuntuk onPressacara. Viewtidak memberikan onPresspenyangga.

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

4

Bisakah onPress bekerja dengan fungsi async sebagai callbacknya? Saya tidak melihat menyebutkan ini di dokumentasi resmi.
ryanwebjackson

27

Anda dapat membungkus tampilan dengan TouchableWithoutFeedbackdan kemudian menggunakan onPressdan teman-teman seperti biasa. Anda juga masih dapat memblokir pointerEventsdengan menyetel atribut pada tampilan anak, bahkan memblokir peristiwa penunjuk pada indukTouchableWithoutFeedback , yang menarik, ini adalah kebutuhan saya di Android, saya tidak menguji di 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
Diuji di iOS dan berfungsi dengan baik. Keduanya dapat disentuh tanpa umpan balik dan sorotan yang dapat disentuh
dilakukan pada

Terima kasih telah berbagi @habed! Apakah pointerEventsNoneblok anak menekan pada orang tua yang membungkus?
Noitidart

6

Anda dapat menggunakan TouchableOpacity, TouchableHighlight, TouchableNativeFeedback, untuk mencapai ini. Komponen tampilan tidak menyediakan onPress sebagai alat peraga. Jadi Anda menggunakan ini, bukan itu.

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

OR

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

OR

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


2

Atau Anda juga dapat menyediakan onStartShouldSetResponder ke tampilan Anda, seperti:

<View onStartShouldSetResponder={() => console.log("View click")}>
  // some code here
</View>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.