मैंने हाल ही में नौकरी बदली, और मेरे पहले कार्यों में से एक React Native में बॉटम शीट बनाना था।
नेटिव Android डेवलपमेंट बैकग्राउंड से आने के कारण, मुझे लगा कि यह नेटिव में बॉटम शीट बनाने जितना ही कठिन होगा। लेकिन मैं बहुत गलत था! मैं इतना मंत्रमुग्ध हो गया कि मैंने React Native में बॉटम शीट बनाने पर एक सिंपल ट्यूटोरियल लिखने का फैसला किया।
बॉटम शीट एक उपयोगी कंपोनेंट है जो स्क्रीन के नीचे से स्लाइड अप करता है और अक्सर विभिन्न विकल्पों को समाहित करता है। यह आधुनिक डिज़ाइन में बहुत आम है और Uber, Zomato, और कई अन्य ऐप्स द्वारा उपयोग किया जाता है।
यहां अंतिम परिणाम कैसा दिखेगा:
तो आइए देखते हैं कि React Native में बॉटम शीट कैसे बनाते हैं।
शुरुआत करना
सबसे पहले, React Native में एक नया प्रोजेक्ट बनाएं। मैं इसके लिए expo-cli का उपयोग कर रहा हूँ। यदि आप expo-cli से अनजान हैं या React Native के साथ बस शुरुआत कर रहे हैं, तो इस लिंक को देखें।
मैंने अपने प्रोजेक्ट का नाम BottomSheetDemo रखा है।
इसके बाद, हमें react-native-modalbox इंस्टॉल करना होगा। यह हमें एनिमेशन, पोज़िशन, बैकड्रॉप्स आदि जैसी कई इनबिल्ट क्षमताएं प्रदान करता है।
$ expo install react-native-modalbox@1.7.1
नोट: संस्करण 1.7.1 इंस्टॉल करना याद रखें। नवीनतम संस्करण में एक बग है जहां backdropPressToClose काम नहीं करता।
मोडल बनाना
हमारा मोडल बनाने का समय आ गया है। शुरुआत में आपको दिए गए कोड को हटाएं और अपने App.js फ़ाइल में निम्न जोड़ें:
यह हमारे बॉटम शीट/मोडल का बुनियादी ढांचा है। हम सिर्फ मोडल के केंद्र में एक टेक्स्ट दिखाएंगे।
इंटरैक्शन जोड़ना
हमें बॉटम शीट को तब दिखाने की आवश्यकता है जब एक बटन दबाया जाए। आइए कुछ इंटरैक्शन जोड़ते हैं।
मैं स्क्रीन के बीच में एक सिंपल बटन जोड़ूंगा:
इस बटन पर क्लिक करने पर, हमें अपना बॉटम शीट दिखाना/छिपाना होगा। ऐसा करने के लिए, हम useState React हुक का उपयोग करके एक स्टेट मेंटेन करेंगे।
हमारे मोडल में "isOpen" नामक एक प्रॉप है जिसे हम अपने बॉटम शीट को दिखाने/छिपाने के लिए टॉगल कर सकते हैं। इसे दिखाने के लिए हम बस modalVisible को false सेट करेंगे और इसके विपरीत।
लेकिन पहले, आइए अपने मोडल को बाकी कोड से अलग करें क्योंकि यह थोड़ा गड़बड़ होने लगा है। मैं एक अलग फंक्शन बनाऊंगा जो मेरा मोडल लौटाएगा।
कोड अब बहुत क्लीन दिखता है। लेकिन हमारा बॉटम शीट अभी भी बिल्कुल बॉटम शीट जैसा नहीं दिखता। हमें कुछ स्टाइलिंग जोड़ने की आवश्यकता है।
आइए कुछ स्टाइलिंग जोड़ें!
एक स्टाइलशीट बनाएं और इसमें निम्न स्टाइल्स जोड़ें:
यहां अंतिम कोड कैसा दिखता है:
हमने आखिरकार React Native में अपना बॉटम शीट बना लिया है। यह इतना सरल है और नेटिव Android में बनाने की तुलना में बहुत आसान है।
मैं iOS पर टिप्पणी नहीं कर सकता क्योंकि मैंने कभी कोशिश नहीं की।
तो, यदि आप iOS डेवलपर हैं या iOS में बॉटम शीट बनाने का अनुभव रखते हैं, तो मुझे बताएं कि आपका अनुभव कैसा था।
मोबाइल डेवलपर्स के लिए AndroidVille SLACK वर्कस्पेस से जुड़ें जहां लोग टेक में नवीनतम के बारे में अपनी सीख साझा करते हैं, विशेष रूप से Android Development, RxJava, Kotlin, Flutter, और सामान्य मोबाइल डेवलपमेंट।
वर्कस्पेस से जुड़ने के लिए इस लिंक पर क्लिक करें। यह बिल्कुल मुफ्त है।
आपने जो पढ़ा वह पसंद आया? इस पोस्ट को Facebook, WhatsApp, और LinkedIn पर शेयर करना न भूलें।
आप मुझे LinkedIn, Quora, Twitter, और Instagram पर फॉलो कर सकते हैं जहां मैं मोबाइल डेवलपमेंट से संबंधित सवालों के जवाब देता हूँ, विशेष रूप से Android और Flutter।
