प्रतिक्रिया मूल: दृश्य onPress काम नहीं करता है

Question

मैं एक अजीब समस्या का सामना कर रहा हूं। मेरी मूल एप्लिकेशन प्रतिक्रिया में, अगर मैं सेट 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>

ऐसा क्यों है? क्या यह रिएक्ट नेटिव के साथ एक मुद्दा है? मैं 0.43 संस्करण का उपयोग कर रहा हूं

Answer 1

आप घटना के TouchableOpacityलिए उपयोग कर सकते हैं onPress। सहारा Viewप्रदान नहीं करता है onPress।

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

Comments

पूरा संदर्भ प्रलेखन यहाँ है: facebook.github.io/react-native/docs/touchableopacity.html

— मुहम्मद हन्नान

क्या onPress अपने कॉलबैक के रूप में एक async फ़ंक्शन के साथ काम कर सकता है? मुझे आधिकारिक दस्तावेज में इसका उल्लेख नहीं दिखता है।

— रैनबेजाकसन

Answer 2

आप दृश्य को एक TouchableWithoutFeedbackऔर फिर उपयोग कर सकते हैं onPressऔर हमेशा की तरह दोस्तों के साथ लपेट सकते हैं । इसके अलावा, आप अभी भी pointerEventsबच्चे के दृश्य पर विशेषता को सेट करके ब्लॉक कर सकते हैं, यह अभिभावक पर सूचक घटनाओं को भी अवरुद्ध करता है TouchableWithoutFeedback, दिलचस्प है, यह एंड्रॉइड पर मेरी ज़रूरत थी, मैंने आईओएस पर परीक्षण नहीं किया:

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html

<TouchableWithoutFeedback onPressIn={this.closeDrawer}>
    <Animated.View style={[styles.drawerBackground, styleBackground]} pointerEvents={isOpen ? undefined : 'none'} />
</TouchableWithoutFeedback>

Comments

IOS पर परीक्षण किया गया है और यह ठीक काम करता है। फीडबैक और

— टाउचेबल

@ साझा करने के लिए धन्यवाद! क्या pointerEventsNoneरैपिंग पेरेंट पर चाइल्ड ब्लॉक प्रेस होता है?

— Noitidart

Answer 3

इसे प्राप्त करने के लिए आप TouchableOpacity, TouchableHighlight, TouchableNativeFeedback का उपयोग कर सकते हैं। घटक को प्रॉपर के रूप में onPress प्रदान नहीं करता है। इसलिए आप इसके बजाय इनका उपयोग करें।

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

OR

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

OR

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

Answer 4

वैकल्पिक रूप से आप अपने दृष्टिकोण को onStartShouldSetResponder भी प्रदान कर सकते हैं, जैसे:

<View onStartShouldSetResponder={() => console.log("View click")}>
  // some code here
</View>