Button, TextInput, এবং Touchable Components

React Native তে, Button, TextInput, এবং Touchable Components অ্যাপ্লিকেশনগুলোর জন্য খুবই গুরুত্বপূর্ণ UI উপাদান। এগুলির মাধ্যমে ব্যবহারকারী ইনপুট গ্রহণ, ইন্টারঅ্যাকশন তৈরি এবং অ্যাপ্লিকেশনের সাথে যোগাযোগ করতে পারেন।

নিচে এই Components গুলোর বিস্তারিত আলোচনা করা হলো:

১. Button Component

React Native-এ Button একটি সাধারণ UI কম্পোনেন্ট যা ব্যবহারকারীকে কোনো কার্য সম্পাদনের জন্য একটি ক্লিকযোগ্য বোতাম প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত লেবেল এবং একটি ইভেন্ট হ্যান্ডলার (onPress) নিয়ে কাজ করে।

Button কম্পোনেন্টটি একদম বেসিক এবং সিম্পল, এবং এটি ব্যবহারকারীর জন্য একটি অ্যাকশন (যেমন সাবমিট, নেভিগেশন ইত্যাদি) বাস্তবায়ন করতে সহায়ক।

উদাহরণ:

import React from 'react';
import { Button, View } from 'react-native';

const App = () => {
  const handlePress = () => {
    alert('Button Pressed');
  };

  return (
    <View>
      <Button 
        title="Click Me" 
        onPress={handlePress} 
      />
    </View>
  );
};

export default App;

Button Component এর প্রধান Props:

• title: বোতামের টেক্সট।
• onPress: বোতামে ক্লিক করার পর কী ঘটবে তা নির্ধারণ করে।
• color: বোতামের রঙ পরিবর্তন করতে ব্যবহার করা হয়।
• disabled: বোতামটি নিষ্ক্রিয় করার জন্য ব্যবহার করা হয়।

২. TextInput Component

TextInput কম্পোনেন্ট React Native অ্যাপ্লিকেশনগুলিতে ব্যবহারকারীর ইনপুট গ্রহণ করতে ব্যবহৃত হয়। এটি সাধারণত ফর্মগুলির জন্য ব্যবহার করা হয় যেখানে ব্যবহারকারীদের টেক্সট, নাম, ইমেইল বা পাসওয়ার্ড ইনপুট করতে হয়।

TextInput কম্পোনেন্টে অনেক ধরনের প্রপার্টি রয়েছে যা স্টাইল এবং কার্যকারিতা কাস্টমাইজ করতে সহায়ক।

উদাহরণ:

import React, { useState } from 'react';
import { TextInput, View, Text } from 'react-native';

const App = () => {
  const [text, setText] = useState('');

  return (
    <View>
      <TextInput 
        placeholder="Enter text"
        value={text}
        onChangeText={setText}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      <Text>You typed: {text}</Text>
    </View>
  );
};

export default App;

TextInput Component এর প্রধান Props:

• placeholder: টেক্সট ইনপুটে কোন টেক্সট দেখা যাবে যখন ব্যবহারকারী কিছু ইনপুট করবে না।
• value: ইনপুটের বর্তমান মান।
• onChangeText: ইনপুটের মান পরিবর্তন করার জন্য ব্যবহৃত হয়।
• secureTextEntry: পাসওয়ার্ড ইনপুটের জন্য true দিলে, এটি ইনপুটগুলোকে হিডেন (ডট আকারে) দেখাবে।

৩. Touchable Components (TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback)

Touchable কম্পোনেন্টগুলি React Native-এ ব্যবহারকারী ইন্টারঅ্যাকশনের জন্য ব্যবহৃত হয়, যেমন কোনো বাটন বা ভিউতে ক্লিক বা ট্যাপ করা। এটি বিভিন্ন ধরনের কম্পোনেন্টের জন্য উপলব্ধ, যেমন TouchableOpacity, TouchableHighlight, এবং TouchableWithoutFeedback।

1. TouchableOpacity: যখন ব্যবহারকারী টাচ করবে, তখন কম্পোনেন্টের অপাসিটি হ্রাস পাবে, যা একটি "প্রেসড" (চাপানো) ইফেক্ট তৈরি করবে।

উদাহরণ:

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

const App = () => {
  const handlePress = () => {
    alert('Button Pressed');
  };

  return (
    <View>
      <TouchableOpacity onPress={handlePress} style={{ padding: 10, backgroundColor: 'skyblue' }}>
        <Text>Press Me</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

2. TouchableHighlight: এটি টাচ করার পর ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করে, যাতে ব্যবহারকারী বুঝতে পারে যে তারা একটি কম্পোনেন্টে ট্যাপ করেছে।

উদাহরণ:

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

const App = () => {
  const handlePress = () => {
    alert('Button Pressed');
  };

  return (
    <View>
      <TouchableHighlight 
        onPress={handlePress} 
        style={{ padding: 10, backgroundColor: 'lightgreen' }}
        underlayColor="yellow"
      >
        <Text>Press Me</Text>
      </TouchableHighlight>
    </View>
  );
};

export default App;

3. TouchableWithoutFeedback: এটি কোনও ভিজ্যুয়াল ইফেক্ট তৈরি না করেই কম্পোনেন্টে ট্যাপ করার সুযোগ দেয়। এটি সাধারণত ফর্ম বা 키বোর্ড বন্ধ করার জন্য ব্যবহৃত হয়।

উদাহরণ:

import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View, TextInput } from 'react-native';

const App = () => {
  const dismissKeyboard = () => {
    Keyboard.dismiss();
  };

  return (
    <TouchableWithoutFeedback onPress={dismissKeyboard}>
      <View>
        <TextInput 
          placeholder="Tap outside to dismiss keyboard" 
          style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        />
      </View>
    </TouchableWithoutFeedback>
  );
};

export default App;

Conclusion

• Button: সিম্পল এবং ব্যবহারকারী ইনপুটের জন্য ক্লিকযোগ্য বোতাম তৈরি করতে ব্যবহৃত হয়।
• TextInput: ব্যবহারকারী থেকে টেক্সট ইনপুট গ্রহণ করতে ব্যবহৃত হয় এবং সাধারণত ফর্মগুলিতে ব্যবহৃত হয়।
• Touchable Components: মোবাইল অ্যাপ্লিকেশনে ব্যবহারকারী ইন্টারঅ্যাকশন তৈরি করতে ব্যবহৃত হয়। এগুলি বিভিন্ন ধরনের প্রেস ইফেক্ট তৈরি করতে পারে যেমন Opacity, Highlight, বা Feedback।

এগুলি React Native অ্যাপ্লিকেশনগুলির মৌলিক এবং গুরুত্বপূর্ণ UI উপাদান, যা আপনার অ্যাপের কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে।