मैंने सुपर इज़ी बॉटम शीट बनाने के लिए रिएक्ट नेटिव पर स्विच क्यों किया

मैंने हाल ही में नौकरी बदली है, और मेरा पहला काम रिएक्ट नेटिव में एक बॉटम शीट बनाना था।

एक देशी Android विकास पृष्ठभूमि से आते हुए, मैंने सोचा कि यह मूल रूप से नीचे की शीट बनाने के समान कठिन होने वाला है। लेकिन मैं बहुत गलत था! मैं इतना मंत्रमुग्ध था कि मैंने रिएक्ट नेटिव में एक बॉटम शीट बनाने पर एक सरल ट्यूटोरियल लिखने का फैसला किया।

एक निचला पत्रक एक उपयोगी घटक है जो स्क्रीन के नीचे से ऊपर की ओर स्लाइड करता है और इसमें अक्सर विभिन्न विकल्प होते हैं। यह आधुनिक डिज़ाइन में बहुत आम है और Uber, Zomato, और कई अन्य ऐप्स द्वारा उपयोग किया जाता है।

यहां देखें कि अंतिम परिणाम कैसा दिखेगा:

तो आइए एक नज़र डालते हैं कि रिएक्ट नेटिव में बॉटम शीट कैसे बनाई जाती है।

आरंभ करना

सबसे पहले, रिएक्ट नेटिव में एक नया प्रोजेक्ट बनाएं। मैं इसके लिए एक्सपो-क्ली का उपयोग कर रहा हूं। यदि आप एक्सपो-क्ली से अनजान हैं या सिर्फ रिएक्ट नेटिव के साथ शुरुआत कर रहे हैं, तो इस लिंक को देखें।

मैंने अपने प्रोजेक्ट का नाम बॉटमशीटडेमो रखा है।

अगला, हमें प्रतिक्रिया-मूल-मोडलबॉक्स स्थापित करना होगा। यह हमें कई अंतर्निहित क्षमताएं प्रदान करता है जैसे एनिमेशन, स्थिति, पृष्ठभूमि आदि।

नोट:संस्करण 1.7.1 स्थापित करना याद रखें। नवीनतम संस्करण में एक बग है जहां backgroundPressToClose काम नहीं करता है।

मॉडल बनाना

यह हमारा मोडल बनाने का समय है। वह कोड निकालें जो आपने शुरुआत में दिया था और अपनी App.js फ़ाइल में निम्नलिखित जोड़ें:

यह हमारी निचली शीट/मोडल की नंगी हड्डियाँ हैं। हम सिर्फ मोडल के केंद्र में टेक्स्ट पर दिखाएंगे।

इंटरैक्शन जोड़ना

जब बटन दबाया जाता है तो हमें दिखाने के लिए नीचे की शीट की आवश्यकता होती है। आइए कुछ इंटरैक्शन जोड़ें।

मैं स्क्रीन के बीच में एक साधारण बटन जोड़ूंगा:

इस बटन पर क्लिक करने पर हमें अपनी बॉटम शीट को दिखाना/छिपाना होता है। ऐसा करने के लिए, हम यूज़स्टेट रिएक्ट हुक का उपयोग करके एक स्थिति बनाए रखेंगे।

हमारे मोडल में "isOpen" नाम का एक प्रोप है जिसे हम अपनी निचली शीट को दिखाने/छिपाने के लिए टॉगल कर सकते हैं। इसे दिखाने के लिए हम केवल modalVisible को false और इसके विपरीत सेट करेंगे।

लेकिन पहले, हमारे मोडल को बाकी कोड से अलग कर दें क्योंकि यह थोड़ा गड़बड़ होने लगा है। मैं एक अलग फ़ंक्शन बनाऊंगा जो मेरा मोडल लौटाएगा।

कोड अब बहुत साफ दिखता है। लेकिन हमारी निचली शीट अभी भी बिल्कुल नीचे की शीट की तरह नहीं दिखती है। हमें कुछ स्टाइल जोड़ने की जरूरत है।

आइए कुछ स्टाइल जोड़ें!

एक स्टाइलशीट बनाएं और उसमें निम्नलिखित शैलियां जोड़ें:

यहाँ अंतिम कोड कैसा दिखता है:

हमने आखिरकार रिएक्ट नेटिव में अपनी बॉटम शीट बना ली है। देशी Android की तुलना में इसे बनाना इतना सरल और बहुत आसान है।

मैं iOS पर टिप्पणी नहीं कर सकता क्योंकि मैंने कभी ऐसा करने की कोशिश नहीं की।

इसलिए, अगर आप iOS डेवलपर हैं या आपके पास iOS में बॉटम शीट बनाने का अनुभव है, तो मुझे बताएं कि आपका अनुभव कैसा रहा।

मोबाइल डेवलपर्स के लिए AndroidVille SLACK कार्यक्षेत्र में शामिल हों, जहां लोग नवीनतम तकनीक, विशेष रूप से Android विकास, RxJava, Kotlin, Flutter, और सामान्य रूप से मोबाइल विकास के बारे में अपनी सीख साझा करते हैं।

कार्यक्षेत्र से जुड़ने के लिए इस लिंक पर क्लिक करें। यह बिल्कुल मुफ़्त है।

आप जो पढ़ते हैं उसे पसंद करते हैं? इस पोस्ट को फेसबुक, व्हाट्सएप और . पर शेयर करना न भूलें लिंक्डइन .

आप मुझे लिंक्डइन, क्वोरा, ट्विटर और इंस्टाग्राम पर फॉलो कर सकते हैं, जहां मैं मोबाइल डेवलपमेंट, विशेष रूप से एंड्रॉइड और फ़्लटर से संबंधित सवालों के जवाब देता हूं।