फ्रीलांसर नोट्स: पहला रिएक्टिव नेटिव एप्लिकेशन विकसित करना

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

मैंने फ्रीलांस क्यों चुना?

पिछले मई में, मैंने एक अद्भुत फ्रीलांस परियोजना शुरू की। उस समय, मैं स्टॉकहोम में एक स्टार्टअप में एक पूर्ण-स्टैक डेवलपर था। यह मेरी पहली प्रोग्रामिंग जॉब थी, मैं अभी एक साल पहले वहां गया था ( यहां मैं इस बारे में अधिक विस्तार से बात करता हूं)।

गर्मी तेजी से आ रही थी, काम की गति, इससे पहले कि पागल, दिन के बाद यह शांत हो रहा था। एक बार ऐसा एक सप्ताह था जब प्राथमिकता के क्रम में, मुझे तकनीकी सहायता से निपटना पड़ा। मुझे कुछ गलतियों से निपटना था, मैं थोड़ा ऊब गया था, काम ने मुझे खुश नहीं किया।

यह तब था जब मैं इतने उदास मूड में था कि मेरे पिता ने मुझे अपने इरादे के बारे में सूचित किया कि मैं उनकी कंपनी के ग्राहकों के लिए एक मोबाइल एप्लिकेशन बनाऊँ। हालाँकि वह जानता था कि मैं काम में बहुत व्यस्त था, और मुझे उम्मीद नहीं थी कि मैं अपना सारा समय उसके विचार को लागू करने में दूंगा, फिर भी उसने पूछा कि क्या मैं इस नए प्रोजेक्ट में किसी तरह का सलाहकार बनना चाहूंगा। मैंने तब महसूस किया कि मैं एक दिलचस्प मानसिक काम के लिए भूखा था और इसलिए उनके सवाल का सकारात्मक जवाब दिया। हालाँकि, मैंने परामर्शदाता I से शुरू में यह योजना नहीं बनाई थी, परिणामस्वरूप, एक अग्रणी एप्लिकेशन डेवलपर में बदल गया।

यहां आपको आश्चर्य हो सकता है कि एक साल तक पेशेवर वेब डेवलपर के रूप में काम न करने के बाद भी कोई मोबाइल विकास करने की कोशिश क्यों कर सकता है? क्या यह समझदारी नहीं होगी कि चुने हुए आला में अनुभव हासिल करना जारी रखें, पेशेवर रूप से बढ़ें और एक प्रभावशाली फिर से शुरू करें?

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

बेशक, करियर स्ट्रेटजी को आप जो पसंद करते हैं और कर रहे हैं वह जरूरी नहीं कि पारस्परिक रूप से अनन्य घटना हो। वास्तव में, मुझे वास्तव में अपने पिछले काम और नियोक्ता दोनों पसंद थे। यह सिर्फ इतना हुआ कि मैं एक अन्य परियोजना के लिए आया था, जिसके लिए तरस मैं पहले जो कर रहा था वह करने की इच्छा से अधिक मजबूत निकला।

इस परियोजना ने मुझे कितना आकर्षक बना दिया? तेजी से विकसित होने वाले उत्पाद पर काम करने की तुलना में उसे और अधिक दिलचस्प बना दिया, जो कि हजारों कंपनियों द्वारा उपयोग किया जाता है, एक टीम के हिस्से के रूप में जो मुझे मिले हैं उनमें से सबसे अच्छे लोग हैं? इस सवाल का जवाब इस तरह से दिया जा सकता है: यह स्वतंत्रता है, यह चुनौती है जिसने मुझे एक कठिन समस्या को हल करने की आवश्यकता दी है, और यह आत्म-विकास की इच्छा है।

प्रतिक्रियाशील मूल का उपयोग करने का निर्णय क्यों लिया गया?

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

एजेंसियों में से एक ने आवेदन के डिज़ाइन की एक रूपरेखा तैयार की, जो अस्वस्थ दिखने के अलावा, ग्राहक की साइट पर प्रतिबिंबित कॉर्पोरेट पहचान से भी मेल नहीं खाती। एक और सुझाया गया आकाश-उच्च मूल्य - दोनों विकास के लिए और परियोजना समर्थन के लिए। तीसरा, ऐसा लगता है, प्रस्ताव भेजा, बिना ग्राहक की आवश्यकताओं का अध्ययन किए बिना। प्रस्तावों को प्रस्तुत करने वाली सभी एजेंसियों में एक चीज समान थी: वे कॉर्डोवा हाइब्रिड ढांचे का उपयोग करके एक एप्लिकेशन बनाने जा रहे थे।

लेकिन यह सब नहीं है। हालांकि कॉर्डोवा पूरी तरह से स्वतंत्र और खुला स्रोत उपकरण है, लेकिन एजेंसियों में से एक ने यह भी जानकारी छिपाने की कोशिश की कि यह किस विशिष्ट तकनीक का उपयोग करता है। इसके बजाय, एजेंसी के प्रतिनिधियों ने आंतरिक रूप से बनाए गए "इन-हाउस" मोबाइल ऐप डेवलपमेंट प्लेटफॉर्म की बात की। ऐसा लगता है कि हम कॉर्डोवा के बारे में एक छोटे से ऐड-ऑन के बारे में बात कर रहे थे, जिसने इस एजेंसी को आवेदन की सर्विसिंग के लिए विशेष रूप से विशेष रूप से सुरक्षित अधिकार प्रदान किए और ग्राहक के भविष्य के संभावित संक्रमण को अन्य डेवलपर के लिए मुश्किल और महंगा बना दिया। सामान्य तौर पर, प्रश्न में प्रस्ताव विशेष रूप से प्रभावशाली नहीं थे।

यह ध्यान दिया जाना चाहिए कि मेरे पास हाइब्रिड फ्रेमवर्क के खिलाफ कुछ भी नहीं है। मैं लगातार उन अनुप्रयोगों का उपयोग करता हूं जो उन पर आधारित हैं। यह, उदाहरण के लिए, जीमेल, स्लैक, एटम, फिगमा। हालाँकि, मैंने कुछ समय के लिए रिएक्ट नेटिव के बारे में सुना था, कि कैसे यह लाइब्रेरी आपको जावास्क्रिप्ट का उपयोग करके क्रॉस-प्लेटफ़ॉर्म मोबाइल एप्लिकेशन बनाने की अनुमति देती है जो हाइब्रिड नहीं थे!

और अब क्या? देशी जावास्क्रिप्ट अनुप्रयोगों को विकसित करते समय आईओएस और एंड्रॉइड का समर्थन करने के लिए क्या यह कुछ मुश्किल तरीके से आवश्यक है? यह प्रश्न इस तथ्य के कारण उत्पन्न हुआ कि जब मैं इस तरह के अनुप्रयोगों में रुचि रखता था, तो यह पता चला कि आईओएस एप्लिकेशन को ऑब्जेक्टिव-सी या स्विफ्ट का उपयोग करके लिखा गया था, और जावा या कोटलिन का उपयोग एंड्रॉइड अनुप्रयोगों को विकसित करने के लिए किया गया था।

बेशक, यहां कोई विशेष चाल नहीं है। इसलिए मेरा एक और सवाल था। रिएक्टिव नेटिव एप्लिकेशन को वास्तविक देशी एप्लिकेशन कैसे कहा जा सकता है? यदि आप इस प्रश्न का संक्षेप में उत्तर देते हैं, तो यह पता चलता है कि पूरी चीज एपीआई में है। मुझे यह समझने में अधिक समय लगा कि मैं स्वीकार करना चाहूंगा, लेकिन जिस तरह से रिएक्टिव नेटिव एप्लिकेशन, जिसे मूल कहा जाता है, मोबाइल प्लेटफॉर्म के साथ काम करता है, में जावास्क्रिप्ट कोड लॉन्च करने और इस तरह के कोड को संकलित नहीं करने में शामिल नहीं है मूल कोड। बात यह है कि ये एप्लिकेशन एपीआई अनुरोधों को निष्पादित करते हैं जो iPhone पर जावा और जावा पर उद्देश्य-सी का उपयोग करके मूल घटकों को प्रदर्शित करते हैं।

यदि आप रिएक्ट नेटिव की मूल बातों की गहरी समझ प्राप्त करना चाहते हैं - मैं Quora को इस उत्तर की सलाह देता हूं, तो यह रिएक्ट कॉन्फ के साथ एक प्रस्तुति है, और यह सामग्री, जो रिएक्ट नेटिव की रिहाई के बारे में बताती है।

हालाँकि उस समय मुझे पता नहीं था कि वास्तव में रिएक्ट नेटिव-एप्लिकेशन के बॉल्स में क्या हो रहा है, मुझे पता था कि ऐसे एप्लिकेशन का काम देशी कोड के निष्पादन में कम हो गया था। एजेंसियों द्वारा प्रस्तुत कॉर्डोवा-आधारित समाधानों में से एक को चुनने के खिलाफ यह मेरा मुख्य तर्क था। मैंने सोचा कि यदि किसी कंपनी को मोबाइल एप्लिकेशन की आवश्यकता है, तो यह एप्लिकेशन मूल होना चाहिए। यदि किसी को HTML / CSS / JS के आधार पर निर्मित एप्लिकेशन की आवश्यकता है, तो उसके वेब एप्लिकेशन की मोबाइल क्षमताओं को बेहतर बनाने के लिए बस पैसा खर्च करना बेहतर होगा।

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

इससे पहले कि मुझे खुद इसका एहसास हो, मैं आवेदन के लिए आधार बनाने में सक्षम था। नतीजतन, उस बातचीत के कुछ हफ्ते बाद, क्लाइंट और मैं इस बात पर सहमत हुए कि मैं उसके लिए एप्लिकेशन विकसित करूंगा।

आवेदन विनिर्देशों

इससे पहले कि हम तकनीकी विवरण में डुबकी लगाते हैं, मैं इस बारे में थोड़ी बात करना चाहता हूं कि हम किस तरह के आवेदन से निपट रहे हैं।

जिस क्लाइंट के लिए एप्लिकेशन विकसित किया गया है वह स्टॉकहोम में एक कंपनी है, जो सहकारिता, सामूहिक कार्यालयों के प्रबंधन में लगी हुई है। दूसरे शब्दों में, हम कार्यालय रिक्त स्थान के बारे में बात कर रहे हैं जो विभिन्न कंपनियों द्वारा किराए पर लिया जा सकता है। फिलहाल, मेरे क्लाइंट के पास लगभग 10 ऐसे मौजूदा कार्यालय हैं जिनमें लगभग 400 कंपनियां 1,400 कर्मचारियों के साथ किराए पर जगह लेती हैं। ये कार्यालयों के किरायेदार हैं और आवेदन के लक्षित दर्शक हैं।


सहकर्मियों में से एक में मनोरंजन क्षेत्र

परियोजना प्रबंधक के साथ भविष्य के आवेदन पर चर्चा करने के बाद, मैं परियोजना के लिए कुछ आवश्यकताओं का पता लगाने में कामयाब रहा:

• लॉग इन करने, लॉग आउट करने और पासवर्ड रीसेट करने की क्षमता। कृपया ध्यान दें कि सभी उपयोगकर्ता खाते प्रशासकों द्वारा बनाए गए हैं और एप्लिकेशन सिस्टम में पंजीकरण का समर्थन नहीं करता है। इसलिए, यदि आप इस एप्लिकेशन को डाउनलोड करने का निर्णय लेते हैं, तो आप इसके साथ काम नहीं कर पाएंगे।
• उपयोगकर्ता प्रोफ़ाइल देखें: संपादित करें: नाम, ईमेल पता, पासवर्ड, अवतार।
• पुश सूचनाओं के लिए समर्थन।
• होम सेक्शन, जिसके साथ उपयोगकर्ता कंपनी की ख़बरों से पूरी तरह परिचित हो सकता है, और विशेष रूप से, कंपनी द्वारा किराए पर ली गई सहकर्मियों से संबंधित ख़बरों के साथ।
• सामुदायिक अनुभाग, जिसके साथ उपयोगकर्ता विभिन्न सहकर्मियों के बारे में जानकारी देख सकता है, अपने प्रबंधकों से संपर्क कर सकता है और देख सकता है कि कौन सी कंपनियां एक निश्चित सहकर्म में लगी हुई हैं।
• सम्मेलन अनुभाग, जिसके साथ आप बैठक कक्ष बुक कर सकते हैं और आरक्षण का प्रबंधन कर सकते हैं।
• अनुभाग चयन, जिसमें उपयोगकर्ता अनन्य छूट और ऑफ़र पा सकता है।
• सबसे पहले आपको एक iOS संस्करण बनाने की आवश्यकता है, फिर Android समर्थन जोड़ें।
• व्यवस्थापक के लिए वेब-आधारित अनुप्रयोग, जो आपको प्रतिक्रिया मूल-एप्लिकेशन में प्रदर्शित जानकारी का प्रबंधन करने की अनुमति देता है। हालांकि यहां मैं मुख्य रूप से फ्रंट-एंड डेवलपमेंट के बारे में बात करूंगा, मुझे लगता है कि यह उल्लेख करना उचित होगा कि प्रशासक के लिए आवेदन का सर्वर हिस्सा रूबी, रेल्स, पोस्टग्रेज और हरोकू पर आधारित है।

आप देख सकते हैं कि इस परियोजना में मामूली आवश्यकताएं हैं। शायद, इस भावना में कुछ को पहले आवेदन का एक अच्छा उदाहरण कहा जा सकता है कि कोई व्यक्ति प्रौद्योगिकियों के एक नए सेट का उपयोग करके विकसित करने जा रहा है। यदि आप इस बारे में एक नज़र रखने में रुचि रखते हैं कि मैंने क्या किया (और यह तय करने में कि क्या यह सब वास्तव में हुआ है, कहानी पढ़ने में समय बिताना है), तो यहां एप्लिकेशन के पहले संस्करण का अवलोकन है।


आवेदन का पहला संस्करण

अभी भी पढ़ रहे हैं? बढ़िया, तो चलिए आगे बढ़ते हैं।

सबसे अच्छे से सीखना

कल्पना कीजिए कि आपने अपने दोस्तों को उनके लिए घर बनाने का वादा किया था। लेकिन आप यह नहीं जानते कि यह कैसे करना है। आप वास्तव में यह भी नहीं जानते हैं कि कहां से शुरू करें। ऐसी स्थिति में पहले क्या किया जाना चाहिए? जवाब स्पष्ट है: कोई है जो घर बना सकता है और उससे सीख सकता है।

सख्ती से, यह वही है जो मैंने करने की कोशिश की। और मैं बहुत खुशकिस्मत था कि आपको वही मिला जिसकी आपको जरूरत थी। इसलिए, प्रतिक्रियाशील मूल निवासी प्रशिक्षण सामग्री की खोज के कुछ घंटों के बाद, मैंने YouTube पर 13-भाग वाला हार्वर्ड रिएक्ट नेटिव वीडियो पाठ्यक्रम पाया । 90-120 मिनट तक चलने वाला प्रत्येक व्याख्यान एक अलग विषय के लिए समर्पित था। नतीजतन, मुझे लगभग 23 घंटे की उच्च गुणवत्ता वाली प्रशिक्षण सामग्री का सामना करना पड़ा।

इस कोर्स को पाने के बाद, मैं तुरंत, एक जुनूनी की तरह, अध्ययन करने के लिए तैयार हो गया। नतीजतन, कक्षाओं के कई हफ्तों के बाद जो मैं शाम और सप्ताहांत पर खर्च कर सकता था, मैंने इस पाठ्यक्रम को समाप्त कर दिया और आवेदन के लिए एक अच्छी नींव बनाई।

अब मैं कह सकता हूं कि वह पाठ्यक्रम, बिना किसी संदेह के, सबसे अच्छा है जिसे मैं खोजने में कामयाब रहा। संक्षिप्त और अच्छी तरह से तैयार कक्षाएं, बेशक, स्कूल में एक बड़ी सकारात्मक भूमिका निभाती हैं, लेकिन मैं शिक्षक के कौशल को नोट नहीं कर सकता। मैं निम्नलिखित शब्दों के साथ इन कक्षाओं के संचालन की शैली का वर्णन करूंगा: गति, चरम व्यावहारिकता, ध्यान। पानी नहीं, जीवन से कोई अप्रासंगिक चुटकुले या कहानियाँ नहीं। आपके विनम्र सेवक ने यहाँ क्या लिखा है इसके विपरीत ...

एक तरह से या किसी अन्य, एक भावना थी कि प्रत्येक व्याख्यान में इतनी उपयोगी जानकारी पैक की गई थी कि इसे कई अन्य शिक्षकों को प्रस्तुत करने में दो बार अधिक समय लगेगा। दूसरे शब्दों में, यह पाठ्यक्रम प्रसिद्ध हार्वर्ड CS50 के समान है।

नतीजतन, यदि आप अपने पहले रिएक्टिव नेटिव एप्लिकेशन के लिए एक पैर जमाना चाहते हैं, तो मैं निश्चित रूप से आपके लिए इस पाठ्यक्रम की सिफारिश करता हूं। हालांकि यहां इसे एक विशेषता पर ध्यान दिया जाना चाहिए। वह कोर्स एक्सपो टूलकिट का उपयोग करता है। यह एक उत्कृष्ट उपकरण है जो अधिकांश सरल अनुप्रयोगों के लिए उपयुक्त है, जो मोबाइल प्लेटफार्मों के साथ काम करने के संबंध में सभी प्रकार की सूक्ष्मताओं को लेता है। लेकिन अगर आप, मेरी तरह, एक ऐसी परियोजना के लिए आधार बनाना चाहते हैं, जो जल्द-से-जल्द हो, बल्कि एक बड़े और जटिल अनुप्रयोग में बदल सकती है, और आप, एक ही समय में, कार्रवाई की पूर्ण स्वतंत्रता चाहते हैं, तो संभवत: आपके लिए इस परियोजना को शुरू करना बेहतर होगा। प्रतिक्रियाशील मूलनिवासी।

दूसरा "प्रशिक्षण संसाधन" जो मैं उपयोग कर सकता था वह मेरे सहयोगी थे। सौभाग्य से, जिस कंपनी में मैंने काम किया, उसके बाद रिएक्ट नेटिव प्रोजेक्ट भी विकसित करना शुरू किया। हालाँकि मैं खुद इस प्रोजेक्ट में शामिल नहीं था, फिर भी मैंने बहुत कुछ सीखा, सिर्फ उन लोगों से बात की जिन्होंने इस प्रोजेक्ट पर काम किया और उनके कोड का विश्लेषण किया।

अब जब हमने रिएक्टिव नेटिव एप्लिकेशन विकसित करने के लिए जाने वाली सभी चीजों पर चर्चा की है, तो तकनीकी मुद्दों पर आगे बढ़ने का समय आ गया है।

विकास का वातावरण

फॉर्म react-native init MyApp की एक टीम का उपयोग करने के बाद, मैंने एप्लिकेशन का आधार बनाया, पहले कार्यों में से एक जिसने मुझे सामना किया वह एक नए विकास के वातावरण का विकास था।

यदि आप सामान्य वेब विकास से रिएक्ट नेटिव-एनवायरनमेंट में आए हैं, तो यह ध्यान दिया जाना चाहिए कि यहां बहुत कुछ आपको परिचित होगा। मेरे लिए, इसका मतलब था कि मैंने एटम को कोड संपादक के रूप में, टर्मिनल के रूप में iTerm, और git के साथ काम करने के लिए इंटरफ़ेस के रूप में GitUp का उपयोग करना जारी रखा। (यदि विम के प्रशंसक अभी इसे पढ़ रहे हैं, तो मेरा सुझाव है कि हर कोई असंबद्ध रहे।) लेकिन, उपरोक्त उपकरणों के अलावा, मुझे रिएक्टिव नेटिव एप्लिकेशन विकसित करने के लिए कुछ और चाहिए था।

उदाहरण के लिए, मुझे आईओएस एमुलेटर की आदत डालने की जरूरत थी। हालांकि, कमांड-लाइन टूल्स द्वारा, react-native run-ios कमांड के द्वारा, इस आदेश के लिए एक सरल कॉल की शुरुआत में भ्रामक रूप से सरल लगता है, एमुलेटर ठीक से काम करने के लिए पर्याप्त नहीं था। चूंकि नए एनपीएम पैकेज लगभग दैनिक (और बाद में, काफी देशी कोकोआपोड मॉड्यूल) परियोजना में जोड़े गए थे, इसलिए, मैं जितना चाहूंगा, उससे बहुत करीब था, वॉचमैन संसाधनों और एचओडी कैश को हटाने के अप्रिय अनुष्ठान से परिचित होने के लिए मजबूर किया गया था, नोड_मॉडल फ़ोल्डर को हटाते हुए। मॉड्यूल को फिर से स्थापित करना और मेट्रो बंडलर कैश को रीसेट करना। सौभाग्य से, निम्नलिखित कमांड का उपयोग करके इन सभी कार्यों को हल किया जा सकता है:

 watchman watch-del-all && rm -rf tmp/haste-map-react-native-packager && rm -rf node_modules && yarn && npm start --reset-cache 

10 में से 9 मामलों में, इस तरह के "डांस विद द टैम्बॉरिन" ने एमुलेटर को जीवन में वापस आने की अनुमति दी। कभी-कभी, हालांकि, यह भी पर्याप्त नहीं था। फिर मुझे GitHub पर त्रुटि संदेशों के वर्णन में भाग लेना पड़ा और StackOverflow पर चर्चा को पढ़ना पड़ा।

कुछ अन्य समस्याओं की जड़ यह तथ्य था कि लंबे समय से मैंने सोचा था कि कुछ समस्याओं को हल करने के लिए, Xcode चलाना आवश्यक था। और मेरा विश्वास करो, आप इस हॉरर हाउस आईडीई में यथासंभव कम समय रहने का प्रयास करेंगे।

इसी तरह की कहानी iPhone के एक निश्चित संस्करण के साथ एमुलेटर के लॉन्च के साथ थी। अगर किसी ने मुझे पहले बताया होगा कि नीचे दी गई कमांड इस समस्या को सीधे कमांड लाइन से हल करती है, तो हो सकता है कि मैं अपने पहले महीनों के रिएक्ट के विकास में थोड़ा आसान रहूं।

 react-native run-ios --simulator='iPhone X' 

नए विकास परिवेश में उपयोग होने की कठिनाइयों के अन्य उदाहरणों में एप्लिकेशन के रिलीज़ संस्करण को तैयार करने की तीन-चरणीय प्रक्रिया (ऐप स्टोर पर प्लेसमेंट के लिए या कुछ निरंतर एकीकरण वातावरण में, जैसे कि विज़ुअल स्टूडियो ऐप सेंटर या फायरबेस) और रिलीज़ संस्करण के संस्करण के लिए संक्रमण की प्रक्रिया शामिल है। डिबगिंग के लिए (विकास मोड के लिए)। शायद बहुतों को यह स्पष्ट लगेगा कि परियोजना में आवश्यक परिवर्तन किसी भी पाठ संपादक का उपयोग करके किया जा सकता है। किसी भी मामले में, यह केवल उन छोटी-छोटी चीजों का एक उदाहरण है जो विकास मोड में काम करते समय मेरे वर्कफ़्लो पर अप्रत्याशित रूप से बड़ा प्रभाव डालते हैं।

और अंत में, वेब अनुप्रयोगों को विकसित करते समय उन कार्यों को हल करने के लिए आवश्यक विभिन्न मैकओएस अनुप्रयोगों के बीच लगातार स्विच करने की आवश्यकता के लिए उपयोग करने के लिए कुछ समय लग गया, आमतौर पर केवल क्रोम का उपयोग करके हल किया जाता है।

जावास्क्रिप्ट कोड कंसोल और विश्लेषण के लिए क्या लिख ​​रहा है, यह देखने के लिए, डीबगिंग उद्देश्यों के लिए, HTML / CSS आउटपुट, मैंने रिएक्ट नेटिव डीबगर में बदल दिया। आवेदन की स्थिति की निगरानी के लिए, प्रस्तुत किए गए कार्य, एपीआई अनुरोध और प्राप्त प्रतिक्रियाएं, मैंने रिएक्टोट्रॉन का उपयोग किया। हालाँकि मुझे ये दोनों अनुप्रयोग बेहद उपयोगी लगे, लेकिन मैं मदद नहीं कर सका, लेकिन Ember.js एप्लिकेशन बनाने के लिए उपयोग किए जाने वाले मेरे सामान्य वर्कफ़्लो के बारे में सोचता हूं, जब मैं इन सभी कार्यों को उसी वातावरण में हल कर सकता था जिसमें मेरे एप्लिकेशन चलाए गए थे (प्लगइन का उपयोग करके) क्रोम के लिए एम्बर इंस्पेक्टर)।

नेविगेशन

React Native के लिए नेविगेशन / राउटिंग का आयोजन एक बहुत मुश्किल काम है। इस ढांचे के अस्तित्व के दौरान, इस समस्या के कई अलग-अलग समाधान सामने आए हैं, लेकिन अभी भी कुछ ऐसा है जिसे सार्वभौमिक मान्यता प्राप्त मानक कहा जा सकता है। मैंने प्रतिक्रिया-नेविगेशन लाइब्रेरी का उपयोग करने का फैसला किया, मेरी पसंद मुख्य रूप से इस तथ्य से प्रभावित थी कि उन्होंने इस पुस्तकालय के बारे में रिएक्ट नेटिव कोर्स में बात की थी जिससे मैं गुजरा था, साथ ही इस तथ्य पर भी कि मेरे सहयोगियों ने इसका उपयोग किया था।

यदि मैंने इस मुद्दे के पर्याप्त गहन अध्ययन में कुछ समय लगाया, तो मुझे निम्नलिखित का पता चल सकता है:

• प्रतिक्रिया-नेविगेशन परियोजना में गिटहब पर लगभग 15,000 सितारे और 86 अनसुलझे मुद्दे हैं। यह पूरी तरह से जावास्क्रिप्ट पर आधारित है और मैंने जो नेविगेशन समाधान देखे हैं उनमें सबसे विस्तृत दस्तावेज है।
• प्रतिक्रिया-देशी-नेविगेशन लाइब्रेरी ने लगभग 10,000 सितारे बनाए, यह 162 अनसुलझी समस्याएं थीं। हालांकि, यह न केवल जावास्क्रिप्ट का उपयोग करता है। इसके साथ काम करने के लिए आपको देशी फाइलों को संपादित करना होगा।
• प्रतिक्रिया-राउटर रिपॉजिटरी के पास लगभग 35,000 सितारे और गिटहब पर 55 बकाया मुद्दों की सूची है। सच है, इन संकेतकों को यहां वर्णित अन्य परियोजनाओं के साथ सीधे तुलना नहीं की जा सकती है, क्योंकि इस भंडार में न केवल रिएक्ट मूल के लिए डिज़ाइन किए गए पैकेज शामिल हैं, बल्कि रिएक्ट के लिए भी।
• देशी-नेविगेशन परियोजना में लगभग 3,000 सितारे और 55 अनसुलझे मुद्दे हैं। जो लोग अध्ययन करने और इसका उपयोग करने जा रहे हैं, उन्हें यह विचार करना चाहिए कि यह अभी भी बीटा में है, कि यह न केवल जावास्क्रिप्ट का उपयोग करता है, और यह एयरबीएनबी द्वारा समर्थित है (इस कंपनी ने प्रतिक्रिया मूल को छोड़ने का फैसला किया है )।

लेकिन, यहां तक ​​कि उपरोक्त पर विचार करते हुए, मैंने शायद वैसे भी प्रतिक्रिया-नेविगेशन को चुना होगा, क्योंकि मेरे पास इन सभी पुस्तकालयों की कोशिश करने का समय नहीं था, उदाहरण के लिए, इस रिपोर्ट के लेखक ने किया। और अंत में, जैसा कि इस रिपोर्ट में कहा गया था, नेविगेशन के आयोजन के लिए एक उपकरण का विकल्प एक सवाल है जिसका समाधान इस बात पर निर्भर नहीं करता है कि इनमें से कौन सा उपकरण सबसे अच्छा कहा जा सकता है, लेकिन उनमें से कौन सा किसी विशेष परियोजना की जरूरतों के लिए सबसे उपयुक्त है।

लगभग 9 महीनों के लिए प्रतिक्रिया-नेविगेशन के साथ काम करने के बाद, मुझे कहना होगा कि मुझे वास्तव में शिकायत करने के लिए कुछ भी नहीं है। यदि आप इस लाइब्रेरी की तुलना Ember.js में इस्तेमाल होने वाले परिचित राऊटर की लाइब्रेरी से करते हैं , तो मैं कह सकता हूँ कि यह पूरी तरह से नया है।

तीन मुख्य प्रकार के रिएक्शन-नेविगेशन नेविगेशन टूल से निपटना मेरे लिए वास्तव में आसान था। ये StackNavigator , TabNavigator और DrawerNavigator । यह समझना बहुत कठिन था कि मुझे इन एप्लिकेशन टूल को बनाने के लिए इन उपकरणों को कैसे संयोजित करना है।

उदाहरण के लिए, यह तथ्य कि DrawerNavigator घटक नेविगेशन सिस्टम का मूल तत्व होना चाहिए (मुख्य TabNavigation घटक से ऊपर एक कदम) मेरे लिए पूरी तरह से अवज्ञाकारी था। यदि यह कल्पना करना कठिन है, तो यह है कि DrawerNavigator कार्रवाई में दिखता है (एक वास्तविक अनुप्रयोग में, सब कुछ बहुत आसानी से काम करता है)।


कार्रवाई में प्रतिक्रिया-नेविगेशन से दराजनावीगेटर

जैसा कि आप देख सकते हैं, मुझे किसी भी एप्लिकेशन स्क्रीन पर होने के साथ स्वाइप के साथ साइड नेविगेशन बार खोलने की आवश्यकता थी।

मैंने एप्लिकेशन के निचले भाग में स्थित मुख्य नेविगेशन बार की तुलना में साइडबार को कुछ गौण माना है। इसलिए, यह मुझे लग रहा था कि ड्रावरनाविगेटर को रूट ट्री (इसे नीचे दिखाया गया है) को या तो मुख्य बॉटमबनावीगेटर के नीचे, या इस तत्व के समान स्तर पर रखा जाना चाहिए।

हालाँकि, मैंने बहुत कुछ झेलने के बाद, साइडबार को उस जगह पर मजबूर करने की कोशिश की, जहाँ यह अनुचित था, मुझे एहसास हुआ कि, प्रतिक्रिया-नेविगेशन की विशेषताओं के अनुसार, DrawerNavigator को DrawerNavigator एक कदम ऊपर रखा जाना चाहिए, DrawerNavigator । नेविगेशन ट्री की जड़। मुझे उम्मीद है कि मेरी यह खोज इस सामग्री को पढ़ने में समय बचाने वाले पाठकों में से एक की मदद करती है जो अन्यथा GitHub पर प्रलेखन और सामग्री पढ़ने में खर्च की जाएगी।

यहाँ ऐप नेविगेशन ट्री कैसा दिखता है। यहाँ, मूल तत्व के रूप में, MainDraverNavigation उपयोग किया जाता है।


आवेदन के पहले संस्करण का अंतिम नेविगेशन ट्री

यहाँ आपको आश्चर्य हो सकता है कि, समुदाय और सम्मेलन वर्गों के लिए, आपको StackNavigator और TabNavigator दोनों की आवश्यकता StackNavigator । क्या आप केवल StackNavigator परत को नहीं छोड़ सकते और TabNavigator सीधे जा सकते हैं?

बात यह है कि, मुझे एक शीर्षक के लिए दो TabNavigator तत्वों में से प्रत्येक की आवश्यकता है। यहाँ वे हैं।


TabNavigator, शीर्षक

यहाँ, फिर से, मेरे अनुमान प्रतिक्रिया-नेविगेशन डिवाइस से मेल नहीं खाते। मैंने सोचा था कि MaterialTopTabNavigator पूरी तरह से सामान्य नेविगेशन घटक होना चाहिए, इसलिए मैंने फैसला किया कि इसकी सेटिंग्स में कुछ अंतर्निहित विकल्प होना चाहिए जो आपको एक शीर्षक सेट करने की अनुमति देता है। जैसा कि यह निकला, इस प्रकार का कुछ भी नहीं था, और इसीलिए मुझे StackNavigator को एक मध्यवर्ती परत के रूप में उपयोग करना पड़ा, इसके परिणामस्वरूप, आवेदन के बुनियादी ढांचे में जटिलता का एक अतिरिक्त स्तर और सुंदर "कॉस्मेटिक" विचारों द्वारा निर्देशित किया गया।

इसके अलावा, प्रतिक्रिया-नेविगेशन की कमी के कारण, मुझे बहुत अधिक गंभीर परेशानी हुई। विशेष रूप से, उन्होंने उपयोगकर्ता के स्क्रॉलिंग के दौरान हेडर छवि के तह और गायब होने को व्यवस्थित करने की आवश्यकता को शामिल किया, जो कि फ्लैटलिस्ट द्वारा आयोजित तत्वों की सूची के माध्यम से है। चूंकि होम और चयन अनुभागों के शीर्षक समान StackNavigator में उनके तत्वों की सूची के रूप में प्रदर्शित किए गए थे, इसलिए इस समस्या को बाकी की सूची के साथ शीर्षक को केवल स्क्रॉल करने से हल करना मुश्किल नहीं होगा।

लेकिन समुदाय और सम्मेलन वर्गों के मामले में, मुझे उसी समाधान को लागू करने का एक तरीका नहीं मिला, क्योंकि हेडर्स को StackNavigator तत्वों का उपयोग करके प्रदर्शित किया StackNavigator है, और सूचियों को StackNavigator तत्वों का उपयोग करके प्रदर्शित किया जाता है, जो नेविगेशन ट्री में एक कदम अधिक है। नतीजतन, मैंने शीर्षक को स्क्रॉल करने से इनकार कर दिया, जिसने आवेदन में एक अप्रिय विषमता का परिचय दिया।


TabNavigator और StackNavigator में स्क्रॉल करना

हालाँकि Iphone X का अनुकरण करने वाले एमुलेटर में शीर्षक के साथ वर्णित समस्या गंभीर नहीं लगती है, छोटे पर्दे पर शीर्षक उपलब्ध स्क्रीन स्पेस के लगभग 20% हिस्से पर कब्जा कर सकता है। अगर किसी को पता है कि इस समस्या को कैसे हल किया जाए, तो मुझे बताएं।

गंतव्य अनुभाग में TabNavigator साथ भी यही समस्या महसूस की गई थी। जैसा कि निम्नलिखित आकृति में दिखाया जाएगा, दाईं ओर, मैं शीर्ष तीन टैब जानकारी, सदस्यों और संपर्क को प्रदर्शित करने के लिए एक और TabNavigator तत्व को सहकर्मी रिक्त स्थान टैब पर रखना चाहता था।

जब TabNavigator साथ काम करते हैं TabNavigator तो निर्णय को जटिल किए बिना तत्व के शीर्ष पर एक स्लाइड शो रखना मुश्किल था और बहुत सारे नेविगेशन समस्याओं (मुख्य रूप से नेविगेशन विकल्पों से संबंधित) का कारण नहीं था। इसलिए मुझे इन तीन टैब के साथ काम करने के लिए प्रतिक्रिया-देशी-स्विपर नामक JS पैकेज का सहारा लेना पड़ा। यह ध्यान दिया जाना चाहिए कि यह समाधान मुझे पूरी तरह से सूट करेगा यदि इसके आवेदन में टैब हेडर पर जोर देने वाली लाइनों के अचानक एनीमेशन का नेतृत्व नहीं होगा। किसी भी मामले में, मैंने इस नुकसान को वैकल्पिक नेविगेशन प्रणाली के साथ समस्याओं से बचने के अवसर के लिए उचित भुगतान माना।


प्रतिक्रिया-मूल-स्विपर के साथ प्रतिक्रिया-नेविगेशन से टैबनेविगेटर की तुलना करें (टैब के नीचे स्वर्ण रेखाओं के एनीमेशन में अंतर पर ध्यान दें)

एप्लिकेशन नेविगेशन सबसिस्टम लागू करने के बाद मैंने जो निष्कर्ष दिए हैं, वे यहां दिए गए हैं:

• रिएक्टिव नेटिव अनुप्रयोगों में नेविगेशन के आयोजन के लिए कई अच्छी तरह से प्रलेखित समाधान हैं, जिनमें से मैंने रिएक्शन-नेविगेशन को चुना। यह मेरी आवश्यकताओं के लिए सबसे उपयुक्त है।
• रिएक्टर-नेविगेशन लाइब्रेरी एक प्रोजेक्ट पर काम की शुरुआत को बहुत सरल करता है अगर डेवलपर को मोबाइल प्लेटफॉर्म के नेविगेशन सिस्टम के बारे में ज्यादा जानकारी नहीं है।
• रिएक्शन-नेविगेशन लाइब्रेरी में कुछ विशेषताएं हैं जो सहज नहीं हैं (कम से कम एक वेब डेवलपर के लिए), लेकिन ऐसा कुछ भी नहीं है जिसे खतना नहीं किया जा सकता है, यद्यपि यह सबसे कुशल तरीके से नहीं है।

स्पलैश स्क्रीन

react-native init कमांड के माध्यम से बनाए गए एमुलेटर में एक नया एप्लिकेशन लॉन्च करके, इसे लगातार बदलते हुए जैसे ही आप इसमें बदलाव करते हैं, आपको बहुत जल्दी पता चलता है कि एप्लिकेशन को एक अच्छी स्प्लैश स्क्रीन की जरूरत है (उन्हें "स्प्लैश स्क्रीन" भी कहा जाता है)।

एक छप स्क्रीन बनाने के लिए यहाँ अच्छी तरह से लिखा गया है , इसलिए मैं इस सामग्री के लेखक के शब्दों को नहीं दोहराऊंगा। मैं केवल उस समस्या के बारे में बात करूंगा जो मुझे सामना करना पड़ा, और जिसके बारे में इस गाइड में कुछ भी नहीं है। यहाँ यह समस्या दिखती है:


एक समस्या के साथ छप स्क्रीन

यह समस्या iOS पर दुर्लभ मामलों में दिखाई देती है, लेकिन एप्लिकेशन के कुछ उपयोगकर्ता संभवतः इसका सामना करेंगे। मुझे पहली बार इस समस्या का पता चला जब मैंने एक जगह काम किया, जहां मैं वाईफाई का उपयोग नहीं कर सका और अपने लैपटॉप को एक फोन के माध्यम से 4 जी इंटरनेट से जोड़ा। IPhone उपयोगकर्ताओं को पता है कि जब फोन इंटरनेट वितरित करता है, तो इसकी स्थिति पट्टी नीली हो जाती है और उच्च हो जाती है। जब मैंने फोन पर एप्लिकेशन लॉन्च किया तो यह मेरी स्प्लैश स्क्रीन पर "टूट गया" था। फोन करते समय भी यही समस्या सामने आई।

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

यह बहुत सरल है - बस UIStatusBarHidden कुंजी को UIStatusBarHidden , यह तार्किक मान को true , और फिर, SplashScreen.hide() को कॉल करने के बाद, SplashScreen.hide() घटक की hidden संपत्ति को StatusBar ।

राज्य प्रबंधन

मुझे लगता है कि पिछले दो वर्षों से मैं कॉन्फ़िगरेशन पर समझौते की प्राथमिकता के बारे में हर दिन सुन रहा हूं, कॉन्फ़िगरेशन (सीओसी) पर कन्वेंशन का सिद्धांत। तो यह मेरी पिछली नौकरी पर था। और यह आश्चर्य की बात नहीं है, क्योंकि सर्वर पर, हमने रूबी ऑन रेल्स, और क्लाइंट पर - एम्बर.जेएस - दो फ्रेमवर्क का उपयोग किया है, जिसमें से सार सीओसी सिद्धांत से यथासंभव मेल खाता है। मुझे लगा कि मुझे पता है कि इसका क्या मतलब है, लेकिन रिएक्ट नेटिव में राज्य प्रबंधन की खोज की प्रक्रिया ने मुझे इस सिद्धांत की पूरी नई समझ दी।

यद्यपि, मैंने कई बहुत ही सरल अनुप्रयोगों में, इस सिद्धांत से प्रभावित रिएक्ट लाइब्रेरी के साथ प्रयोग किया, मैंने कभी भी इसके आधार पर कुछ बड़ा नहीं बनाया, जो मुझे Redux या MobX जैसे राज्य कंटेनरों के उपयोग के लाभों की सराहना करने की अनुमति देगा। जेएस अनुप्रयोगों की स्थिति को प्रबंधित करने का मेरा अधिकांश अनुभव एम्बर डेटा के साथ है (यह राज्य के प्रबंधन और लगातार डेटा संग्रहण के आयोजन के लिए एम्बर बिल्ट-इन सिस्टम है)।

चूंकि Redux लाइब्रेरी मुझे राज्य प्रबंधन की समस्या के सबसे अच्छे समाधानों में से एक लगती थी, जिसके बारे में मैंने कई वर्षों से सुना था (और जिस पर मैंने प्रतिक्रिया व्यक्त की थी कि इस पाठ्यक्रम की चर्चा की गई थी), सामान्य तौर पर, मैंने इसके प्रतियोगियों की ओर नहीं देखा। । मैं बस अपने एप्लिकेशन को मौजूदा राज्य प्रबंधन प्रणालियों के सर्वश्रेष्ठ से लैस करना चाहता था और यह बहुत अधिक प्रयास के बिना करता था।

एम्बर में, 90% डेटा इन्फ्रास्ट्रक्चर प्रोग्रामर के हाथों में है जो उपयोग करने के लिए तैयार है। मुझे संदेह नहीं था कि मेरी वर्तमान परियोजना में सब कुछ बिल्कुल विपरीत होगा। जैसा कि यह निकला, न केवल रिएक्ट, बल्कि सबसे लोकप्रिय राज्य प्रबंधन पुस्तकालय, Redux, वैश्विक स्थिति को बनाए रखने के लिए कुछ भी उपयोगी नहीं है। यह पुस्तकालय इतना हल्का है कि प्रोग्रामर को एक सभ्य राज्य प्रबंधन प्रणाली बनाने के लिए एप्लिकेशन के अंदर डेटा के साथ काम करने के बारे में 90% चिंताएं उठानी पड़ती हैं।

मेरे बाद, अब तक की तुलना में बहुत कम अनुभवी डेवलपर को पता चला, मेरे लिए सबसे मुश्किल काम नई कार्यक्षमता और प्रतिरक्षा के सिद्धांतों के लिए इस्तेमाल किया जाना था। जब मैंने सर्वर से डेटा डाउनलोड करने या इसे सर्वर पर भेजने के लिए आश्चर्यजनक रूप से बड़ी मात्रा में काम करने की आवश्यकता होती है, तो यह सब 7 सरल चरणों के रूप में एक साथ आया:

1. फ़ाइल में स्थिरांक के साथ तीन स्थिरांक जोड़ें: SOME_ACTION_REQUEST , SOME_ACTION_FAILED , SOME_ACTION_SUCCEEDED ।
2. एक्शन क्रिएटर को एक्शन फाइल में जोड़ें।
3. एक उपयुक्त reducer में तीन क्रियाओं को संसाधित करें, और यदि आवश्यक हो, तो सिस्टम में एक नया reducer जोड़ें और इसे रूट reducer में शामिल करें।
4. श्रमिकों को एक उपयुक्त गाथा में जोड़ें, और यदि आवश्यक हो, तो सिस्टम में एक नई गाथा जोड़ें और इसे रूट गाथा में शामिल करें (मैं अतुल्यकालिक क्रियाओं को संसाधित करने के लिए Redux-saga पुस्तकालय का उपयोग करता हूं)।
5. किसी भी संभावित एपीआई अनुरोध को संभालने के लिए एक फ़ंक्शन जोड़ें।
6. स्थिति से संबंधित प्रतिक्रिया घटक में गुणों से आवश्यक डेटा को मैप करें।
7. संबंधित React घटक से SOME_ACTION_REQUEST कार्रवाई सबमिट करें।

Redux और Redux-saga, बेशक, अधिक व्यापक विशेषताएं हैं, लेकिन मैं वर्तमान में किस चीज में दिलचस्पी रखता हूं, इस पर विचार करते हुए, उपरोक्त 7 चरण मेरे लिए Redux हैं।

अधिवेशन

इसलिए, हमने प्रतिक्रियात्मक मूल-अनुप्रयोगों के लिए विकास का वातावरण तैयार किया, एक नेविगेशन ट्री बनाया, राज्य प्रबंधन बुनियादी ढांचे को तैयार किया। प्रोजेक्ट के अगले चरण में क्या करना अच्छा रहेगा? मेरे लिए, उपयोगकर्ता प्रमाणीकरण प्रणाली का निर्माण इस प्रश्न का पूरी तरह से स्वाभाविक उत्तर था। इसलिए अब हम सत्रों के बारे में बात करेंगे।

यदि आप वेब डेवलपमेंट से रिएक्ट नेटिव क्षेत्र में आए हैं, तो आप बहुत कठिनाई के बिना सत्रों से निपटेंगे। यदि आप उन अवधारणाओं से थोड़ा परिचित हैं, जिन पर लोकलस्टोरेज स्टोरेज आधारित है , तो आपको केवल यह जानना होगा कि रिएक्ट नेटिव के साथ काम करते समय, इस तरह के स्टोरेज तक पहुंच को AsyncStorage के लिए कॉल द्वारा प्रतिस्थापित किया जाना चाहिए। यह अमूर्तता का स्तर है जो आपको सत्रों के बीच डेटा को कुंजी-मूल्य प्रारूप में संग्रहीत करने की अनुमति देता है। दूसरे शब्दों में, यहां आप सर्वर पर उत्पन्न प्रमाणीकरण टोकन को स्टोर कर सकते हैं, उपयोगकर्ता द्वारा सिस्टम में सफलतापूर्वक लॉग इन करने के बाद क्लाइंट को प्रेषित किया जाता है।

सूचियों

अगर हम सूचियों के साथ काम करने के बारे में बात करते हैं, तो मुझे यह महसूस हुआ कि रिएक्ट नेटिव में यह समस्या काफी अच्छी तरह से हल हो गई है। सामान्य तौर पर, यह ध्यान दिया जा सकता है कि डेवलपर के पास तीन संभावनाएं हैं। यदि यह स्टैटिक सूचियों के साथ काम करता है, तो प्रस्तुत किया गया डेटा नहीं बदलता है, तो स्क्रॉलव्यू के पास इसकी पर्याप्त संभावना होगी।यदि आपको लंबी सूचियों के साथ काम करने की आवश्यकता है, जो, इसके अलावा, गतिशील हैं, तो यह फ्लैटलिस्ट देखने लायक है । यदि हम और भी बड़ी सूचियों के बारे में बात कर रहे हैं, जो, इसके अलावा, वर्गों में विभाजित की जा सकती हैं, तो यह सेक्शनलिस्ट की क्षमताओं का सहारा लेना उपयोगी होगा ।

मैं, गतिशील सूचियों के लिए, विशेष रूप से उपयोग करता हूं FlatList। और यद्यपि मैं, एक सहज स्तर पर, इन सूचियों और उन्हें कॉन्फ़िगर करने की क्षमता की तरह, मैं, जब उनके साथ काम कर रहा था, तो कई परेशानियों में भाग गया। अब मैं उनके बारे में बात करूंगा।

अपनी सामग्री को अद्यतन करने के लिए rawDraw सूची

FlatList , refreshControl . , , , , . , React Native , . — RefreshControl . , .


RefreshControl

, , , refreshControl , RefreshControl , , . , , :

• , , . , handleRefresh() .
• , , « » ( ).

— .

, , , , . , , , GitHub.

, refreshControl onEndReached ( ) fetching . , - , false true , — , , 250 , RefreshControl , .

, setTimeout() fetching 350 . . , , setTimeout — , , handleRefresh() handleLoadMore() — refreshing loadingMore . , , , , - .

, onRefresh refreshing refreshControl . , refreshControl , , , , .

▍

, . — , , Load More , , , , .


FlatList. , , 2, onEndReached , 2-

, onEndReached . .

onEndReachedThreshold , FlatList , , onEndReached . .

100 , , 10 , 1, onEndReachedThreshold , , onEndReached , , 90-. 2, , 2- , — 80- , .

, , , , FlatList . , , , , handleLoadMore() , onEndReached , , — 10 .

, , loadingMore , , handleLoadMore() , , , !loadingMore . , , .

▍

ListLoadingComponent FlatList , , ListHeaderComponent , ListEmptyComponent ListFooterComponent , , - , , , .

, render() .

▍

, , , . , , .

, scrollToOffset FlatList , , . , . ref FlatList :

 <FlatList ref={(ref) => { this.newsListRef = ref; }} ... /> 

, . ScrollToOffset handleScrollToTop() , , , react-navigation, , :

 componentDidMount() { this.props.navigation.setParams({   scrollToTop: this.handleScrollToTop, }); } handleScrollToTop = () => { this.newsListRef.ScrollToOffset({   x: 0, y: 0, animated: true, }); }; 

, react-navigation 3 ref , BottomTabNavigator .

, , . , , 4G- ( , , 3G), , , , , .

, , , , , , , . . , , , , .

, , . 7 , image , , ( , ).

▍

, , . react-native-image-picker , Cloudinary Carrierwawe Rails-.

, Node-API Cloudinary react-native-fetch-blob . , , , , , .

, , react-native-fetch-blob, . , react-native-fetch-blob , API JS FormData . , react-native-fetch-blob rn-fetch-blob , .

▍

, React Native Image style , source resizeMode . , , - , , , .

, , , . , , , . . Avatar react-native-elements.

, Image . , - , .

, , . .


react-native-slideshow

react-native-slideshow , , . , , , , , , .

▍

7 , , . , — , , . , - . .

, , -, , , , - ( — ), , , , Facebook . , .

, , React Native-. , . — react-native-loading-placeholder , , , . — react-native-linear-gradient , . , , , , , , , , .


react-native-loading-placeholder react-native-linear-gradient

▍

— . , React Native Image . , - CachedImage react-native-cached-image .

npm- Image , , , CachedImage . Reactotron , , .

, , , . , , Cloudinary, 95% , , 4%. .

, . CachedImage activityIndicatorProps={{ animating: false }} , .

▍

React Native - Picker . - , ( - ), JS-, . , react-native-picker-select , <select> iOS Android .

JS-, React Native- ( lodash , ), , , , . , , - . , .

▍

react-native-calendars Wix. :

• iOS , . , , , -, — .
• React Native — DatePickerIOS DatePickerAndroid , , .
• , , , Apple Google.

, . , , — .


react-native-calendars react-native-picker-select

▍

— , .
SaaS-, . SOAP, API Conference. , , , , .

, , , 5 . - , JavaScript Date UTC, , . , , , , , - . « », — .

, , moment-js , React Native, timezone , :

 const timeSthlmAfterFive = moment().isAfter(moment.tz('17:00:00', 'HH:mm:ss', 'Europe/Stockholm'), 'second'); 

, , , . React Native -, , , , , , font-face CSS.

. , . , 10 -. react-native-vector-icons .

, ,

CI/CD, DevOps- -, .

( ) , - . , . GitHub- . , :

• . , , .
• , - , , .

. , , , , , , push-. , , , , .

Visual Studio App Center (VSAC). Chain React 2017 . , , , DevOps-, . , , , , push-, Codepush . -. , , , , iOS, Android. , - , , , , , - .


Visual Studio App Center ( )

« », — , . , (API — ). , , , , -, (, , ).

? Microsoft, , VSAC « ». , , Codepush ( React Native-) HockeyApp ( ), - . , «developers, developers, developers, developers» .

, VSAC , - Fastlane , BuddyBuild Firebase ? , , , VSAC , , , . , , ? , VSAC, , .

VSAC. , , , .

, , , VSAC Apple Developers (Apple, , , ). , , , .

, VSAC, , , CI/CD- .

Android

, iOS- , Android . Android Studio Android React Native Platform . , Platform.select() . - , , , Platform.OS .

, , Google Play , App Store. क्यों? , App Store Apple.

Apple

, -, React Native, . , Apple. , , , , , .


Apple

, — « ». -, , iOS-, , , , .

— Apple. , , , . Dun & Bradstreet, Apple, . , , , Apple (, , Apple , — ).

, Apple , , — , -. . , — ?

, .

, , Apple Developer . .

. . provisioning-, iOS-, , Apple .p12 push-, dSym-. , , , .

Apple, 50% 24 , 90% — 48 . , , — , , Apple-.

, . «Metadata Rejected». , - . , 5 ( App Store Review Guidelines ), .

, , , — . , , , , , . , — , () .

iOS, . , , , . , , . . , , .

परिणाम

, React Native- . React Native-. -. , : . .

, , , , . , , — , .

, - , . . , , , 8 . . .

, . , , - .

, , , 6-7 , . , , , :

• , (iOS Android), , , .
• JavaScript. , , Ember.js.
• React.js, , React-, . , JS-/.
• , Redux.
• DevOps .
• , .
• UI/UX.
• , , , , , , , , .

JS- , Flutter , NativeScript , Objective-C, Swift, Java Kotlin, React Native .

, -, , React Native , , , . , React Native — , . React Native .

प्रिय पाठकों! ?