ReactNative এ স্পর্শগুলি কীভাবে পরিচালনা করবেন?

একটি ডিভাইসে UI এর সাথে মিথস্ক্রিয়া প্রধানত একটি স্পর্শ বা ট্যাপের মাধ্যমে ঘটে। তাই আমরা যখন অ্যাপটি ব্যবহার করি, তখন আমরা বেশিরভাগই কিছু অ্যাকশন করার জন্য বোতামে ট্যাপ করি, অথবা স্ক্রীন টাচ করে পৃষ্ঠাটি স্ক্রোল করি, পৃষ্ঠা জুম করার চেষ্টা করি ইত্যাদি। ট্যাপের মতো এই অঙ্গভঙ্গিগুলি পরিচালনা করতে, স্পর্শ প্রতিক্রিয়াশীল ইভেন্টগুলি ক্যাপচার করে বা একটি স্পর্শযোগ্য উপাদান এটি স্পর্শ করে মোকাবেলা করে।

একটি বোতামে ক্লিক করলে কি হয় তার উদাহরণ দেখা যাক।

উদাহরণ 1:বোতামে ট্যাপ হ্যান্ডলিং

এখানে বোতামের একটি সহজ উদাহরণ।

 { সতর্কতা('তুমি আমাকে ট্যাপ করছ!'); }} title="Tap Me"/>

ব্যবহারকারী বোতামে ট্যাপ করলে অনপ্রেস ইভেন্ট কল করা হবে। এখানে এটির একটি কার্যকরী উদাহরণ।

'react' থেকে প্রতিক্রিয়া আমদানি করুন;'react-native' থেকে { Button, View, Alert} আমদানি করুন;const অ্যাপ =() => { ফেরত ( <দেখুন স্টাইল={{ফ্লেক্স :1, জাস্টিফাই কনটেন্ট:'সেন্টার' , মার্জিন:15 }}>  { সতর্কতা('আপনি আমাকে ট্যাপ করেছেন!'); }} title="Tap Me" />  );}ডিফল্ট অ্যাপ রপ্তানি করুন; 
আউটপুট
 

 
 
স্পর্শযোগ্য উপাদান
 

 রিঅ্যাক্ট নেটিভ টাচযোগ্য কম্পোনেন্ট ট্যাপিং জেসচার ক্যাপচার করতে সাহায্য করে যদি onPress() এর মত ইভেন্টে কোন সমস্যা থাকে যা বোতামের মত রিঅ্যাক্ট নেটিভ কম্পোনেন্টে ব্যবহার করা হয়।
 

 স্পর্শযোগ্য উপাদান যেকোনো প্রতিক্রিয়া নেটিভ উপাদানে ট্যাপ করার অঙ্গভঙ্গি পরিচালনা করতে নিম্নলিখিত বিকল্পগুলির সাথে আসে
 
 
স্পর্শযোগ্য অস্বচ্ছতা
 
স্পর্শযোগ্য হাইলাইট
 
প্রতিক্রিয়া ছাড়াই স্পর্শযোগ্য
 
 
স্পর্শযোগ্য অস্বচ্ছতা
 

 স্পর্শ করা হলে এই উপাদানটি একটি উপাদানের অস্বচ্ছতা পরিবর্তন করবে।
 

 আপনি নিম্নলিখিত হিসাবে TouchableOpacity ব্যবহার করতে পারেন -
 
 সতর্কতা('আপনি আমাকে ট্যাপ করেছেন')}> <পাঠ্য শৈলী ={styles.text}> বোতাম 
 

 এখানে একটি কার্যকরী উদাহরণ -
 'react-native'const অ্যাপ =() => { রিটার্ন ( <স্টাইল দেখুন ={styles.container}> প্রতিক্রিয়া আমদানি করুন () => সতর্কতা('আপনি আমাকে ট্যাপ করেছেন')}> <পাঠ্য শৈলী ={styles.text}> বোতাম    )}ডিফল্ট অ্যাপকনস্ট শৈলী রপ্তানি করুন =StyleSheet.create ({ ধারক :{ alignItems:'center', }, text:{ borderWidth:1, padding:25, borderColor:'black', backgroundcolor:'red' }});

ব্যবহারকারী যখন −

স্পর্শযোগ্য হাইলাইট

যখন একজন ব্যবহারকারী উপাদানটি চাপবেন, তখন এটি গাঢ় হয়ে যাবে এবং অন্তর্নিহিত রঙটি প্রদর্শিত হবে৷

নীচে দেখানো হিসাবে এটি ব্যবহার করার আগে আপনাকে TouchableHighlight আমদানি করতে হবে -

'react-native' থেকে { TouchableHighlight } আমদানি করুন

বোতাম উপাদানটি পাঠ্য উপাদানটির ভিতরে মোড়ানো থাকে এবং পাঠ্যটি স্পর্শযোগ্য হাইলাইট উপাদানটির ভিতরে থাকে। আপনি আপনার প্রয়োজনীয়তা অনুযায়ী উপাদান শৈলী যোগ করতে পারেন. অনপ্রেস ফাংশন টাচযোগ্য হাইলাইটে যোগ করা হয়েছে এবং ট্যাপ করার সময় সতর্কতা বার্তা দেখানো হবে।

 সতর্কতা('You tapped Me')} activeOpacity={0.6}>  বোতাম 

সম্পূর্ণ কাজের উদাহরণ নিম্নরূপ -

আউটপুট

প্রতিক্রিয়া ছাড়াই স্পর্শযোগ্য

এটি ব্যবহার করা উচিত যখন আপনি স্পর্শ ইভেন্ট পরিচালনা করতে চান এবং কোনো প্রতিক্রিয়ার প্রয়োজন নেই৷

এখানে বোতামটি TouchableWithoutFeedback কম্পোনেন্টের ভিতরে মোড়ানো আছে যেমনটি নীচে দেখানো হয়েছে −

 সতর্কতা('আপনি আমাকে ট্যাপ করেছেন')}> <টেক্সট স্টাইল ={styles.text}> বোতাম 

উদাহরণ:Touchable WithoutFeedback উপাদানের সাথে কাজ করা