8,538 रीडिंग

रिएक्टिव नेटिव (लाइब्रेरी के बिना) में आइकन और स्प्लैश स्क्रीन कैसे जोड़ें

द्वारा Lucas Leonardo7m2023/03/15

बहुत लंबा; पढ़ने के लिए

यह ट्यूटोरियल क्रिएट-रिएक्शन-ऐप का उपयोग करके बनाए गए एप्लिकेशन के साथ बनाया गया था। Apple के परिवेश के साथ काम करने के लिए, हमें macOS की आवश्यकता होती है। इसके लिए हमें विभिन्न आकारों के चिह्नों के साथ-साथ चिह्नों के एक गोल संस्करण (बिना पृष्ठभूमि के) की आवश्यकता होगी। इसके अलावा, कृपया ध्यान दें कि यदि आपके पास ये आकार नहीं हैं, तो हमारे पास इसे कॉन्फ़िगर करने के तरीके के बारे में चरण-दर-चरण मार्गदर्शिका है।

featured image - रिएक्टिव नेटिव (लाइब्रेरी के बिना) में आइकन और स्प्लैश स्क्रीन कैसे जोड़ें

आज, मुझे अपनी इंटर्नशिप में निम्नलिखित चुनौती का सामना करना पड़ा: मैं जिस प्रोजेक्ट पर काम कर रहा हूं, उसके लिए एक स्प्लैश स्क्रीन और एक आइकन को संशोधित/कार्यान्वित करना।

हालाँकि, मैंने इसे मूल रूप से करना पसंद किया ताकि तीसरे पक्ष के पुस्तकालयों पर निर्भर न रहूँ। मैंने स्पाइक (अध्ययन) करने के लिए कुछ समय अलग रखा कि यह कैसे काम करता है, मुझे कहाँ बदलाव करने होंगे, और यह किस पर लागू होगा। स्पाइक करने के बाद मैं समझ गया कि मुझे इसे iOS और Android के लिए अलग से करना होगा।

पहले iOS की बात करते हैं!

नोट: यह ट्यूटोरियल क्रिएट-रिएक्शन-ऐप का उपयोग करके बनाए गए एप्लिकेशन के साथ बनाया गया था।

आईओएस

सबसे पहले, हमें यह याद रखना होगा कि Apple के वातावरण के साथ काम करने के लिए हमें macOS की आवश्यकता है। अब जब प्रोजेक्ट पहले ही बन चुका है, तो 'ios' फोल्डर में जाएं और इसे Xcode में खोलें।

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

सबसे पहले, हम Xcode में 'लॉन्चस्क्रीन' फाइल खोलेंगे। इस फाइल में, हम निम्नलिखित क्रम में नेविगेट करेंगे: 'View Controller Scene' → 'View Controller' → 'View'

इस क्षेत्र में, हमारे पास सुरक्षित क्षेत्र है, जो स्क्रीन पर उपयोगी स्थान से ज्यादा कुछ नहीं है।

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

(ध्यान दें: यदि आप इसे पहले ही अपने फोन या एमुलेटर पर चला चुके हैं, तो ऐप को हटाना याद रखें ताकि आइकन परिवर्तन लागू हो जाएं)!

एंड्रॉयड

अब एंड्रॉइड कॉन्फ़िगरेशन पर चलते हैं। इसके लिए हमें विभिन्न आकारों के चिह्नों के साथ-साथ चिह्नों के एक गोल संस्करण (बिना पृष्ठभूमि के) की आवश्यकता होगी। इसके अलावा, कृपया ध्यान दें कि यदि आपके पास ये आकार नहीं हैं, तो हमारे पास इस पोस्ट के अंत में एक चरण-दर-चरण मार्गदर्शिका है कि इसे कैसे कॉन्फ़िगर किया जाए। आईओएस पर हमने जो किया उससे थोड़ा अलग, मैंने यहां एंड्रॉइड स्टूडियो का उपयोग नहीं करना चुना और इसके बजाय सीधे कोड को संशोधित किया क्योंकि मुझे इसका स्वरूपण मेनू बहुत दिलचस्प नहीं लगा!
आपके डिवाइस पर पहले से सहेजी गई छवियों के साथ, हम फ़ाइल प्रबंधक → Android → ऐप → src → मुख्य → Res में एप्लिकेशन फ़ोल्डर खोलेंगे। "Res" फ़ोल्डर के अंदर, हमारे पास "आकर्षित करने योग्य" फ़ोल्डर और अन्य "mipmap-प्रत्यय" फ़ोल्डर हैं।

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

अब जबकि हमने अपने आवेदन में परिवर्तन कर दिए हैं, हम मूल भाग की ओर बढ़ेंगे! ड्रा करने योग्य फ़ोल्डर के अंदर, हमारे पास "rn_edit_text_material.xml" फ़ाइल है और हम इसमें कुछ कॉन्फ़िगरेशन करेंगे।

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

इस मामले में, मैंने पृष्ठभूमि रंग सेट करने के <item android: drawable="@color/primary" /> टैग का उपयोग किया (हम इसे अगले चरण में कॉन्फ़िगर करेंगे), और item android: सेट करने के लिए उपसर्ग आयाम, किस छवि का उपयोग करना है, और डिवाइस स्क्रीन पर इसकी स्थिति।

 <?xml version="1.0" encoding="utf-8"?> <!-- Copyright (C) 2014 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I). The item below with state_pressed="false" and state_focused="false" causes a NullPointerException. NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/> For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR. --> <item android:drawable="@color/primary" /> <item android:width="100dp" android:height="100dp" android:drawable="@drawable/icon" android:gravity="center" /> </layer-list>

अब हम अपने बैकग्राउंड कलर को कॉन्फ़िगर करेंगे, इसके लिए हम "res" फोल्डर में नेविगेट करेंगे और "वैल्यूज" फोल्डर के अंदर "colors.xml" नामक एक फाइल बनाएंगे। हम नीचे कोड जोड़ेंगे, जिसमें हमारे बैकग्राउंड कलर टैग के साथ एक <resources> टैग शामिल है, जो पहले से ही उसी नाम से है जिसे हमने पिछले चरण में दिया था।
```
 <?xml version="1.0" encoding="utf-8" ?> <resources> <color name="primary">#f2f2f2</color> </resources>
```

"styles.xml" "मान" फ़ोल्डर के भीतर एक फ़ाइल है, जहाँ हम निम्न पंक्ति को संपादित करेंगे जो ऐप बनाते समय डिफ़ॉल्ट के रूप में आती है:
```
 <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
```
इस कोड के लिए:
```
 <item name="android:windowBackground"> @drawable/rn_edit_text_material </item> <item name="android:statusBarColor"> @color/primary </item>
```
ऊपर उल्लिखित कोड स्निपेट में, हम सेट करते हैं कि पृष्ठभूमि किस विंडो से संबंधित है, और सबसे नीचे, हम रंग (पहले परिभाषित) सेट करते हैं। अच्छा काम! आपका Android ऐप नई स्प्लैश स्क्रीन और आइकन के साथ पूरी तरह से तैयार होना चाहिए। ऐप स्टोर पर प्रकाशित करने से पहले इसे अच्छी तरह से परखना न भूलें। आपके ऐप के साथ गुड लक!

वांछित आकार में चिह्न बनाना।

अपने आइकॉन को सटीक आकार में बनाने के लिए, हम 2 टूल का उपयोग करेंगे, पहले वाले को #फिग्मा कहा जाता है ( https://www.figma.com/ ) और दूसरी #ApeTools नाम की एक वेबसाइट है ( https://apetools.webprofusion.com/#/tools/imagegorilla ). ApeTools में, हम अपनी छवि अपलोड करते हैं और यह इसे iOS या Android मानक आकार में स्वरूपित करता है। फिगमा में, हम अपनी एंड्रॉइड छवियों को अपलोड करेंगे और उन्हें गोलाकार बनाने के लिए उनमें एक बॉर्डररेडियस जोड़ेंगे।

एपटूल:
इसका उपयोग करने के लिए, हम "फ़ाइल चुनें" विकल्प पर क्लिक करेंगे, लोगो का चयन करेंगे और फिर Android और iOS बेस का चयन करेंगे, उसके बाद बस Kapow पर क्लिक करें! और साइट स्वचालित रूप से हमारे आइकन प्रस्तुत करेगी।
फिग्मा:
नोट: यह चरण केवल Android आइकन को कॉन्फ़िगर करने के लिए है।

हम वेबसाइट या #फिग्मा एप्लिकेशन खोलेंगे, उन छवियों को अपलोड करेंगे जिन्हें हम गोल करना चाहते हैं और दाहिने हाथ के मेनू में, वक्र विकल्प में, हम एक पूर्ण चक्र प्राप्त करने के लिए '100' डालेंगे (नीचे उदाहरण में मैंने किया था) यह चित्रण के लिए केवल एक छवि के साथ है, लेकिन यह "@mipmap" की सभी छवियों में किया जाना चाहिए और मैंने एक बड़े बॉर्डररेडियस का भी उपयोग किया क्योंकि मेरी नमूना छवि बहुत बड़ी थी)।