कैसे ReactNative में स्पर्श को संभालने के लिए?

डिवाइस पर UI के साथ इंटरेक्शन मुख्य रूप से टच या टैप के माध्यम से होता है। इसलिए जब हम ऐप का उपयोग करते हैं, तो हम ज्यादातर कुछ क्रिया करने के लिए बटन को टैप करते हैं, या स्क्रीन को छूकर पेज को स्क्रॉल करते हैं, पेज को ज़ूम करने का प्रयास करते हैं। स्पर्श करने योग्य घटक इसे स्पर्श करता है।

आइए देखें कि जब एक बटन क्लिक किया जाता है तो क्या होता है।

उदाहरण 1:बटन पर टैप को हैंडल करना

यहाँ बटन का एक सरल उदाहरण दिया गया है।

<बटन onPress={() => { अलर्ट ('आपने मुझ पर टैप किया!'); }} शीर्षक ="मुझे टैप करें"/> 

 जब उपयोगकर्ता बटन पर टैप करेगा तो ऑनप्रेस ईवेंट कॉल किया जाएगा। इसका एक कार्यशील उदाहरण यहां दिया गया है।
 <पूर्व> 'प्रतिक्रिया' से आयात प्रतिक्रिया; 'प्रतिक्रिया-मूल' से आयात {बटन, दृश्य, अलर्ट}; कॉन्स्ट ऐप =() => {वापसी (<शैली देखें ={{फ्लेक्स:1, औचित्य सामग्री:'केंद्र' , मार्जिन:15 }}> <बटन ऑनप्रेस ={() => {अलर्ट ('आपने मुझ पर टैप किया!'); }} शीर्षक ="मुझे टैप करें" /> );} डिफ़ॉल्ट ऐप निर्यात करें; 
आउटपुट
 

 
 
स्पर्श करने योग्य घटक
 

 रिएक्ट नेटिव टचेबल कंपोनेंट टैपिंग जेस्चर को पकड़ने में मदद करता है, जब ऑनप्रेस () जैसी घटनाओं के साथ कोई समस्या होती है, जिसका उपयोग बटन जैसे रिएक्ट नेटिव कंपोनेंट्स पर किया जाता है।
 

 स्पर्श करने योग्य घटक किसी भी प्रतिक्रिया मूल घटक पर टैपिंग जेस्चर को संभालने के लिए निम्नलिखित विकल्पों के साथ आता है
 
 
स्पर्श करने योग्य अस्पष्टता
 
स्पर्श करने योग्य हाइलाइट
 
प्रतिक्रिया के बिना स्पर्श करने योग्य
 
 
स्पर्श करने योग्य अस्पष्टता
 

 स्पर्श करने पर यह तत्व किसी तत्व की अस्पष्टता को बदल देगा।
 

 आप TouchableOpacity का उपयोग इस प्रकार कर सकते हैं -
 
 अलर्ट('आपने मुझे टैप किया')}> <टेक्स्ट स्टाइल ={styles.text}> बटन 
 

 यहाँ एक कार्यशील उदाहरण है -
 
'react'import से रिएक्ट आयात करें {TouchableOpacity, StyleSheet, View, Text} 'react-native'const App से =() => {रिटर्न (  अलर्ट ('आपने मुझे टैप किया')}> <टेक्स्ट स्टाइल ={styles.text}> बटन    )} डिफ़ॉल्ट एपकॉन्स्ट स्टाइल निर्यात करें =StyleSheet.create ({कंटेनर :{ alignItems:'center', }, text:{ BorderWidth:1, पैडिंग:25, BorderColor:'Black', backgroundColor:'red' }});
 

 जब उपयोगकर्ता बटन को स्पर्श करेगा तो आपको अस्पष्टता दिखाई देगी -
 

 
 
स्पर्श करने योग्य हाइलाइट
 

 जब कोई उपयोगकर्ता तत्व को दबाता है, तो वह गहरा हो जाएगा और अंतर्निहित रंग दिखाई देगा।
 

 आपको TouchableHighlight का उपयोग करने से पहले उसे आयात करना होगा जैसा कि नीचे दिखाया गया है -
 
'react-native' से आयात करें { TouchableHighlight }
 

 बटन घटक टेक्स्ट घटक के अंदर लपेटा गया है और टेक्स्ट TouchableHighlight घटक के अंदर है। आप अपनी आवश्यकताओं के अनुसार घटकों में शैलियों को जोड़ सकते हैं। ऑनप्रेस फ़ंक्शन को टच करने योग्य हाइलाइट पर जोड़ा जाता है और टैप करने पर अलर्ट संदेश दिखाया जाएगा।
 
 Alert('You Taped Me')} activeOpacity={0.6}>  Button 
 

 पूर्ण कार्य उदाहरण इस प्रकार है -
 <पूर्व> 'प्रतिक्रिया' आयात से प्रतिक्रिया आयात करें {देखें, टच करने योग्य हाइलाइट, टेक्स्ट, स्टाइलशीट} 'प्रतिक्रिया-मूल' कॉन्स्ट ऐप से =(प्रॉप्स) => {वापसी (<शैली देखें ={styles.container}> <टच करने योग्य हाइलाइट ऑनप्रेस ={() => अलर्ट ('आपने मुझे टैप किया')} activeOpacity={0.6}> <टेक्स्ट स्टाइल ={styles.text}> बटन    )}एक्सपोर्ट डिफॉल्ट एपकॉन्स्ट स्टाइल =StyleSheet.create ({कंटेनर:{पैडिंग:100, alignItems:'center', }, text:{ BorderWidth:1, पैडिंग:25, BorderColor:'ब्लैक', बैकग्राउंड कलर:'ग्रे'}})

आउटपुट

प्रतिक्रिया के बिना स्पर्श करने योग्य

इसका उपयोग तब किया जाना चाहिए जब आप स्पर्श घटना को संभालना चाहते हैं और किसी प्रतिक्रिया की आवश्यकता नहीं है।

यहां बटन को TouchableWithoutFeedback घटक के अंदर लपेटा गया है जैसा कि नीचे दिखाया गया है -

 अलर्ट('आपने मुझे टैप किया')}> <टेक्स्ट स्टाइल ={styles.text}> बटन 

उदाहरण:Touchableविदाउटफ़ीडबैक घटक के साथ कार्य करना

आउटपुट