কেন আমি একটি সুপার ইজি বটম শীট তৈরি করতে নেটিভ প্রতিক্রিয়াতে স্যুইচ করেছি৷

আমি সম্প্রতি চাকরি পরিবর্তন করেছি, এবং আমার প্রথম কাজগুলির মধ্যে একটি হল প্রতিক্রিয়া নেটিভ-এ একটি নীচের শীট তৈরি করা।

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

একটি নীচের শীট একটি দরকারী উপাদান যা স্ক্রিনের নীচে থেকে উপরে স্লাইড করে এবং প্রায়শই বিভিন্ন বিকল্প ধারণ করে। এটি আধুনিক ডিজাইনে খুবই সাধারণ এবং Uber, Zomato এবং আরও অনেকের মতো অ্যাপ ব্যবহার করে।

এখানে চূড়ান্ত ফলাফল কেমন হবে:

তাহলে চলুন দেখে নেওয়া যাক কিভাবে React Native-এ নিচের শীট তৈরি করা যায়।

শুরু করা

প্রথমে React Native এ একটি নতুন প্রজেক্ট তৈরি করুন। আমি এর জন্য এক্সপো-ক্লি ব্যবহার করছি। আপনি যদি এক্সপো-ক্লি সম্পর্কে অবগত না হন বা রিঅ্যাক্ট নেটিভ দিয়ে শুরু করছেন, এই লিঙ্কটি দেখুন।

আমি আমার প্রকল্পের নাম দিয়েছি BottomSheetDemo৷

পরবর্তীতে, আমাদের প্রতিক্রিয়া-নেটিভ-মডালবক্স ইনস্টল করতে হবে। এটি আমাদের অনেক অন্তর্নির্মিত ক্ষমতা প্রদান করে যেমন অ্যানিমেশন, অবস্থান, ব্যাকড্রপ ইত্যাদি।

$ expo install [email protected]

দ্রষ্টব্য:সংস্করণ 1.7.1 ইনস্টল করতে মনে রাখবেন। সাম্প্রতিক সংস্করণে একটি বাগ রয়েছে যেখানে backdropPressToClose কাজ করে না৷

মোডাল তৈরি করা

আমাদের মডেল তৈরি করার সময় এসেছে। শুরুতে আপনাকে যে কোডটি প্রদান করা হয়েছে তা সরান এবং আপনার App.js ফাইলে নিম্নলিখিতগুলি যোগ করুন:

এটি আমাদের নীচের শীট/মোডালের খালি হাড়। আমরা শুধু মডেলের কেন্দ্রে টেক্সট দেখাব।

অন্তর্ক্রিয়া যোগ করা

একটি বোতাম টিপলে আমাদের নীচের শীটটি দেখাতে হবে। আসুন কিছু মিথস্ক্রিয়া যোগ করি।

আমি স্ক্রিনের মাঝখানে একটি সাধারণ বোতাম যোগ করব:

এই বোতামটি ক্লিক করলে, আমাদের নীচের শীটটি দেখাতে/লুকাতে হবে। এটি করার জন্য, আমরা useState React হুক ব্যবহার করে একটি অবস্থা বজায় রাখব।

আমাদের মডেলের "isOpen" নামে একটি প্রপ রয়েছে যা আমরা আমাদের নীচের শীটটি দেখাতে/লুকাতে টগল করতে পারি। এটি দেখানোর জন্য আমরা কেবল মডেলটিকে মিথ্যা এবং এর বিপরীতে দৃশ্যমান সেট করব৷

কিন্তু প্রথমে, আসুন আমাদের মোডালটিকে বাকি কোড থেকে আলাদা করি কারণ এটি কিছুটা অগোছালো হতে শুরু করেছে। আমি একটি পৃথক ফাংশন তৈরি করব যা আমার মডেল ফিরিয়ে দেবে।

কোড এখন অনেক পরিষ্কার দেখায়. তবে আমাদের নীচের শীটটি এখনও নীচের শীটের মতো দেখতে নয়। আমাদের কিছু স্টাইলিং যোগ করতে হবে।

চলুন কিছু স্টাইলিং যোগ করা যাক!

একটি স্টাইলশীট তৈরি করুন এবং এতে নিম্নলিখিত শৈলী যোগ করুন:

এখানে চূড়ান্ত কোড দেখতে কেমন:

আমরা অবশেষে প্রতিক্রিয়া নেটিভ-এ আমাদের নীচের শীট তৈরি করেছি। নেটিভ অ্যান্ড্রয়েডের তুলনায় এটি তৈরি করা খুবই সহজ এবং অনেক সহজ।

আমি iOS-এ মন্তব্য করতে পারি না কারণ আমি কখনও এটি চেষ্টা করিনি।

সুতরাং, আপনি যদি একজন iOS বিকাশকারী হন বা iOS-এ নীচের শীট তৈরি করার অভিজ্ঞতা থাকে, তাহলে আপনার অভিজ্ঞতা কেমন ছিল তা আমাকে জানান৷

মোবাইল ডেভেলপারদের জন্য AndroidVille SLACK ওয়ার্কস্পেসে যোগদান করুন যেখানে লোকেরা সর্বশেষ প্রযুক্তি, বিশেষ করে Android ডেভেলপমেন্ট, RxJava, Kotlin, Flutter এবং সাধারণভাবে মোবাইল ডেভেলপমেন্ট সম্পর্কে তাদের শেখা শেয়ার করে।

কর্মক্ষেত্রে যোগ দিতে এই লিঙ্কে ক্লিক করুন। এটা একেবারে বিনামূল্যে।

তুমি যা পড়েছ? এই পোস্টটি Facebook, Whatsapp, এবংএ শেয়ার করতে ভুলবেন না লিঙ্কডইন ।

আপনি আমাকে LinkedIn, Quora, Twitter, এবং Instagram-এ অনুসরণ করতে পারেন যেখানে আমি মোবাইল ডেভেলপমেন্ট, বিশেষ করে Android এবং Flutter সম্পর্কিত প্রশ্নের উত্তর দিই৷