TouchableNativeFeedback, TouchableHighlight या TouchableOpacity का उपयोग कब करें?


97

में प्रतिक्रिया मूल निवासी है, वहाँ एक बटन बनाने के लिए कम से कम तीन तरीके हैं: TouchableNativeFeedback, TouchableHighlightऔर TouchableOpacity। वहाँ भी है TouchableWithoutFeedback, जो प्रलेखन स्पष्ट रूप से बताता है कि आपको उपयोग नहीं करना चाहिए क्योंकि "प्रेस करने के लिए प्रतिक्रिया करने वाले सभी तत्वों को छूने पर एक दृश्य प्रतिक्रिया होनी चाहिए"।

  • TouchableNativeFeedback एंड्रॉयड केवल और "RCTView का एक और उदाहरण के साथ दृश्य की जगह" है
  • TouchableHighlight "दृश्य पदानुक्रम के लिए एक दृश्य जोड़ता है"
  • TouchableOpacity काम करता है "दृश्य पदानुक्रम को बदले बिना"

क्या तीनों के बीच कोई अन्य महत्वपूर्ण अंतर हैं? उनमें से एक गोटो घटक है? क्या मामले में आप का उपयोग करना चाहिए TouchableHighlightसे अधिक TouchableOpacity? क्या कोई प्रदर्शन निहितार्थ हैं?

मैं अभी एक आवेदन लिख रहा हूं, और पाया कि तीनों में टैप और एक्शन (इस मामले में नेविगेशन परिवर्तन) के बीच एक महत्वपूर्ण देरी है। क्या इसे स्नैपर बनाने का कोई तरीका है?


4
जहाँ तक तड़क-भड़क की बात है ... कंसोलिंग को कुछ भी आउटपुट देना। दृश्य में बदलाव को धीमा कर देता है। मैं अभी प्रतिक्रिया मूल में शुरू कर रहा हूं और अपने पहले घटकों को विकसित करते समय गति से कुछ हद तक प्रभावित नहीं हुआ था। मैंने सभी कंसोल.लॉग कमांड (रिड्यूस लॉगर को निष्क्रिय करने सहित) को हटा दिया और रिलीज लक्ष्य के लिए बनाया गया और गति ने मुझे उड़ा दिया। यह कॉर्डोवा ऐप विकसित करने से आ रहा है।
ट्रैविस व्हाइट

जवाबों:


118

स्रोत: https://medium.com/differential/better-cross-platform-react-native-compenders-cb8aadeba472 , निक विएंगे द्वारा

TouchableHighlight

• यह क्या करता है: दबाए जाने पर तत्व की पृष्ठभूमि को हल्का या हल्का करता है।

• इसका उपयोग कब करें: एक ठोस आकार या पृष्ठभूमि, और सूची दृश्य आइटम पर iOS के लिए स्पर्श योग्य तत्वों या बटन पर।

TouchableOpacity

• यह क्या करता है: दबाए जाने पर पूरे तत्व की अस्पष्टता को हल्का करता है।

• इसका उपयोग कब करें: उन ताउम्र तत्वों के लिए आईओएस पर जो बिना पृष्ठभूमि रंग के स्टैंडअलोन टेक्स्ट या आइकन हैं।

TouchableNativeFeedback

• यह क्या करता है: दबाए जाने पर पृष्ठभूमि पर एक लहर प्रभाव जोड़ता है।

• इसका उपयोग कब करें: लगभग सभी स्पर्श योग्य तत्वों के लिए Android पर।


धन्यवाद! मैंने इस लेख को तब से पढ़ा था, लेकिन अपने प्रश्न का उत्तर देने के लिए इसे अब और नहीं पा सका। यह वास्तव में वही है जिसकी मुझे तलाश थी।
डेमसनेट

1
TouchableNativeFeedback का उपयोग करते समय, इसकी यह वर्ग पृष्ठभूमि होती है (आई नॉट रिप्पल) हम इसे कैसे कस्टमाइज़ करते हैं (जैसे इसके आकार को बढ़ाते हैं, इसे गोल करते हैं, या शायद इसे हटा सकते हैं और केवल रिपल है)?
यासिर

8

खैर, यह है कि मैं आमतौर पर कैसे उपयोग करने के लिए तय:

  • यदि मैं केवल Android के लिए निर्माण कर रहा हूं, और घटक काफी बड़ा है, तो देशी प्रतिक्रिया दूसरों के उपयोग करने की तुलना में दृष्टिगत रूप से भिन्न होगी, फिर उपयोग करें TouchableNativeFeedback
  • यदि मैं घटक पर अस्पष्टता को नियंत्रित करना चाहता हूं या मैं चाहता हूं कि बटन को छूने पर रंग हो, और मैं टौचेबल के अंदर कुछ तत्व की केंद्रित स्थिति को नियंत्रित नहीं करना चाहता हूं, तो मैं उपयोग करता हूं TouchableHighlight। ( TouchableOpacityजब आप अपारदर्शिता को नियंत्रित करते हैं तो कुछ अजीब हिस्से मिल गए हैं)।
  • अन्य सभी मामलों में, मैं उपयोग करता हूं TouchableOpacityक्योंकि यह "नंगे" से अधिक हैTouchableHighlight

1
यह उत्तर एक उपयोगी शुरुआत है ... लेकिन मैं एक और एक का उपयोग करने के लिए और अधिक ठोस तकनीकी और / या डिजाइन से संबंधित कारणों की तलाश कर रहा था।
ब्यू स्मिथ स्मिथ

2

मुझे लगता है कि डॉक्स में बताया गया मुख्य अंतर:

TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.संपर्क

TouchableHighlight

TouchableHighlight विचार करने के लिए एक आवरण स्पर्श करने के लिए ठीक से प्रतिक्रिया। प्रेस डाउन पर, लिपटे हुए दृश्य की अस्पष्टता कम हो जाती है, जो अंडरले रंग को देखने, काला करने या दृश्य को टिन करने की अनुमति देता है।

अंडरले एक नए दृश्य में बच्चे को लपेटने से आता है, जो लेआउट को प्रभावित कर सकता है, और कभी-कभी अवांछित दृश्य कलाकृतियों का कारण बन सकता है यदि सही तरीके से उपयोग नहीं किया जाता है, उदाहरण के लिए यदि लिपटे हुए दृश्य का बैकग्राउंड स्पष्ट रूप से अपारदर्शी रंग पर सेट नहीं है।

TouchableOpacity

TouchableOpacity # विचारों को छूने के लिए उचित प्रतिक्रिया देने के लिए एक आवरण। नीचे दबाए जाने पर, लिपटी हुई दृश्य की अस्पष्टता कम हो जाती है, इसे कम करते हुए।


-3

यदि आप चाहते हैं

  • प्रेस बटन पर प्रकाश डाला - उपयोग TouchableHighlight
  • प्रेस के उपयोग पर बटन की अपारदर्शिता को बदलें TouchableOpacity

3
मुझे लगता है कि लेखक को इस बारे में पता है कि कुछ अधिक जटिल उत्तर के लिए पूछ रहा है।
Radek Czemerys

1
इसके अलावा, आप भी उपयोग कर सकते हैं <TouchableHighlight underlayColor="transparent" />... और फेसबुक उन सभी को उनके F8 App github.com/fbsamples/f8app/blob/master/js/common/F8Touchable.js
damusnet
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.