React-native: [आरंभीकरण] लॉन्च स्क्रीन सफेद फ्लैश

@alinz - यह अगली रिलीज़ में तय किया गया है: https://github.com/tadeuzagallo/react-native/commit/8d992262ed2dcf0d46e8d22e605764902c33012f

@alinz क्या यह https://www.dropbox.com/s/xq522ywqsd16vqe/example.mov?dl=0 जैसा कुछ दिखता है

@liubko हां, यह वही है

@brentvatne : मैं नहीं देखता कि वह पैच इस समस्या को कैसे ठीक करेगा (यदि मैं अंधा/बेवकूफ हूं तो कृपया क्षमा करें :-)। समस्या यह है कि जब ऐप लॉन्च हुआ है और रिएक्ट अभी भी काम कर रहा है, के बीच एक क्षण है। आदर्श रूप से लॉन्चस्क्रीन तब तक दिखाई देगी जब तक प्रतिक्रिया समाप्त नहीं हो जाती है और पूरी तरह से "पूरी तरह से देशी" ऐप में पूरी तरह से प्रस्तुत किया जाता है।

@oblador - आह, यह आपको "झिलमिलाहट" पल में लॉन्च स्क्रीन के समान पृष्ठभूमि रंग रखने से अधिक आसानी से संक्रमण करने की अनुमति देगा।

@vjeux - आप इस मुद्दे को FB ऐप्स में कैसे @nicklockwood

इस मुद्दे के लिए भी एक (अलग) फिक्स है। loadingView की नई संपत्ति का उपयोग करें RCTRootView , और इसे अपनी लॉन्च छवि दिखाते हुए एक पूर्ण-स्क्रीन UIImageView करें। कोड कुछ इस तरह दिख सकता है:

UIImageView *launchView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"MyLaunchImage"];
rootView.loadingView = launchView;

मैं लॉन्च छवि का स्वचालित रूप से पता लगाने और इसे पूरी तरह से स्वचालित बनाने के तरीके के साथ प्रयोग कर रहा हूं, लेकिन यह अभी तक वास्तव में तैयार नहीं है। यदि आप रुचि रखते हैं, तो ऐसा लगता है:

// TODO: support landscape orientation

// Get launch image
NSString *launchImageName = nil;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
  CGFloat height = MAX(RCTScreenSize().width, RCTScreenSize().height);
  if (height == 480) launchImageName = @"[email protected]"; // iPhone 4/4s
  else if (height == 568) launchImageName = @"[email protected]"; // iPhone 5/5s
  else if (height == 667) launchImageName = @"[email protected]"; // iPhone 6
  else if (height == 736) launchImageName = @"[email protected]"; // iPhone 6+
} else if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
  CGFloat scale = RCTScreenScale();
  if (scale == 1) launchImageName = @"LaunchImage-700-Portrait~ipad.png"; // iPad
  else if (scale == 2) launchImageName = @"LaunchImage-700-Portrait@2x~ipad.png"; // Retina iPad
}

// Create loading view
UIImage *image = [UIImage imageNamed:launchImageName];
if (image) {
  UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRect){CGPointZero, RCTScreenSize()}];
  imageView.contentMode = UIViewContentModeBottom;
  imageView.image = image;
  rootView.loadingView = imageView;
}

यदि आप iOS 8+ पर हैं, तो @nicklockwood ने जो वर्णन किया है,

@ide मैं लॉन्चस्क्रीन xib का उपयोग कर रहा हूं। मैं लॉन्च के समय अपना लॉचस्क्रीन दृश्य देखता हूं लेकिन मेरे ऐप के बूट होने से पहले, मुझे एक सफेद दृश्य (फ़्लैश) दिखाई देता है।

@alinz , मेरा मानना ​​है कि @ide का अर्थ है RCTRootView loadingView (जिसे आपको अभी भी मैन्युअल रूप से करने की आवश्यकता होगी) सेट करने के लिए अपने लॉन्चस्क्रीन xib का उपयोग करना है। ऐसा करने के लिए (अभी तक) कोई स्वचालित समर्थन नहीं है।

स्पष्ट करने के लिए, जब रिएक्ट _begins_ लोड हो रहा होता है, तो iOS आपकी लॉन्च स्क्रीन को छुपा देता है। एक खाली स्क्रीन देखने से बचने के लिए, आपको उस समय को बढ़ाने की आवश्यकता होगी जब लॉन्च स्क्रीन को मैन्युअल रूप से उसी दृश्य को दिखाकर दिखाया जाए जो RCTRootView के लोडिंग व्यू के रूप में है।

स्पष्टीकरण के लिए धन्यवाद @nicklockwood । वह मेरा बुरा था। :)

http://stackoverflow.com/a/29115477/255765 के सौजन्य से मैं इसके साथ समाप्त हुआ:

for (NSString *imgName in allPngImageNames){
    // Find launch images
    if ([imgName containsString:@"LaunchImage"]){
      UIImage *img = [UIImage imageNamed:imgName]; //-- this is a launch image
      // Has image same scale and dimensions as our current device's screen?
      if (img.scale == [UIScreen mainScreen].scale && CGSizeEqualToSize(img.size, [UIScreen mainScreen].bounds.size)) {
        NSLog(@"Found launch image for current device %@", img.description);
        UIImageView *launchView = [[UIImageView alloc] initWithImage: img];
        rootView.loadingView = launchView;
      }
    }
  }

काम करने लगता है।

मानक/दस्तावेज तरीके से +1।

@ डिवाइन-मल्टीमीडिया क्या मेरे द्वारा ऊपर दिए गए कोड स्निपेट से बेहतर काम करता है?

@ myusuf3

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

@nicklockwood मैंने आपके कोड की कोशिश की लेकिन मुझे अभी भी एक सफेद फ्लैश दिखाई दे रहा है। मैंने लोडिंग व्यू के रूप में सेट करने के लिए एक लॉन्च इमेज बनाई। लॉन्च छवि लॉन्चस्क्रीन.xib जैसी ही है।

हमारे ऐप की रिलीज़ को रोके रखने वाली यही एकमात्र चीज़ है। वास्तव में इस पर किसी भी मदद की सराहना करते हैं।

क्या लॉन्च छवि के छिपे होने के बाद फ्लैश दिखाई दे रहा है, या लॉन्च छवि दिखाई देने में विफल है? (यह केवल देखकर निर्धारित करना कठिन हो सकता है - लॉन्च छवि को अस्थायी रूप से सुनिश्चित करने के लिए एक ठोस लाल आयत की तरह कुछ में बदलें)।

@nicklockwood मैंने xib फ़ाइल और लॉन्चस्क्रीन छवि के बीच रंग बदलने की कोशिश की। मैं अभी भी वह फ्लैश देख रहा था।

मेरा कोड इस तरह दिखता है:

 UIImageView *launchView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"launchScreen1"]];
 rootView.loadingView = launchView;

 rootView.loadingViewFadeDelay = 0.0;
 rootView.loadingViewFadeDuration = 0.15;

मैंने पिछली दो पंक्ति को हटा दिया है loadingViewFadeDelay और अवधि अब और ऐसा लगता है कि समस्या हल हो गई है। मुझे कोई फ्लैश नहीं दिख रहा है। अच्छा चिकना संक्रमण।

@ chirag04 मैंने इसे नमूना परियोजना के साथ आजमाया और मुझे फ्लैश नहीं दिखाई दिया :(

यहाँ मैंने क्या किया

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"whiteFlash"
                                                   launchOptions:launchOptions];

  //here's what I did
  UIImage *image = [UIImage imageNamed:@"LaunchImage"];
  if (image) {
    UIImageView *launchView = [[UIImageView alloc] initWithImage: image];
    launchView.contentMode = UIViewContentModeBottom;
    launchView.image = image;
    rootView.loadingView = launchView;
  }
  ///////////////////////////

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;

ठीक। गहराई से खोदने से ऐसा लगता है कि फ्लैश शायद मेरे ऐप को तब तक प्रस्तुत नहीं करता जब तक कि asyncstore से कोई मान लोड न हो जाए।

render() {
  if(!this.state.loaded) return (null);
  return <View ...../>;
}

मुझे लगता है कि लोडिंग व्यू सोचता है कि जेएस ने प्रतिपादन समाप्त कर दिया है और लोडिंग व्यू को छुपाता है। हालांकि जेएस ने उस return null साथ प्रतिपादन समाप्त कर दिया है

@nicklockwood @alinz मैं सिर्फ हवा में शूटिंग कर रहा हूं। वास्तविक कारण नहीं हो सकता है। तुम लोग क्या सोचते हो।

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

LoadingFadeDelay का उद्देश्य ठीक उस परिदृश्य को कवर करना है जहां आपका ऐप तुरंत कुछ भी प्रस्तुत नहीं करता है, इसलिए आप इसे सही तरीके से उपयोग कर रहे हैं।

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

मुझे @nicklockwood समाधान पसंद है लेकिन आपको नेटवर्क विलंबता पर विचार करना होगा जिसका अनुमान नहीं लगाया जा सकता है।

एक अन्य समाधान है, घटक स्थिति को किसी प्रकार के डिफ़ॉल्ट मान पर सेट करें ताकि आपके घटक को किसी प्रकार का लोडिंग संवाद प्रदर्शित करने के लिए कहा जा सके।

ठंडा। मुझे लगता है कि मेरे पास समाधान है।

आप लोग क्या सोचते हैं कि 3 घटक सभी समान हैं।

1) launchScreen.xib
2) loadingView
3) return null in render to actually render a view which is like loadingView and launchScreen.xib?

हालांकि यह निश्चित नहीं है कि विभिन्न उपकरणों पर बिंदु 3 का पैमाना कैसे होगा। क्या आप लोग भी इसका सुझाव देंगे?

यदि स्टार्टअप समय नेटवर्क पर निर्भर करता है तो टीईएस, मैं निश्चित रूप से "खाली" दृश्य को चित्रित करने की अपेक्षा करता हूं, यह उम्मीद करने के बजाय कि यह फीका देरी से तेज़ी से डाउनलोड हो।

asyncstorage पर निर्भर करता है। कोई नेटवर्क नहीं

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

माना। लोडिंग व्यू का उद्देश्य, मानक आईओएस लोडिंग छवि की तरह, केवल तब तक कवर करना है जब तक कि आपका ऐप कुछ प्रदर्शित करने के लिए तैयार न हो, भले ही सभी ऐप प्रदर्शित करने के लिए तैयार हों, एक लोडिंग स्पिनर है।

उस ने कहा, इसका कारण यह है कि मैंने इसे एक छवि के बजाय एक दृश्य बनाया है ताकि आप इसे गैर-स्थिर बना सकें। यदि आप चाहें तो लोडिंग व्यू में UIActivityIndicatorView जोड़ सकते हैं।

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

यह वही है जो मेरे पास है:

  UIImageView *launchView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage"]];
  CGRect frame = launchView.frame;
  frame.origin.x = 0;
  frame.origin.y = 0;
  launchView.frame = frame;
  rootView.loadingView = launchView;
  rootView.loadingViewFadeDelay = 0.0;
  rootView.loadingViewFadeDuration = 0.0;

यह एक लॉन्च छवि नहीं है, यह एक लॉन्च _view_ है, इसलिए आप अपनी छवि दृश्य को किसी अन्य कंटेनर दृश्य के अंदर रख सकते हैं और कंटेनर को लॉन्च दृश्य के रूप में उपयोग कर सकते हैं:

UIView *launchView = [[UIView alloc] init];
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage"]];
imageView.frame = CGRectMake(whatever);
[launchView addSubview:imageView];
...

सच है, मुझे लगता है कि मैं रैपर को स्क्रीन स्पेस भर सकता हूं और छवि को शीर्ष पर रख सकता हूं। ऐसा लगता है कि रूट व्यू द्वारा रैपर स्वचालित रूप से केंद्र में स्थित होगा https://github.com/facebook/react-native/blob/757d6d204ae2d743634af64e3f78a4aad9d53f70/React/Base/RCTRootView.m#L191।

@Intellicode हाँ।

@ dवाइन-मल्टीमीडिया के कोड का उपयोग करके iPhone 4s पर उत्पादन में मेरे ऐप को तोड़ दिया। फिक्स सिर्फ अगर में ब्रेक लगाना है।

एक और दुर्घटना क्योंकि आईओएस 7 पर containsString उपलब्ध नहीं है।

@nicklockwood सोच रहा है कि क्या लोडिंग व्यू स्वचालित रूप से सर्वोत्तम रिज़ॉल्यूशन को संभव बनाएगा?

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

हालांकि आपका स्निपेट सही आयामों के साथ नहीं चुन रहा है। उसके लिए कोई फिक्स?

क्या आप मेरे समाधान या डिवाइन का उपयोग कर रहे थे? आप किस iPhone मॉडल का उपयोग कर रहे हैं? पोर्ट्रेट या लैंडस्केप?

डिवाइन का उपयोग करते समय यह सही आयाम उठाता है। उर समाधान के साथ यह छवि के चारों ओर काला स्थान है। मुझे लगता है कि काला स्थान coz है, यह छवि को गलत आयाम के साथ उठाता है।

मैं आईफोन 6 पर हूं। पोर्ट्रेट।

इस तरह दिखता है। सफेद पृष्ठभूमि पर ध्यान दें।

निम्नलिखित कोड का उपयोग करना:

UIImageView *launchView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage"]];
  rootView.loadingView = launchView;
  rootView.loadingViewFadeDelay = 0.20;
  rootView.loadingViewFadeDuration = 0.20;

वह समाधान नहीं था जिसे मैंने पोस्ट किया था, यह था:

// Get launch image
NSString *launchImageName = nil;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
  CGFloat height = MAX(RCTScreenSize().width, RCTScreenSize().height);
  if (height == 480) launchImageName = @"[email protected]"; // iPhone 4/4s
  else if (height == 568) launchImageName = @"[email protected]"; // iPhone 5/5s
  else if (height == 667) launchImageName = @"[email protected]"; // iPhone 6
  else if (height == 736) launchImageName = @"[email protected]"; // iPhone 6+
} else if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
  CGFloat scale = RCTScreenScale();
  if (scale == 1) launchImageName = @"LaunchImage-700-Portrait~ipad.png"; // iPad
  else if (scale == 2) launchImageName = @"LaunchImage-700-Portrait@2x~ipad.png"; // Retina iPad
}

// Create loading view
UIImage *image = [UIImage imageNamed:launchImageName];
if (image) {
  UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRect){CGPointZero, RCTScreenSize()}];
  imageView.contentMode = UIViewContentModeBottom;
  imageView.image = image;
  rootView.loadingView = imageView;
}

ओह लानत! काश मैं आपकी टिप्पणी को ध्यान से पढ़ता। आपका समाधान काम करता है और इसे समझना भी आसान है।

I've been experimenting with a way to automatically detect the launch image and make this completely automatic, but it's not really ready yet. If you're interested, it looks like this:

शायद यह experimenting चीज है। मुझे यकीन नहीं है कि मैं इसे कैसे चूक गया। माफ करना मेरा बुरा।

यहाँ मदद के लिए धन्यवाद। अगले संस्करण में इस कोड का उपयोग def करेंगे। ऐसा लगता है कि सभी मामलों को भी कवर किया गया है। परिदृश्य की जरूरत नहीं है।

हे, मुझे लगता है कि मैंने इसे अंडरसोल्ड कर दिया। मुझे शायद अभी कहना चाहिए था "यह वही है जो हम अभी उत्पादन में उपयोग कर रहे हैं, और ऐसा लगता है कि यह ठीक काम करता है" :-)

"यह वही है जो हम अभी उत्पादन में उपयोग कर रहे हैं" हमें ऐप स्टोर पर किसी 1 स्टार से बचा सकता है। हाहा। चिंता न करें। दुनिया को बचाने के लिए हमेशा एक नया संस्करण होता है। :)

इस मुद्दे को बीटीडब्ल्यू बंद करें?

मैं जाऊंगा और इस टिकट को बंद कर दूंगा क्योंकि इस पर पूरी तरह से विस्तार से चर्चा की गई है, हमारे पास कुछ अच्छे समाधान हैं।

लॉन्चस्क्रीन xib का उपयोग करने वालों के लिए इसे 100% स्पष्ट करने के लिए, यहां वह कोड है जो यह काम करेगा:

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

उन पंक्तियों को application didFinishLaunchingWithOptions विधि में AppDelegate.m फ़ाइल में जोड़ें, जो return YES कहने वाली रेखा के ठीक ऊपर है।

@arnemart अधिक स्पष्ट होने के लिए कि विधि केवल ios 8+ के लिए ही काम करेगी?

@arnemart धन्यवाद! पूरी तरह से काम करता है ।

उन लोगों के लिए जो LaunchImage , आपको छवि को सही ढंग से स्केल करने के लिए frame और contentMode दोनों को सेट करने की आवश्यकता है:

UIImageView *launchScreenView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage"]];
launchScreenView.frame = self.window.bounds;
launchScreenView.contentMode = UIViewContentModeScaleAspectFill;
rootView.loadingView = launchScreenView;

@arnemart की टिप्पणी की तरह, इन पंक्तियों को application didFinishLaunchingWithOptions विधि में AppDelegate.m फ़ाइल में जोड़ें, जो return YES कहने वाली रेखा के ऊपर है।

अजीब। RN v.0.11.4 पर, ऐप पहले काली स्क्रीन के साथ लॉन्च होता है और फिर ऐप लोड करने से पहले LaunchScreen.xib। iOS 9 w/ @arnemart का फिक्स https://github.com/facebook/react-native/issues/1402#issuecomment -130236507। कोई विचार?

@irfaan window.backgroundColor को [UIColor redColor] जैसी किसी चीज़ में बदलने की कोशिश करें, जो हमें बताए कि काला रंग खिड़की से आ रहा है या कुछ और।

self.window.backgroundColor = [UIColor redColor]; अंदर didFinishLaunchingWithOptions कुछ भी नहीं बदला। LaunchScreen.xib से पहले अभी भी काला है। तो खिड़की से नहीं, ऐसा लगता है @nicklockwood

आप कैसे सलाह देते हैं कि मैं इसे डीबग करने के बारे में जाऊं?

ऐसा लगता है कि आईओएस आपके लॉन्चस्क्रीन को तब तक लोड नहीं कर रहा है जब तक ऐप लोड नहीं हो जाता है (जिस बिंदु पर, रिएक्ट इसे लोडिंग व्यू के रूप में प्रदर्शित कर रहा है)।

शायद यह एक्सकोड में कॉन्फ़िगरेशन त्रुटि है? या संभवतः आईओएस 9 में एक बग?

क्या आपने किसी डिवाइस, या केवल सिम्युलेटर पर कोशिश की है?

धन्यवाद @nicklockwood - मैं डिवाइस पर समस्या का सामना कर रहा था। इसे सिम्युलेटर में चलाएं और यह पूरी तरह से काम करता है, और फिर हटा दिया गया + डिवाइस पर चला गया और यह ठीक काम करता है। वास्तव में अजीब। यदि समस्या फिर से उठती है तो दोबारा पोस्ट करेंगे।

हाय @genexliu , मैंने छवियों का अपना "लॉन्चइमेज" सेट Images.xcassets/LaunchImage.launchimage/ जोड़ा है, फिर भी न तो आपके द्वारा चिपकाया गया कोड और न ही मेरा लॉन्चस्क्रीन.स्टोरीबोर्ड उन्हें ढूंढ/उपयोग कर सकता है (दोनों चुपचाप विफल हो जाते हैं)। मेरा लॉन्चस्क्रीन स्टोरीबोर्ड सही ढंग से लोड हो रहा है क्योंकि मुझे इसकी पृष्ठभूमि का रंग दिखाई दे रहा है लेकिन यह संदर्भित छवि प्रदर्शित नहीं करता है। कोई विचार?

साथ ही एक्सकोड से चलने पर स्टार्टअप अनुक्रम सामान्य दिखता है लेकिन cmd लाइन से natal launch चलाते समय प्रारंभ अनुक्रम/अतिरिक्त सफेद फ्लैश/आदि का एक अतिरिक्त रन प्रतीत होता है।

स्टोरीबोर्ड के साथ मेरी समस्या का पता चलता है कि लॉन्च इमेज नहीं मिल रहा है, जाहिरा तौर पर एक्सकोड के साथ एक बग था। मैंने लॉन्च सेटिंग को 'एसेट कैटलॉग का उपयोग करें' और फिर 'स्टोरीबोर्ड का उपयोग करें' में बदल दिया और यह काम करना शुरू कर दिया। यह स्पष्ट नहीं है कि @genexliu का कोड मेरे लिए काम कर रहा है या नहीं क्योंकि loadingViewFadeDelay कोई असर नहीं दिख रहा है।

यहाँ मेरा कोड है:

  UIImageView *launchScreenView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Images/LaunchImage"]];
  launchScreenView.frame = self.window.bounds;
  launchScreenView.contentMode = UIViewContentModeScaleAspectFill;
  rootView.loadingView = launchScreenView;
  rootView.loadingViewFadeDelay = 5000;

अभी तक स्टोरीबोर्ड लॉन्च इमेज डिस्प्ले और मेरी प्रारंभिक प्रतिक्रिया render बीच कोई देरी नहीं है।

@"इमेज/लॉन्चइमेज" मुझे सही नहीं लग रहा है। यह शायद सिर्फ @ "लॉन्च इमेज" है

ओह, उफ़, हाँ। तुम सही कह रही हो। वह एक गलत पेस्ट था - मैंने कोशिश की (लेकिन पहले नहीं) क्रमपरिवर्तनों में से एक।

साथ ही, 3 महीने पहले की मेरी टिप्पणी में उदाहरण कोड देखें - विभिन्न डिवाइस वर्गों के लिए बहुत सी लॉन्च छवि फ़ाइलें हैं।

दोह! आप ठीक कह रहे थे। LaunchImage वापस जाने के बाद यह अब काम कर रहा है। धन्यवाद!

क्या कोई मुझे एंड्रॉइड के लिए इस पर किसी भी दस्तावेज के बारे में बता सकता है?

Android के लिए +1

cc @dmmiller क्या हमारे पास Android पर एक लोडिंग व्यू फीचर है?

नमस्ते, मैं इसी समस्या में भाग रहा हूं, और हालांकि मुझे लगता है कि यहां कुछ पोस्ट किए गए समाधान हैं, मुझे समझ में नहीं आता कि यह कोड कहां रखा जाए। मेरी समझ से, समाधान उद्देश्य-सी कोड को बदलना है, न कि कुछ ऐसा जो रिएक्ट नेटिव के भीतर ही किया जा सकता है, है ना? उस स्थिति में, पोस्ट किया गया कोड कहाँ जाता है? xcode प्रोजेक्ट रूट में main.m फाइल में? धन्यवाद।

@CorpusCallosum कोड को AppDelegate.m फ़ाइल में जाना चाहिए, जहां RCTRootView सेट किया गया है।

धन्यवाद @nicklockwood , मैं इसे आज़मा दूंगा।

अरे यह कोड अब मेरे लिए काम कर रहा है, जहां तक ​​मुझे सफेद फ्लैश नहीं दिख रहा है, और मेरी छवि उस प्रारंभिक स्क्रीन पर लोड की जा रही है, हालांकि, अब मेरा वास्तविक ऐप लोड नहीं होगा! यह सिर्फ उस लोड स्क्रीन पर रहता है, हालांकि मैं अपने कंसोल में देख सकता हूं, ऐप लोड और चल रहा है, और यहां तक ​​​​कि बातचीत भी काम कर रही है (टैप और स्वाइप करें), लेकिन मैं वास्तव में अपना ऐप बिल्कुल नहीं देख सकता, यह बस अटक गया है उस प्रारंभिक स्क्रीन पर। कोई विचार क्यों?

मेरी AppDelegate.m फ़ाइल से मेरा कोड यहां दिया गया है:

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  //use launch image as BG image for app
  UIImageView *launchScreenView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage-blank-grey"]];
  launchScreenView.frame = self.window.bounds;
  launchScreenView.contentMode = UIViewContentModeScaleAspectFill;
  rootView.loadingView = launchScreenView;
  rootView.loadingViewFadeDelay = 1000;

  return YES;

@CorpusCallosum आप लाइन को हटाने का प्रयास कर सकते हैं
rootView.loadingViewFadeDelay = 1000;
या स्प्लैश स्क्रीन और अपने ऐप के बीच इसके मूल्य के साथ संक्रमण को ठीक करें (मुझे लगता है कि इकाइयां सेकंड हैं, मिलीसेकंड नहीं, यही कारण है कि यह स्पलैश पर "फंस गया" लगता है)।
यदि लाइन को हटाना आपके लिए पूरी तरह से काम नहीं कर रहा है, तो 0-5 के बीच मान सेट करने का प्रयास करें (आप गैर पूर्णांक मान भी सेट कर सकते हैं)।

मेरे लिए काम करना, धन्यवाद दोस्तों :)

उन लोगों के लिए जो अपने लॉन्चस्क्रीन xib को लोडिंग व्यू के रूप में उपयोग करना चाहते हैं, यहां AppDelegate.m में डालने के लिए कोड है:

UIView *loading = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
rootView.loadingView = loading;
rootView.loadingViewFadeDelay = 1;

अंतिम पंक्ति वैकल्पिक है, जैसा कि मैंने ऊपर उल्लेख किया है, यह उस समय को निर्धारित करता है जब लोडिंग व्यू ऐप पर जाने से पहले रहेगा।

@ डेविड- इसके लिए बहुत बहुत धन्यवाद! जब से मैंने प्रतिक्रिया देशी का परीक्षण शुरू किया है, मैं इससे निपट रहा हूं। मैं

@ david-a, @geriux : मुझे launchScreenView.frame = CGRectZero; भी सेट करना पड़ा क्योंकि मेरी LaunchScreen.xib में AspectFill सामग्री मोड के साथ एक पृष्ठभूमि छवि थी और यह सही ढंग से स्केलिंग नहीं कर रहा था। मुझे कुछ परीक्षण और त्रुटियों के बाद समाधान मिला, यह सुनिश्चित नहीं है कि इसका क्या कारण है।

@ बासित अली हाँ, क्षमा करें, इसे बेहतर दस्तावेज किया जाना चाहिए। यदि आप दृश्य का आकार शून्येतर पर सेट करते हैं तो यह स्क्रीन में केंद्रित होगा। यदि आप इसे शून्य पर सेट करते हैं तो इसे स्क्रीन पर फिट करने के लिए स्केल किया जाएगा।

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

अच्छा होगा अगर कोई दस्तावेज़ के लिए पीआर कर सके।

आपके लोगों की सलाह मुझे बहुत मदद करती है (आईओएस पर, पूरी तरह से काम कर रही है), क्या किसी को एंड्रॉइड पर इसे ठीक करने का कोई तरीका मिल गया है?

यह कोई मदद?

https://github.com/remobile/react-native-splashscreen

@weiyisheng , मैं आईओएस पर ऊपर चर्चा की गई फिक्स के साथ एंड्रॉइड पर स्प्लैशस्क्रीन का उपयोग कर रहा हूं।

@braco @BasitAli हाँ, इससे मदद मिली, मैं इसे अपने ऐप में इस्तेमाल करूंगा, यह एक अच्छा विचार है। थैंक यू दोस्तों।

@BasitAli आईओएस पर जिज्ञासा से इसका उपयोग क्यों नहीं करते?

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

@BasitAli ऐसा लगता है कि प्रतिक्रिया-मूल-स्प्लैशस्क्रीन प्लगइन rootView.loadingViewFadeDuration सेटिंग का पालन करता है, बशर्ते कि आप इसे संलग्न करने के बाद इसे सेट करते हैं, इसलिए इसे फीका अक्षम करना चाहिए:

[RCTSplashScreen show:rootView];
rootView.loadingViewFadeDuration = 0;

क्या शीर्ष पर उस छोटे संदेश को "प्रीबंडल फ़ाइल से लोड हो रहा है" कहने का कोई तरीका है?

@rclai ने जारी करने की योजना बनाई

आह! धन्यवाद!

क्या दोनों प्लेटफॉर्म स्प्लैश स्क्रीन के लिए कोई प्रतिक्रिया-मूल समाधान है? दोनों प्लेटफार्मों में टाइपिंग आंतरिक फाइलों में प्रतिक्रिया-मूल का उपयोग बेकार हो जाता है .. सरल उत्तर कृपया। धन्यवाद

@rclai

क्या शीर्ष पर उस छोटे संदेश को "प्रीबंडल फ़ाइल से लोड हो रहा है" कहने का कोई तरीका है?

यह रिलीज मोड में नहीं दिखाया गया है, केवल डीबग मोड में। यदि आप इसे डिबग मोड में भी छिपाना चाहते हैं, तो आप इसे अपने AppDelegate में [RCTDevLoadingView setEnabled:NO]; डालकर छिपा सकते हैं।

@nicklockwood हाय वहाँ, क्या यह सही है? अगर नहीं तो मुझे क्या बदलना चाहिए/हटाना चाहिए?

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"SomeApp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

// Get launch image
NSString *launchImageName = nil;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
  CGFloat height = MAX(RCTScreenSize().width, RCTScreenSize().height);
  if (height == 480) launchImageName = @"[email protected]"; // iPhone 4/4s
  else if (height == 568) launchImageName = @"[email protected]"; // iPhone 5/5s
  else if (height == 667) launchImageName = @"[email protected]"; // iPhone 6
  else if (height == 736) launchImageName = @"[email protected]"; // iPhone 6+
} else if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
  CGFloat scale = RCTScreenScale();
  if (scale == 1) launchImageName = @"LaunchImage-700-Portrait~ipad.png"; // iPad
  else if (scale == 2) launchImageName = @"LaunchImage-700-Portrait@2x~ipad.png"; // Retina iPad
}

// Create loading view
UIImage *image = [UIImage imageNamed:launchImageName];
if (image) {
  UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRect){CGPointZero, RCTScreenSize()}];
  imageView.contentMode = UIViewContentModeBottom;
  imageView.image = image;
  rootView.loadingView = imageView;
}

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@TeodorKolev मुझे सही लगता है। यदि आप अभी भी स्टार्टअप पर फ्लैश देख रहे हैं, तो सेटिंग करने का प्रयास करें

rootView.loadingViewFadeDelay

बड़े मान के लिए (यह सेकंड में है - डिफ़ॉल्ट 0.25 है)

संपादित करें:

यह रेखा

UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRect){CGPointZero, RCTScreenSize()}];

शायद बस होना चाहिए

UIImageView *imageView = [[UIImageView alloc] init];

धन्यवाद, मुझे उन छवियों को किस फ़ोल्डर में जोड़ना चाहिए? क्या मुझे इसके लिए अतिरिक्त Contents.json चाहिए या नहीं? मुझे उस कोड में बहु त्रुटियाँ मिली हैं, जो से शुरू हो रही हैं
(https://cloud.githubusercontent.com/assets/10398337/13778676/e01e3d32-eabf-11e5-95bf-d7a1205a5ca1.png)
तरफ घूर रहा:

CGFloat height = MAX(RCTScreenSize().width, RCTScreenSize().height);

@TeodorKolev Xcode में उन्हें जोड़ने के लिए एक GUI है। Images.xcassets पर क्लिक करें, फिर + बटन पर क्लिक करें और "App Icons & Launch Images" > "New iOS Launch Image" चुनें।

@TeodorKolev त्रुटियों को ठीक करने के लिए, आपको जोड़ना होगा

#import "RCTUtils.h"

आपके ऐपडिलेगेट में।

बहुत-बहुत धन्यवाद, लेकिन मैं अपने वेबव्यू यूआरएल के पूरी तरह से लोड होने तक स्प्लैश स्क्रीन देखना चाहता हूं, और अब यह उस तरह काम नहीं कर रहा है। मान सम्मान!

@nicklockwood क्या आपके पास इसका कोई उपाय है?

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

संपादित करें: मैं सिर्फ launchscreen.xib के साथ एक काली स्क्रीन का उपयोग कर रहा हूं, लेकिन ऐप के पूर्ण रूप से लोड होने से पहले इसका आधा हिस्सा सफेद हो जाता है।

@ Hasen6 समस्या पहले ही ठीक हो चुकी है, लेकिन डेवलपर की ओर से कुछ काम करने की आवश्यकता है।

जैसा कि ऊपर टिप्पणियों में चर्चा की गई है, आपको सफेद स्क्रीन के स्थान पर दिखाने के लिए rootView.loadingView को कुछ सामग्री के साथ सेट करने की आवश्यकता है, और यह सुनिश्चित करने के लिए rootView.loadingViewFadeDelay समायोजित करें कि लोडिंग दृश्य आपके सामने छिपा नहीं है ऐप ने लोड करना समाप्त कर दिया है।

यदि आप केवल एक काली स्क्रीन दिखाना चाहते हैं, तो आपको लोडिंग व्यू से परेशान होने की आवश्यकता नहीं है और केवल rootView.backgroundColor को काला करने के लिए सेट करें, लेकिन आपको प्रयोग करना होगा।

मैंने rootView.backgroundColor = [UIColor clearColor]; को rootView.backgroundColor = [UIColor blackColor] में बदल दिया; but it didn't make any difference. Doing a search in XCode for rootView.loadingView` ने कोई परिणाम नहीं दिया।

@ Hasen6 आपको यह पता लगाने की आवश्यकता है कि सफेद रंग कहाँ से आ रहा है - यह हो सकता है कि आपके JS ऐप के अंदर एक दृश्य हो जो सफेद हो और सामग्री लोड होने से पहले कुछ समय के लिए दिखाया गया हो।

loadingView की एक संपत्ति है RCTRootView , जो संभवतः आपके ऐपडिलेगेट के अंदर का एक उदाहरण है। वास्तविक कोड rootView.loadingView आपके Xcode में तब तक दिखाई नहीं देगा जब तक आप इसे स्वयं नहीं जोड़ते। आप इसका उपयोग कैसे कर सकते हैं इसका एक उदाहरण यहां दिया गया है:

rootView.loadingView = [UIView new];
rootView.loadingView.backgroundColor = [UIColor blackColor];
rootView.loadingViewFadeDelay = 0.5; // measured in seconds

मेरा ऐप कहीं भी सफेद नहीं है। लॉन्चस्क्रीन दिखाए जाने के बाद मेरे सभी ऐप्स लोड पर एक ही सफेद स्क्रीन दिखाते हैं, इसलिए मुझे यकीन है कि यह मेरे ऐप्स में कोई समस्या नहीं है।

तो मुझे उस कोड को appdelegate.m में जोड़ना होगा? यह भी काम नहीं किया। मुझे लगता है कि इसे ठीक करना लगभग असंभव होना चाहिए अन्यथा डेवलपर्स के साथ एक साल भी नहीं बीतता, फिर भी इसे हल नहीं किया जाता। यह देखते हुए कि यह ऐप्स को कितना खराब बनाता है, यह स्पष्ट रूप से हल करने के लिए सूची में सबसे ऊपर होगा।

एफडब्ल्यूआईडब्ल्यू, इस तरह मैं इस समस्या को हल कर रहा हूं। मैं LaunchScreen.xib और डेविड-ए के समाधान का उपयोग कर रहा हूं:

UIView *loading = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
rootView.loadingView = loading;
rootView.loadingViewFadeDelay = 1;

यह कोड ठीक नीचे डाला गया है

RCTRootView *rootView = [[RCTRootView alloc] etc etc etc...]

अगर मैं उस कोड को निकलवुड के नमूना कोड से बदल देता हूं तो सफेद फ्लैश वापस आ जाता है।

वाह! ठीक है कि एक काम करता है। धन्यवाद ग्रिटथ!

@ ग्रिट्टाथ @ हसन 6 आह, ठीक है। मुझे गलत याद आया कि लोडिंग व्यू स्वचालित रूप से स्क्रीन पर फिट होने के लिए आकार में था यदि इसका आकार शून्य है, लेकिन जाहिर है कि ऐसा कभी नहीं था _(ツ)_/¯।

@ Hasen6 यहां कोड का एक संशोधित संस्करण है जो काम करना चाहिए (xib समाधान भी ठीक है, लेकिन यदि आप केवल एक काली स्क्रीन का उपयोग कर रहे हैं तो बेमानी)।

rootView.loadingView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
rootView.loadingView.backgroundColor = [UIColor blackColor];
rootView.loadingViewFadeDelay = 0.5; // measured in seconds

नोट: 1 ViewFadeDelay लोड करने के लिए काफी बड़ा मूल्य है क्योंकि इसका मतलब है कि उपयोगकर्ताओं को ऐप शुरू होने से पहले एक अतिरिक्त सेकंड इंतजार करना होगा। मेरा सुझाव है कि इसे सबसे कम मूल्य पर सेट करें जिससे आप दूर हो सकते हैं (0.25 डिफ़ॉल्ट है, जो अधिकांश ऐप्स के लिए ठीक है)।

हां मैंने पाया कि 1 थोड़ा लंबा था और मैं अपने एक ऐप पर ओपनिंग एनिमेशन को मिस कर रहा था। मुझे 0.1 भी ठीक लगा। आपकी सहायता के लिए धन्यवाद।

मैं @ हसन 6 से सहमत हूं। यह निश्चित रूप से थोड़ा अजीब लगता है कि उपयोगकर्ताओं को तुरंत ऑब्जेक्टिव-सी ( AppDelegate.m ) में गोता लगाना पड़ता है और रिएक्ट नेटिव ऐप बनाने पर तुरंत कुछ कोड को ट्वीक करना पड़ता है। क्या रिएक्ट नेटिव के लिए पहले से ही बेक किए गए इस फिक्स के साथ कोड जनरेट करना संभव नहीं होगा? या जावास्क्रिप्ट (या एक घोषणात्मक कॉन्फ़िगरेशन भाषा) से स्क्रीन कॉन्फ़िगरेशन प्रारंभ करने के लिए एक और सार समाधान पेश करने के लिए?

@johanatan विडंबना यह है कि प्रतिक्रिया मूल निवासी के साथ दो सबसे बड़ी और सबसे लंबी स्थायी समस्याएं किसी प्रकार की सफेद फ्लैश के साथ करना है। यह त्रुटि और छवियों पर सफेद फ्लैश।

जब मैं अपने लॉन्चस्क्रीन xib का उपयोग करता हूं तो यह बड़ा हो जाता है, कोई समाधान?

क्या बड़ा होता है?

UIView *loading = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" मालिक:स्वयं विकल्प: शून्य ] obje ctAtIndex:0 ];
rootView.loadingView = लोड हो रहा है;

लोडिंग UI दृश्य, यह आकार बदलने के लिए प्रतीत नहीं होता है, यह मेरी स्प्लैश स्क्रीन के समान है जो कि मेरी LaunchScreen.xib है

मैं आकार वर्गों और बाधाओं का उपयोग कर रहा हूँ BTW

@akoshdee यह सही है - आपको स्क्रीन आकार से मेल खाने के लिए दृश्य आकार को स्पष्ट रूप से सेट करने की आवश्यकता होगी। का उपयोग करते हुए

loading.frame = [UIScreen mainScreen].bounds;

पहले से ही फ्रेम बदल दिया है लेकिन फिर भी काम नहीं करता है

एंड्रॉइड के लिए कोई समाधान？

@ajoshdee loadingView.frame = [UIScreen mainScreen].bounds; असाइनमेंट मेरे काम नहीं आया लेकिन इसने किया: loadingView.frame = self.window.bounds;

मैं यही उपयोग कर रहा हूं:

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

नमस्कार! मैं दृश्य प्रतिक्रिया करने के लिए रंग निर्धारित करता हूं:
rootViewController.view.backgroundColor = [UIColor blackColor];

@py110 @ajwhite

एंड्रॉइड समाधान मूर्खतापूर्ण रूप से सरल है कि इसे समझने में कितना समय लगा।

इसमें 3-स्टेज स्प्लैश स्क्रीन शामिल है।

https://github.com/mehcode/rn-splash-screen/issues/1

मेरे पास एक समान कार्यान्वयन था @mehcode - मुझे वह पसंद है जो आपको यहां मिला है। मैं आरएन इंस्टेंस मैनेजर तक पहुंचने का एक तरीका ढूंढ रहा हूं, यह नहीं देखा कि getReactNativeHost() कॉल था, यह जानना बहुत अच्छा था।

मैंने निम्नलिखित किया था, (इसके बारे में खुश नहीं)

1. SplashActivity ऐप खुलने पर शुरू हुआ
2. तुरंत MainActivity और finish() खोलता है
3. MainActivity एक झंडे के साथ SplashActivity MainActivity शुरू करता है जो दर्शाता है कि यह "अग्रभूमि मोड" में है जैसे ही यह MainActivity ऊपर स्पलैश दिखाना शुरू करता है। थोड़े समय के बाद, SplashActivity ऐप का खुलासा करते हुए खुद को बंद कर देता है।

@ajwhite

धन्यवाद। प्रभाव बहुत चिकना है।

मेरी वर्तमान परियोजनाओं में मैंने सचमुच ReactActivity को अपने कोडबेस में कॉपी किया है और निजी के बजाय mReactInstanceMangager संरक्षित किया है।

प्रतिक्रिया-मूल 0.29 में (टिप्पणी में कहना चाहिए था) प्रतिक्रिया मूल टीम ने हमें इसमें शामिल होने के लिए एक सार्वजनिक विधि getReactNativeHost() दी।

वह ReactNativeHost कंटेनर एक शानदार कदम है। यह वही समस्या है जिसमें मैं भाग गया - मुख्य गतिविधि से जीवन चक्र में शामिल होने में सक्षम नहीं है।

रुचि के लिए संदर्भ: https://github.com/facebook/react-native/commit/49f20f41546e3ba8e7fe43c84c4c701684d0434d#diff -1346852de0c7f8466a36d42de50ec808R20

इसमें जोड़ने के लिए...

एक समाधान जो मैंने पाया वह था rootView एक पृष्ठभूमि रंग असाइन करना लेकिन [UIColor colorWithPatternImage:img] ।

यह सुनिश्चित करने के लिए किसी भी देरी की आवश्यकता नहीं है कि यह पूरी तरह से लोड होने तक दृश्यमान रहता है।

एक पूर्ण स्निपेट (और @ डिवाइन-मल्टीमीडिया द्वारा प्रदान की गई टिप का उपयोग करके) जो डिवाइस के लिए वांछित लॉन्च इमेज ढूंढेगा, नीचे है:

NSArray *allPngImageNames = [[NSBundle mainBundle] pathsForResourcesOfType:@"png" inDirectory:nil];
  for (NSString *imgName in allPngImageNames){
    if ([imgName containsString:@"LaunchImage"]){
      UIImage *img = [UIImage imageNamed:imgName];

      if (img.scale == [UIScreen mainScreen].scale && CGSizeEqualToSize(img.size, [UIScreen mainScreen].bounds.size)) {
        rootView.backgroundColor = [UIColor colorWithPatternImage:img];
      }
  }
}

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

मैंने इस बातचीत में लगभग हर कोड ब्लॉक को बिना किसी मौके के आजमाया है लेकिन इसने पूरी तरह से काम किया है।
धन्यवाद @dbonner1987 !

एंड्रॉइड के लिए कोई समाधान?

@ pareekkhushboo77 https://github.com/mehcode/rn-splash-screen/blob/master/docs/android.md

@sercanov @ dbonner1987 यह जावास्क्रिप्ट लॉन्च स्क्रीन करने के लिए आईओएस के लिए ऊपर वर्णित दृष्टिकोण का भी उपयोग करता है।

@arnemart धन्यवाद, अभी भी थोड़े आरएन 0.30.0 में काम करता है। मुझे अपना ऐप हटाना पड़ा और इसे फिर से इंस्टॉल करना पड़ा। इसमें पहली बार सफेद फ्लैश था, लेकिन उसके बाद कोई नहीं।

@nicklockwood क्या वास्तविक जावास्क्रिप्ट लोड होने पर यह जानने के लिए मैं किसी प्रकार का कॉलबैक उपयोग कर सकता हूं। इसका कारण यह है कि जब मेरा ऐप पृष्ठों के बीच नेविगेट कर रहा होता है तो वहां कुछ पारदर्शिता होती है जहां दृश्य की पृष्ठभूमि में rootView.backgroundColor दिखाई देता है। मुझे दराज के खुले संक्रमण के दौरान उपयोग किए जा रहे दराज प्लगइन के साथ भी इसी तरह की समस्या मिलती है।
तो मैं कुछ ऐसा करना चाहता हूं:

• लोड करने की प्रक्रिया के दौरान @dbonner1987 के दृष्टिकोण का उपयोग करके, लॉन्चर छवि के लिए rootView पृष्ठभूमि रंग सेट करें।
• जब जावास्क्रिप्ट लोड हो रहा है और पहला नेविगेशन मार्ग शुरू होता है (या उन पंक्तियों के साथ कुछ)
• रूट व्यू बैकग्राउंड कलर को वापस सफेद पर सेट करें।

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

@ UKDeveloper99 कृपया उस दस्तावेज़ का संदर्भ लें जिसे मैंने ऊपर दो बार लिंक किया है। ऐसी कॉलबैक उपलब्ध है।

https://github.com/mehcode/rn-splash-screen/blob/master/docs/android.md

@mehcode यह एकदम सही है धन्यवाद !!

किसी के पास LaunchScreen.storyboard को कार्यान्वित करने के लिए सुझाव हैं जो एक बार बंडल लोड हो जाने पर बंद हो जाता है? वर्तमान में यह एक निश्चित समय के लिए प्रदर्शित होता है, फिर मुझे सफेद स्क्रीन दिखाई देती है और फिर एप्लिकेशन आरएन 34.1 xcode 8 लोड करता है

@ajoshdee मेरे पास ऐसे ही मुद्दे थे जहां दृश्य स्क्रीन से काफी बड़ा था। सुनिश्चित नहीं है कि यह संबंधित है, लेकिन मैं अपने LaunchScreen.xib में AutoLayout का उपयोग कर रहा था।

मुझे भी सेट करने की ज़रूरत थी

launchScreenView.autoresizingMask = UIViewAutoresizingNone;

इसे ठीक से आकार देने के लिए।

तो https://github.com/facebook/react-native/issues/1402#issuecomment -166963438 ऊपर की अतिरिक्त लाइन के साथ

आप appdelegate.m में इस लाइन को बदलने के लिए लॉन्च रंग भी अपडेट कर सकते हैं:

rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];

इस लाइन से:
rootView.backgroundColor = [[UIColor alloc] initWithRed:0.94 green:0.90 blue:0.89 alpha:1.0];

और इस वेबसाइट के साथ मनचाहा रंग

क्या किसी ने इसे Android पर हल करने में कामयाबी हासिल की?

यहां आईओएस और एंड्रॉइड दोनों के लिए एक समाधान है: https://github.com/mehcode/rn-splash-screen ।
मैंने अपने app.tsx (प्रवेश बिंदु) के रेंडर फ़ंक्शन में स्प्लैश स्क्रीन को छुपाया और मेरे सभी https अनुरोध किए जाने तक वही छवि दिखाई।

मेरा कोड:
```
सार्वजनिक प्रस्तुत करना ()
{
स्प्लैशस्क्रीन। छुपाएं ();

   //after everything has finished loading - show my app.
   if (this.state.isFinishedloading) 
    {
        return (
            <this.navigator screenProps={{ ...providers }} />
        );
    }

  // Until then show the same image as the splash screen with an ActivityIndicator.
    return (
       <View style={{ flex: 1 }}>
          <Image style={styles.image} source={require('../assets/img/splash.png')} >
            <ActivityIndicator  style={styles.indicator} color="#fff"></ActivityIndicator>
          </Image>
       </View>
    );

}

```

अगर मैं स्प्लैश स्क्रीन के लिए स्टोरीबोर्ड का उपयोग कर रहा हूं तो क्या इसका कोई समाधान है? मेरे पास अब प्रत्येक आयाम के लिए मेरी लॉन्च स्क्रीन छवियां नहीं हैं।

AppDelegate.m अंदर iOS के लिए रिएक्ट नेटिव में अपने RGB कलर कोड को तदनुसार लिखकर निम्नलिखित लाइन को बदलें:

rootView.backgroundColor = [[UIColor alloc] initWithRed:52.0f/255.0f green:73.0f/255.0f blue:94.0f/255.0f alpha:1];

RED के लिए संख्या 52 . बदलें
ग्रीन के लिए संख्या 73 . बदलें
BLUE के लिए 94 नंबर बदलें

_नोट: मैं प्रतिक्रिया देशी v0.51.0_ का उपयोग कर रहा हूँ

क्या Android के लिए अभी भी कोई समाधान नहीं है?

@otoinsa उपरोक्त उत्तर देखें https://github.com/facebook/react-native/issues/1402#issuecomment -339336380 @neomib द्वारा। कुछ अन्य स्प्लैश स्क्रीन लाइब्रेरी हैं जो ठीक वैसे ही काम करती हैं जैसे https://github.com/crazycodeboy/react-native-splash-screen।

लॉन्चस्क्रीन के रूप में उपयोग किए जाने वाले स्टोरीबोर्ड पर कोई सुझाव?

मेरा दृष्टिकोण इस तरह था (लेकिन ऐप लॉन्च के समय क्रैश हो जाता है)

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    NSURL *jsCodeLocation;
    [Fabric with:@[[Crashlytics class]]];

    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                moduleName:@"MyApp"
                                initialProperties:nil
                                launchOptions:launchOptions];
    rootView.backgroundColor = [UIColor clearColor];

    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

//  UIViewController *rootViewController = [UIViewController new];

  UIStoryboard *storyboard = self.window.rootViewController.storyboard;
  UIViewController *rootViewController = [storyboard instantiateViewControllerWithIdentifier:@"the_storyboard_id"];

    rootViewController.view = rootView;
    self.window.rootViewController = rootViewController;
    [self.window makeKeyAndVisible];
    return YES;
}

ऐप निम्न त्रुटि के साथ क्रैश हो जाता है:

2018-03-30 11:21:04.995601+0530 MyApp[6119:101967] Running application MyApp ({
    initialProps =     {
    };
    rootTag = 1;
})
2018-03-30 11:21:05.014109+0530 MyApp[6119:101967] *** Assertion failure in -[UIApplication _runWithMainScene:transitionContext:completion:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3698.33.6/UIApplication.m:3529
2018-03-30 11:21:05.090174+0530 MyApp[6119:101967] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Application windows are expected to have a root view controller at the end of application launch'
*** First throw call stack:
(
    0   CoreFoundation                      0x000000011170f12b __exceptionPreprocess + 171
    1   libobjc.A.dylib                     0x0000000110001f41 objc_exception_throw + 48
    2   CoreFoundation                      0x00000001117142f2 +[NSException raise:format:arguments:] + 98
    3   Foundation                          0x000000010faa2d69 -[NSAssertionHandler handleFailureInMethod:object:file:lineNumber:description:] + 193
    4   UIKit                               0x000000010d838051 -[UIApplication _runWithMainScene:transitionContext:completion:] + 3102
    5   UIKit                               0x000000010dc016f8 __111-[__UICanvasLifecycleMonitor_Compatability _scheduleFirstCommitForScene:transition:firstActivation:completion:]_block_invoke + 924
    6   UIKit                               0x000000010dfd74c8 +[_UICanvas _enqueuePostSettingUpdateTransactionBlock:] + 153
    7   UIKit                               0x000000010dc012f1 -

धन्यवाद।

जगह ले ली

UIStoryboard *storyboard = self.window.rootViewController.storyboard;

साथ

UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];

अब ऐप शुरू होता है लेकिन मुझे ब्लैक बैकग्राउंड मिलता है।

या आप https://github.com/crazycodeboy/react-native-splash-screen का उपयोग कर सकते हैं यह बहुत आसान है :)