React Native-এ টাচ (Touch) হ্যান্ডলিং: Button এবং Touchable কম্পোনেন্টস

মোবাইল ডিভাইসে UI ইন্টারঅ্যাকশন মূলত ট্যাপ বা টাচের মাধ্যমে হয়। React Native-এ বাটন ক্লিক, স্ক্রোল, জুম ইত্যাদি হ্যান্ডেল করার জন্য বিভিন্ন কম্পোনেন্ট এবং ইভেন্ট রয়েছে।

১. Button কম্পোনেন্টে onPress

সবচেয়ে সহজ পদ্ধতি:

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

২. Touchable কম্পোনেন্ট গুলো (কাস্টম UI-এর জন্য)

যখন সাধারণ কম্পোনেন্ট (Text, View, Image) কে ক্লিকযোগ্য করতে হয়, তখন Touchable কম্পোনেন্টগুলো ব্যবহার করা হয়।

TouchableOpacity

টাচ করলে অপাসিটি (Opacity) কমে যায়, ভিজ্যুয়াল ফিডব্যাক দেয়।

import React from 'react';
import { TouchableOpacity, StyleSheet, View, Text } from 'react-native';

const App = () => (
  
     alert('You Tapped Me')}>
      Button
    
  
);

const styles = StyleSheet.create({
  container: { alignItems: 'center' },
  text: { borderWidth: 1, padding: 25, borderColor: 'black', backgroundColor: 'red' }
});

export default App;

TouchableHighlight

প্রেস করলে ব্যাকগ্রাউন্ড রঙ গाढ় হয় (underlying color দেখায়)।

import { TouchableHighlight } from 'react-native';

<TouchableHighlight onPress={() => alert('You Tapped Me')} activeOpacity={0.6}>
  <Text style={styles.text}>Button</Text>
</TouchableHighlight>

TouchableWithoutFeedback

কোনো ভিজ্যুয়াল ফিডব্যাক ছাড়া শুধু টাচ ইভেন্ট হ্যান্ডেল করে।

import { TouchableWithoutFeedback } from 'react-native';

<TouchableWithoutFeedback onPress={() => alert('You Tapped Me')}>
  <Text style={styles.text}>Button</Text>
</TouchableWithoutFeedback>

তুলনামূলক সারসংক্ষেপ

সовেট

• আধুনিক React Native-এ Pressable কম্পোনেন্টও রয়েছে যা আরও ফ্লেক্সিবল।
• লং প্রেসের জন্য onLongPress প্রপ ব্যবহার করুন।