React-native: 【初期化】起動画面白点滅

@ alinz-これは次のリリースで修正されます： //github.com/tadeuzagallo/react-native/commit/8d992262ed2dcf0d46e8d22e605764902c33012f

@alinzはhttps://www.dropbox.com/s/xq522ywqsd16vqe/example.mov?dl=0のように見えますか

@liubkoはい、これはまさに私が取り除きたいものです。 まだパッチを適用していませんが、今夜適用します。

@brentvatne ：そのパッチがこの問題をどのように修正するかわかりません（私が盲目/愚かである場合は許してください:-)。問題は、アプリが起動してからReactがまだ機能している間に時間がかかることです。理想的には、LaunchScreenは、「完全にネイティブな」アプリの場合と同様に、Reactが終了して完全にレンダリングされるまで表示されます。

@ oblador-ああ、これにより、「ちらつき」の瞬間に起動画面と同じ背景色を使用することで、よりスムーズに移行できます。

@ vjeux -FBアプリでこの問題をどのように@nicklockwood

この問題には（別の）修正もあります。 RCTRootViewの新しいloadingViewプロパティを使用し、起動画像を表示するフルスクリーン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;
}

@nicklockwoodが説明したこと

@ide私は

@ alinz 、 @ ideは、launchscreen xibを使用してRCTRootViewloadingViewを設定することを意味すると思います（これは手動で行う必要があります）。 （まだ）それを行うための自動サポートはありません。

明確にするために、iOSはReactがロードを開始した時点で起動画面を非表示にします。 空白の画面が表示されないようにするには、RCTRootViewのloadingViewと同じビューを手動で表示して、起動画面が表示される時間を延長する必要があります。

明確化してくれた@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。

@ dvine-マルチメディアは、上記で提供したコードスニペットよりもうまく機能しますか？

@myusuf3

@nicklockwood実際、彼らはほとんど同じことをします。 私がこれを調べ始めたとき、私はおそらく、xcodeの経験がまったくないために、あなたのスニップをどうするかを理解していませんでした。 やっと何をすべきか理解できるようになったとき、あなたがすでにそこにいたことに気づかなかった。 それに加えて、私は個人的に「私の」ソリューションがもう少し読みやすいと感じています。 しかし、その純粋な美学。

@nicklockwoodコードを試しましたが、まだ白いフラッシュが表示されます。 ロードビューとして設定する起動イメージを作成しました。 起動イメージはlaunchScreen.xibと同じです。

これは私たちのアプリのリリースを保持している唯一のものです。 これについての助けに本当に感謝します。

起動画像が非表示になった後にフラッシュが表示されますか、それとも起動画像が表示されませんか？ （これは見ただけでは判断が難しい場合があります。念のため、起動画像を一時的に赤い長方形のようなものに変更してください）。

@nicklockwoodxibファイルとlaunchScreenイメージの間で色を変更しようとしました。 私はまだその閃光を見ていました。

私のコードは次のようになります：

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

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

最後の2行のloadingViewFadeDelayとdurationを削除しましたが、問題は解決したようです。 フラッシュが表示されません。 スムーズな移行。

@ 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;

Ok。 深く掘り下げると、フラッシュはおそらく非同期ストアから値がロードされるまで私のアプリは何もレンダリングしないようです。

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

loadViewは、jsがレンダリングを終了したと見なし、loadingViewを非表示にすると思います。 ただし、jsはそのreturn nullでレンダリングを終了しました

@ nicklockwood @ alinz私はただ空中で撮影しています。 実際の理由ではないかもしれません。 皆さんはどう思いますか。

また、loadingViewFadeDelayなどの値を0.30以上に設定すると、遷移が非常にスムーズになることに気づきました。 デフォルトは0.25で、これもスムーズです。

loadFadeDelayの目的は、アプリがすぐに何もレンダリングしないシナリオを正確にカバーすることであるため、正しく使用しています。

ただし、デフォルトが変更された場合に備えて、loadingViewFadeDelayを明示的に設定することを検討することをお勧めします。また、ロードに時間がかかる場合に備えて、サポートする最も遅いデバイスでテストするようにしてください。

@nicklockwoodソリューションが好きですが、予測できないネットワーク遅延を考慮する必要があります。

もう1つの解決策は、コンポーネントの状態をある種のデフォルト値に設定して、ある種のロードダイアログを表示するようにコンポーネントに指示することです。

涼しい。 私は解決策があると思います。

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％保証できる方法はありません。 何かが起こっていることを示すために、常にユーザーに何かを表示する必要がありますが、表示する準備ができていません。 これは単なる提案です。

同意しました。 loadViewの目的は、標準のiOS読み込み画像と同様に、すべてのアプリを表示する準備ができているのが読み込みスピナーであっても、アプリが何かを表示する準備ができるまでカバーすることです。

とは言うものの、私がそれを画像ではなくビューにした理由は、あなたがそれを非静的にすることができるようにするためです。 必要に応じて、UIActivityIndi​​catorViewをloadingViewに追加できます。

打ち上げ画像はどのように配置できますか？ フレームの原点を調整してみましたが、どの原点を使用しても常に中央に配置されます。 上に配置して左から右に伸ばしたい小さなトップバーの画像があります。

これは私が持っているものです：

  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_であるため、imageViewを別のコンテナビュー内に配置し、コンテナを起動ビューとして使用できます。

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のように見えるRootViewによって自動的に中央に配置され

@Intellicodeはい。

@ dvine-multimediaのコードを使用してiphone4sで本番環境でアプリを壊しただけです。 修正は、ifを中断することです。

containsStringがiOS 7で利用できないため、もう1つクラッシュします。

@nicklockwoodは、ビューの読み込みによって可能な限り最高の解像度が自動的に選択されるかどうか疑問に思っていますか？

LoadingViewは画像をまったく選択せず、渡したものを使用するだけです。ただし、起動イネージを見つけるために上記で投稿したスニペットは、デバイスの正しい解像度を選択します。

ただし、スニペットは正しいサイズのものを選択していません。 そのための修正はありますか？

私のソリューションまたはdvineのソリューションを使用していましたか？ どのiPhoneモデルを使用していますか？ ポートレートまたはランドスケープ？

dvineを使用すると、正しい次元が選択されます。 私たちの解決策では、画像の周りに黒いスペースがあります。 黒いスペースはcozだと思いますが、間違ったサイズの画像を取得します。

私はiPhone6を使用しています。ポートレート。

これはそれがどのように見えるかです。 白い背景に注意してください。

次のコードを使用します。

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つ星から私たちを救ったでしょう。 はは。 心配ない。 世界を救うための新しいバージョンが常にあります。 :)

ところで、この問題を閉じますか？

詳細については十分に議論されているので、このチケットを閉じます。いくつかの良い解決策があります。

LaunchScreen xibを使用している人にこれを100％明確にするために、これを機能させるコードを次に示します。

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

これらの行をAppDelegate.mファイルのapplication didFinishLaunchingWithOptionsメソッドの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からのコメントと同様に、これらの行をAppDelegate.mファイルのapplication didFinishLaunchingWithOptionsメソッドの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のよう

これをデバッグすることをどのように勧めますか？

アプリがロードされるまで、iOSはlaunchScreen.xibをまったくロードしていないようです（その時点で、ReactはそれをloadingViewとして表示しています）。

たぶんそれはXcodeの設定エラーですか？ それともiOS9のバグですか？

デバイスで試しましたか、それともシミュレーターだけで試しましたか？

ありがとう@ nicklockwood-私はデバイスで問題を経験していました。 シミュレーターで実行すると完全に機能し、削除してデバイスで実行すると正常に機能します。 本当に奇妙です。 問題が再び発生した場合は、再度投稿します。

こんにちは@genexliu 、画像の「LaunchImage」セットをImages.xcassets/LaunchImage.launchimage/に追加しましたが、貼り付けたコードもLaunchScreen.storyboardもそれらを検出/使用できません（どちらもサイレントに失敗します）。 LaunchScreenストーリーボードは、背景色が表示されているので正しく読み込まれていますが、参照されている画像が表示されません。 何か案は？

また、XCodeから実行しているときの起動シーケンスは正常に見えますが、cmd行からnatal launchを実行しているときは、開始シーケンス/余分な白いフラッシュなどの追加の実行があるようです。

ストーリーボードでLaunchImageが見つからないという私の問題は、明らかにXCodeのバグでした。 起動設定を「アセットカタログを使用」に変更してから「ストーリーボードを使用」に戻すと、機能し始めました。 loadingViewFadeDelayは効果がないようであるため、 @ genexliuのコードが機能しているかどうかは不明です。

これが私のコードです：

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

それでも、ストーリーボードのLaunchImageの表示と最初のReact render間に遅延はありません。

@ "Images / LaunchImage"は私には正しく見えません。 おそらく@ "LaunchImage"です

ああ、おっと、そうだ。 あなたが正しい。 それは誤った貼り付けでした-私が試した順列の1つです（最初ではありません）。

また、上記の3か月前のコメントのサンプルコードを確認してください。さまざまなデバイスクラスの起動イメージファイルがたくさんあります。

ドー！ 君は正しかった。 LaunchImageに切り替えた後、現在は機能しています。 どうも！

誰かがAndroid用のこれに関するドキュメントを教えてもらえますか？

Androidの場合は+1

cc @dmmiller AndroidにloadingView機能はありますか？

こんにちは、私はこれと同じ問題に直面しています。ここにいくつかの解決策が投稿されているように見えますが、このコードをどこに置くべきかわかりません。 私の理解では、解決策はObjective-Cコードを変更することであり、React Native自体で実行できることではありません。 その場合、投稿されたコードはどこに行きますか？ xcodeプロジェクトルートのmain.mファイルにありますか？ ありがとう。

@CorpusCallosumコードは、RCTRootViewが設定されているAppDelegate.mファイルに配置する必要があります。

@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の値を設定してみてください（整数以外の値も設定できます）。

私のために働いて、みんなありがとう:)

launchscreen xibをloadingViewとして使用したい場合は、AppDelegate.mに挿入するコードを次に示します。

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

最後の行はオプションです。前述したように、アプリ自体に移動する前にloadingViewが留まる時間を設定します。

@ david-ありがとうございました！ 私はreactnativeのテストを始めて以来、これに取り組んできました。 👏

@ david-a、@ geriux ：LaunchScreen.xibにAspectFillコンテンツモードの背景画像があり、正しくスケーリングされていなかったため、 launchScreenView.frame = CGRectZero;も設定する必要がありました。 何度か試行錯誤して解決策にたどり着きましたが、何が原因かわかりません。

@BasitAliはい、申し訳ありませんが、それはより適切に文書化する必要があります。 ビューのサイズをゼロ以外に設定すると、画面の中央に配置されます。 ゼロに設定すると、画面に合わせて拡大縮小されます。

@ david-どうもありがとうございました！ コメントはボイラープレートに含めるか、少なくともメインのReactNativeドキュメントの一部にする必要があります。 この問題が2015年3月にクローズされた理由はわかりませんが、2016年2月のRN0.20にまだ存在していることは明らかです。

誰かがドキュメントのPRをしてくれるといいですね。

あなたたちのアドバイスは私を大いに助けてくれます（IOSでは完璧に動作しています）、Androidでこれを修正する方法を見つけた人はいますか？

これは助けになりますか？

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

@ weiyisheng 、Androidでは@bracoが提案したように、iOSで上記の修正とともにreact-native-splashscreenを使用しています。

@braco @BasitAliはい、役に立ちました。アプリで使用します。良いアイデアです。 みんなありがとう。

@BasitAli好奇心からiOSで使ってみませんか？

私のアプリケーションは、スプラッシュ画面からログイン画面にシームレスにアニメーション化されます（ロゴが上に移動し、ログインフィールドが飛び出します）。 rn-splashscreenプラグインがフェードアウトしますが、これは私のアニメーションとうまく調和しません。 他に選択肢がなかったので、Androidで使用する必要がありました。

@BasitAliこれは、react-native-splashscreenプラグインがrootView.loadingViewFadeDuration設定に従っているように見えます。ただし、接続後に設定すると、フェードが無効になります。

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

「事前にバンドルされたファイルから読み込んでいます」という上部の小さなメッセージを削除する方法はありますか？

@rclaiがリリースするスキームを設定

ああ！ ありがとう！

両方のプラットフォームのスプラッシュスクリーンに対応するネイティブソリューションはありますか？ 両方のプラットフォームの内部ファイルに入力すると、react-nativeを使用できなくなります。簡単な答えをお願いします。 ありがとう

@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をクリックし、[+]ボタンをクリックして、[アプリアイコンと起動画像]> [新しいiOS起動画像]を選択します。

@TeodorKolevエラーを修正するには、追加する必要があります

#import "RCTUtils.h"

AppDelegateで。

どうもありがとうございましたが、WebViewのURLが完全に読み込まれるまでスプラッシュ画面を表示したいのですが、現在はそのように機能していません。 尊敬！

@nicklockwoodこれに対する救済策はありますか？

これを修正するための現在の方法は何ですか？ 問題が発生してから1年と数か月が経ちましたが、実際に修正されるとは思えないので、現在の解決策は何かと思います。 どのファイルを変更する必要があり、どのコードを変更する必要がありますか？

編集：launchscreen.xibで黒い画面を使用していますが、アプリが完全に読み込まれる前に、途中で白に変わります。

@ hasen6この問題はすでに修正されていますが、開発者の側でいくつかの作業が必要です。

上記のコメントで述べたように、あなたが設定する必要がありますrootView.loadingView白い画面の代わりに表示し、調整するために、一部のコンテンツでrootView.loadingViewFadeDelayロードビューは、あなたの前に隠されていないことを確認するために、アプリの読み込みが完了しました。

黒い画面を表示したいだけの場合は、loadingViewを気にする必要はなく、 rootView.backgroundColorを黒に設定するだけですが、実験する必要があります。

rootView.backgroundColor = [UIColor clearColor];をrootView.backgroundColor = [UIColorblackColor]に変更しました; but it didn't make any difference. Doing a search in XCode for rootView.loadingView`は結果を返しませんでした。

@ hasen6白い色がどこから来ているのかを理解する必要があります-JSアプリ内に白いビューがあり、コンテンツが読み込まれる前にしばらく表示されている可能性があります。

loadingViewはRCTRootViewプロパティであり、おそらくAppDelegate内にインスタンスがあります。 実際のコードrootView.loadingViewは、自分で追加しない限り、Xcodeに表示されません。 使用方法の例を次に示します。

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

私のアプリはどこでも白ではありません。 起動画面が表示された後、すべてのアプリがロード時に同じ白い画面を表示するので、アプリに問題はないと確信しています。

だから私はそのコードをappdelegate.mに追加する必要がありますか？ それもうまくいきませんでした。 修正するのはほぼ不可能だと思います。そうしないと、開発者がまだ解決していない状態で1年が経過していなかったでしょう。 アプリの見栄えがいかに悪いかを考えると、明らかに解決すべきリストのトップになります。

FWIW、これが私がこの問題を解決する方法です。 私はLaunchScreen.xibとDavid-aのソリューションを使用しています：

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...]

そのコードをnicklockwoodのサンプルコードに置き換えると、白いフラッシュが返されます。

うわー！ わかりました。 grittathhに感謝します！

@grittathh @ hasen6ああ、

@ hasen6は、動作するはずのコードの修正バージョンです（xibソリューションも問題ありませんが、黒い画面を使用している場合は冗長です）。

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

注：1は、ユーザーがアプリを起動する前にさらに1秒待つ必要があることを意味するため、loadingViewFadeDelayの値は非常に大きくなります。 回避できる最小値に設定することをお勧めします（0.25がデフォルトであり、ほとんどのアプリで問題ありません）。

はい、1が少し長く、アプリの1つでオープニングアニメーションが欠落していることがわかりました。 0.1でも大丈夫だと思いました。 ご協力いただきありがとうございます。

@ hasen6に同意します。 ユーザーがすぐにObjective-C（ AppDelegate.m ）に飛び込んで、React Nativeアプリを生成したらすぐにコードを微調整しなければならないのは、確かに少し奇妙に思えます。 React Nativeが、この修正がすでに組み込まれているコードを生成することは可能ではないでしょうか？ または、JavaScript（または宣言型構成言語）からの開始画面構成のより抽象的なソリューションを導入するには？

@johanatan皮肉なことに、React Nativeの2つの最大かつ最も長く続く問題は、ある種の白いフラッシュに関係しています。 このエラーと画像の白い点滅。

LaunchScreen xibを使用すると、大きくなる傾向がありますが、解決策はありますか？

何が大きくなる傾向がありますか？

UIView * load = [[[NSBundle mainBundle] loadNibNamed：@ "LaunchScreen" owner：self options：nil ] obje ctAtIndex：0 ];
rootView.loadingView =読み込み中;

読み込み中のUIビュー、サイズが変更されていないようです。LaunchScreen.xibであるスプラッシュ画面と同じであると想定されます。

サイズクラスと制約を使用していますところで

正しい@ 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

Androidのソリューションは、それを理解するのにどれだけの時間がかかったかについて自分自身に悩まされるほど、ばかげて単純です。

これには、3段階のスプラッシュスクリーンが含まれます。

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

私は同様の実装@mehcodeを持っていました-私はあなたがここに持っているものが好きです。 RNインスタンスマネージャーにアクセスする方法を探していましたが、 getReactNativeHost()呼び出しがあったことはわかりません

私は次のことをしました（それについては満足していません）

1. SplashActivityはアプリが開いたときに開始されました
2. MainActivityとfinish()すぐに開きます
3. MainActivityは、 MainActivity上にスプラッシュが表示され始めるとすぐに、「フォアグラウンドモード」であることを示すフラグでSplashActivityを開始します。 しばらくすると、 SplashActivityが閉じて、アプリが表示されます。

@ajwhite

ありがとう。 効果は非常にスムーズです。

現在のプロジェクトでは、文字通りReactActivityコードベースにコピーし、 mReactInstanceMangagerをプライベートではなく保護しました。

react-native 0.29（コメントで言っているはずです）では、react Nativeチームは、それに入るためのパブリックメソッドgetReactNativeHost()を提供してくれました。

そのReactNativeHostコンテナは素晴らしい動きです。 これはまさに私が遭遇した問題です-MainActivityからライフサイクルにフックすることができません。

興味のある方への参照： https ：

これに追加するには...

私が見つけた解決策は、 rootViewに背景色を割り当て、 [UIColor colorWithPatternImage:img] 。

これは、完全にロードされるまで表示されたままになるようにするための遅延を必要としません。

デバイスに必要なLaunchImageを見つける完全なスニペット（および@ dvine-multimediaが提供するヒントを使用）は次のとおりです。

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];
      }
  }
}

LaunchImageは、react-nativeバンドルが完全にロードされるまで表示されたままになります。

私はこの会話のほぼすべてのコードブロックをチャンスなしで試しましたが、これは完全に機能しました。
ありがとう@ dbonner1987 ！

アンドロイドのための解決策はありますか？

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

@sercanov @ dbonner1987これは、iOSで上記のアプローチを使用して、javascriptの起動画面を実行します。

@arnemartありがとう、まだRN0.30.0で動作します。 アプリを削除して再インストールする必要がありました。 初めて白く点滅しましたが、その後はありませんでした。

@nicklockwood実際のJavaScriptがいつロードされるかを知るために使用できるコールバックのようなものはありますか。 これは、アプリがページ間を移動しているときに、ビューの背景にrootView.backgroundColorが表示される透明度があるためです。 ドロワーオープントランジション中に使用しているドロワープラグインでも同様の問題が発生します。
だから私は次のようなことをしたいと思います：

• ロードプロセス中に上記の@ dbonner1987のアプローチを使用して、rootViewの背景色をランチャー画像に設定します。
• javascriptの読み込みが完了し、最初のナビゲーションルートが開始されたとき（またはそれらの線に沿った何か）
• rootViewの背景色を白に戻します。

したがって、基本的に、ロードがいつ行われたかを知るためのコールバックが必要です。

@ UKDeveloper99上記でリンクしたドキュメントを数回参照してください。 利用可能なそのようなコールバックがあります。

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

@mehcodeそれは完璧な感謝です!!

バンドルがロードされるとオフになるLaunchScreen.storyboardを実装する方法について誰か提案がありますか？ 現在、一定時間表示された後、白い画面が表示され、アプリケーションがRN 34.1 xcode8をロードします。

@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でこれを解決するために管理しましたか？

iOSとAndroidの両方のソリューションは次のとおりです： https ：
app.tsx（エントリポイント）のレンダリング機能でスプラッシュ画面を非表示にし、すべてのhttpsリクエストが完了するまで同じ画像を表示しました。

私のコード：
`` `
public render（）
{{
SplashScreen.hide（）;

   //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のreact nativeで、それに応じてRGBカラーコードを記述して次の行を変更します。

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

REDの場合は、番号52を変更します
GREENの場合は番号73を変更します
青の場合は番号94を変更します

_注：私はreact nativev0.51.0を使用しています_

Android用のソリューションはまだありませんか？

@ otoinsa @ neomibによる上記の回答https://github.com/facebook/react-native/issues/1402#issuecomment-339336380を参照してhttps://github.com/crazycodeboy/react-native-splash-screenなどでも同様に機能するスプラッシュ画面ライブラリが他にもいくつかあり

LaunchScreenとして使用されるストーリーボードに関する提案はありますか？

私のアプローチはこのようなものでした（しかし、アプリは起動時にクラッシュします）

- (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を使用することもできます:)