IOS लॉन्च स्क्रीन रिएक्ट नेटिव में




xcode react-native (9)

अभी भी परेशानी वाले लोगों के लिए, iOS लॉन्च स्क्रीन काम करने से पहले स्वीकृत उत्तर से एक और चरण गायब है।

प्रोजेक्ट फ़ोल्डर में Info.plist खोलें और "मुख्य निब फ़ाइल आधार नाम" कुंजी को हटा दें। फिर, पुनर्निर्माण और उम्मीद है कि मुद्दा चला गया है।

मैं एक प्रतिक्रियाशील एप्लिकेशन के साथ काम कर रहा हूं और मैं एक अनुकूलित लॉन्च स्क्रीन सेट करने की कोशिश कर रहा हूं, लेकिन मैं सक्षम नहीं हूं।

प्रतिक्रियाशील मूल डिफ़ॉल्ट रूप से एक LaunchScreen.xib बनाता है, इसलिए मैंने Images.xcassets के अंदर एक LaunchImage बनाया है:

मैंने यह भी पढ़ा है कि मुझे अपने विकल्पों में "ऐप आइकन और लॉन्च इमेज" के तहत "लॉन्च स्क्रीन फाइल" को संशोधित करना है:

एक बार जब मैं ऐसा कर लेता हूं, तो मेरी लॉन्च स्क्रीन पूरी तरह से काली हो जाती है और जब ऐप लोड होता है, तो ऊपर और नीचे दोनों काले फ्रेम होते हैं:

इसलिए मुझे नहीं पता कि मुझे अपने रिएक्ट नेटिव प्रोजेक्ट में अपनी लॉन्च स्क्रीन सेट करने के लिए क्या करना है।

मैं आभारी रहूंगा अगर कोई मुझे उन परेशानियों से बाहर निकालने में मदद कर सकता है।

अग्रिम में धन्यवाद।


आपको अपनी छवि सेट के रूप में लॉन्च स्क्रीन छवि स्रोत सेट करना चाहिए। बाद में LauncScreen.xib फ़ाइल को हटा दें। बाद में अपनी परियोजना में एक वैश्विक खोज करें और LaunchScreen.xib (अपनी संपूर्ण परियोजना देखें) में सभी संदर्भों को हटा दें। मैं उपयोगकर्ता का टेक्स्ट संपादक संपादक हूँ, इसलिए यह cmd + Shift + f) है और इसे काम करना चाहिए।


मेरे लिए XCode 10.1 और react-native 59.2 मुझे पहले से ही छवियों, स्टोरीबोर्ड और 1 सार्वभौमिक छवि को जोड़ने के बाद अतिरिक्त चरणों से गुजरना पड़ा।

  • छवि पर दायाँ क्लिक करें, Show in Finder क्लिक करें, फिर अपनी Contents.json फ़ाइल को संपादित करें
  • छवि को 2x और 3x खंडों में जोड़ें
  • "शासक" मेनू के साथ लॉन्च स्क्रीन स्टोरीबोर्ड पर जाएं
  • सुनिश्चित करें कि केवल अंदर के लाल तीर चालू हैं, बाहर के लाल तीर नहीं
  • "सुरक्षित क्षेत्र सापेक्ष मार्जिन" पर क्लिक करें

छवि अब सभी आकार के iPhones (पोर्ट्रेट पर परीक्षण) पर केंद्रित होनी चाहिए।


मैं इन उत्तरों को एसओ युक्त समाधान में देख रहा हूं कि नई लॉन्च स्क्रीन कैसे बनाई जाए। मेरा मतलब है कि चलो इसके बारे में एक मिनट के लिए सोचते हैं।

जब हम एक नई प्रतिक्रिया-मूल परियोजना बनाते हैं तो हम लॉन्च स्क्रीन के लिए क्या देखते हैं?

> फेसबुक की डिफ़ॉल्ट लॉन्च स्क्रीन

तो यह मुझे सोचने लगा, उन्होंने यह कैसे किया?

उन्होंने एक LaunchScreen.xib बनाया

मुझे लगता है कि इसका एक कारण होना चाहिए। इसलिए मैं LaunchScreen.xib में चला गया और डिफ़ॉल्ट पाठ "रिएक्टिव नेटिव ..." या जो भी उसने कहा था, उसमें बदलाव किया। मैंने यह देखने के लिए ऐप को एक बार और चलाया कि लॉन्च स्क्रीन ने मेरे संपादन को प्रतिबिंबित किया।

समाधान 1 मौजूदा LaunchScreen.xib को संपादित करें

समाधान 2 अपना स्वयं का बनाएँ

तो मैंने किया, मुझे यह जवाब लिखने में अधिक समय लगा कि मैं अपना खुद का निर्माण कैसे करना सीखूं। Both of these solutions are compatible with all the devices.

चरण 1:

LaunchScreen.xib हटाएं

चरण 2:

images.xcassets पर क्लिक करें। व्हाइट स्पेस में राइट क्लिक करें **import** क्लिक करें और फिर उस छवि का चयन करें जिसे आप जोड़ना चाहते हैं।

चरण 3:

अपने प्रोजेक्ट के रूट फ़ोल्डर पर राइट क्लिक करें और Launch Screen की एक नई फ़ाइल जोड़ें और उसे नाम दें जो आप चाहते हैं।

चरण 4

बाईं ओर स्थित अपने प्रोजेक्ट पर क्लिक करें, Settings > General और App Icons and Launch Images तहत जाएं। सुनिश्चित करें कि Launch Image Source रिक्त है और Launch Screen File आपके नए बनाए गए लॉन्च स्क्रीन के समान नाम है।

चरण 5

step 2 में आपके द्वारा बनाई गई अपनी नई फ़ाइल पर क्लिक करें, एक Image View खींचें या संपादित करें कि यह आपको कैसे प्रसन्न करता है।

तो फिर यह है, आप कर रहे हैं। आपको समाधान को साफ करने की भी आवश्यकता नहीं है, बस पुनर्निर्माण करें।


मैं प्रतिक्रिया-मूलक का उपयोग करके लॉन्च स्क्रीन या मुख्य आइकन लगाने के लिए generator-rn-toolbox की सलाह देता हूं। प्रतिक्रिया-मूल के रूप में cli के माध्यम से इसका उपयोग करना अधिक सरल और आसान है।

  • XCode खोलने की आवश्यकता नहीं है।
  • विभिन्न प्रस्तावों के लिए बहुत सारी छवि फ़ाइलों को बनाने की आवश्यकता नहीं है।
  • कभी भी एक पंक्ति की शुरुआत का उपयोग करके परिवर्तन स्क्रीन लॉन्च करें।

आवश्यकताएँ

  • नोड> = 6
  • लॉन्च स्क्रीन (स्प्लैश स्क्रीन) के लिए 2208x2208 px रिज़ॉल्यूशन के आकार के साथ एक वर्ग छवि या psd फ़ाइल
  • सकारात्मक मन ;)

इंस्टॉल करें

  1. जनरेटर-आरएन-टूलबॉक्स और यो स्थापित करें
  2. npm install -g yo generator-rn-toolbox
  3. Imagemagick brew install imagemagick करें imagemagick brew install imagemagick
  4. IOS पर स्प्लैश स्क्रीन लागू करें

    yo rn-toolbox:assets --splash YOURIMAGE.png --ios

    या Android

    yo rn-toolbox:assets --splash YOURIMAGE.png --android

बस इतना ही। :)

Source


यदि आप React की मदद से एक लॉन्च स्क्रीन बनाते हैं, तो आपको iOS Xcode में LaunchScreen.xib फ़ाइल में एक ही चीज़ जोड़ना चाहिए, इसके लिए आप एक स्क्रीनशॉट ले सकते हैं और इसे Images.xcassets में एक छवि के रूप में जोड़ सकते हैं।

लॉन्चस्क्रीन खोलें, फिर Xcode में राइट पैनल से ऑब्जेक्ट लाइब्रेरी से व्यू में UIImageView जोड़ें।

अनुगामी, अग्रणी, नीचे और शीर्ष अवरोधों को दृश्य में जोड़ें। जैसा की नीचे दिखाया गया -

UIImageView ContentMode को AspectFit के रूप में बदलना न भूलें ताकि ऐप चलने पर यह समान दिखाई दे।

उसके बाद आपको AppDelegate में कोड जोड़ना होगा ताकि आपको एक सफेद स्क्रीन न मिले। कोड है -

 UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
 launchScreenView.frame = self.window.bounds;
 rootView.loadingView = launchScreenView;

आप संदर्भित कर सकते हैं - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip


सिम्युलेटर से ऐप को हटाना सुनिश्चित करें। फिर अपने प्रोजेक्ट पर सफाई करें।


सुनिश्चित करें कि 'लॉन्च स्क्रीन फ़ाइल' का चयन रिक्त है:


उपरोक्त समाधानों का पालन करने पर मेरा ऐप स्प्लैश स्क्रीन पर अटक रहा था इसलिए मैंने ios पर कस्टम स्प्लैश स्क्रीन को जोड़ने के लिए निम्न 7 चरण किए।

  1. Xcode को खोलें और अपने प्रोजेक्ट में LaunchScreen.xib फ़ाइल को खोजें (ध्यान दें कि यह वह स्क्रीन है जो डिफ़ॉल्ट रूप से LaunchScreen.xib में दिखाई जाती है)
  2. स्क्रीन पर मौजूद टेक्स्ट को हटाने / संपादित करने के लिए उस पर क्लिक करें और अपनी इच्छानुसार आवश्यक बदलाव करें।
  3. पृष्ठभूमि का रंग बदलने के लिए दाईं ओर की पट्टी पर निम्नलिखित आइकन खोजें और बाईं ओर से चौथे स्थान पर, बहुत छोटे आइकन बटन पर क्लिक करें (जब आप मंडराते हैं, तो यह कहेगा कि "गुण निरीक्षक दिखाएं")

  1. अब जब आप जान चुके हैं कि बैकग्राउंड कलर को कैसे बदलना है, तो स्प्लैश स्क्रीन में इमेज को जोड़ने के लिए निम्न बटन पर क्लिक करें और इमेज व्यू को लिस्ट से चुनें और ड्रैग करें और जहां आप चाहते हैं, उसे स्प्लैश स्क्रीन पर रखें।

  1. अब हमें Images.xcassets में इमेज को Images.xcassets ताकि हम उस LaunchScreen.xib को करने के लिए LaunchScreen.xib में इसका संदर्भ दे Images.xcassetsimport बाद + बटन पर क्लिक करें और फिर उस छवि को जोड़ें जिसे आप स्प्लैश स्क्रीन में दिखाना चाहते हैं। AppIcon नीचे आप अपनी छवि फ़ाइल नाम देखेंगे। यह वह नाम है जिसका उपयोग हम अपने LaunchScreen.xib संदर्भ में LaunchScreen.xib

  2. अब हमें LaunchScreen.xib फ़ाइल में जोड़ी गई छवि को संदर्भित करना है ताकि LaunchScreen.xib वापस LaunchScreen.xib और उस image view क्लिक करें जिसे हमने पहले जोड़ा था और दाहिने हाथ के कोने पर आपको विकल्पों का गुच्छा दिखाई देगा। पहले एक पर क्लिक करें जो image कहता है और उस image का चयन करें जिसे आपने चरण 5 में आयात किया था

  1. परियोजना को साफ करें और react-native run-ios और आपको परिवर्तनों को देखना चाहिए।




asset-catalog