React Native में टच कैसे हैंडल करें

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

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

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

यहां Button का एक सरल उदाहरण दिया गया है।

<Button
    onPress={() => {
        alert('You Tapped on Me!');
    }}
    title="Tap Me" />

जब उपयोगकर्ता बटन पर टैप करता है तो onPress इवेंट कॉल किया जाएगा। यहां इसका एक कार्यात्मक उदाहरण दिया गया है।

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
    return (
        
             {
                    alert('You Tapped on Me!');
                }}
                title="Tap Me"
            />
        
    );
}
export default App;

आउटपुट

Touchable कंपोनेंट

React Native touchable कंपोनेंट टैपिंग जेस्चर को कैप्चर करने में मदद करता है यदि onPress() जैसे इवेंट्स में कोई समस्या है जो React Native कंपोनेंट्स जैसे बटन्स पर उपयोग किए जाते हैं।

Touchable कंपोनेंट किसी भी React Native कंपोनेंट पर टैपिंग जेस्चर को हैंडल करने के लिए निम्नलिखित विकल्पों के साथ आता है:

• Touchable Opacity
• Touchable Highlight
• Touchable Without Feedback

Touchable Opacity

यह एलिमेंट टच होने पर किसी एलिमेंट की अस्पष्टता (opacity) को बदल देगा।

आप TouchableOpacity का उपयोग निम्नानुसार कर सकते हैं:

<TouchableOpacity onPress={() => alert('You Tapped Me')}>
    
        Button
    
</TouchableOpacity>

यहां एक कार्यात्मक उदाहरण दिया गया है:

import React from 'react'
import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'
const App = () => {
    return (
        
             alert('You Tapped Me')}>
                
                    Button
                
            
        
    )
}
export default App
const styles = StyleSheet.create ({
    container: {
        alignItems: 'center',
    },
    text: {
        borderWidth: 1,
        padding: 25,
        borderColor: 'black',
        backgroundColor: 'red'
    }
});

आप देखेंगे कि जब उपयोगकर्ता बटन को छूता है तो अस्पष्टता बदलती है:

Touchable Highlight

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

इसका उपयोग करने से पहले आपको TouchableHighlight इम्पोर्ट करना होगा जैसा कि नीचे दिखाया गया है:

import { TouchableHighlight } from 'react-native'

Button कंपोनेंट Text कंपोनेंट के अंदर लपेटा गया है और Text TouchableHighlight कंपोनेंट के अंदर है। आप अपनी आवश्यकताओं के अनुसार कंपोनेंट्स में स्टाइल जोड़ सकते हैं। onPress फ़ंक्शन TouchableHighlight पर जोड़ा गया है और टैप करने पर अलर्ट संदेश दिखाया जाएगा।

<TouchableHighlight onPress={() => alert('You Tapped Me')} activeOpacity={0.6}>
    
        Button
    
</TouchableHighlight>

पूरा कार्यात्मक उदाहरण इस प्रकार है:

import React from 'react'
import { View, TouchableHighlight, Text, StyleSheet } from 'react-native'
const App = (props) => {
    return (
        
             alert('You Tapped Me')} activeOpacity={0.6}>
                
                    Button
                
            
        
    )
}
export default App
const styles = StyleSheet.create ({
    container: {
        padding:100,
        alignItems: 'center',
    },
    text: {
        borderWidth: 1,
        padding: 25,
        borderColor: 'black',
        backgroundColor: 'gray'
    }
})

आउटपुट

Touchable Without Feedback

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

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

<TouchableWithoutFeedback onPress={() => alert('You Tapped Me')}>
    
        Button
    
</TouchableWithoutFeedback>

उदाहरण: TouchableWithoutFeedback कंपोनेंट के साथ कार्य करना

import React from 'react'
import { View, TouchableWithoutFeedback, Text, StyleSheet } from 'react-native'
const Home = (props) => {
    return (
        
             alert('You Tapped Me')}>
                
                    Button
                
            
        
    )
}
export default Home
const styles = StyleSheet.create ({
    container: {
        padding:100,
        alignItems: 'center',
    },
    text: {
        borderWidth: 1,
        padding: 25,
        borderColor: 'black',
        backgroundColor: 'gray'
    }
})

आउटपुट