2019年9月9日月曜日

react-nativeプロジェクトでSplash Screenの調整をしたい的なお話

  • このエントリーをはてなブックマークに追加

React Nativeでアプリを書いていると、スプラッシュスクリーンが終わって画面が表示されるまでに白のブランクスクリーンが一瞬出てきてしまう。
ちなみにExpoでも出てくるんだけどもExpoではSplashというAPIがあって、Splashスクリーンを閉じるタイミングを調整できたりする。
けどReact Nativeではreact-native-splash-screenなどのパッケージを入れないといけないんだけど、これがreact-native linkだけで済むならばいいんだけどそういうわけにもいかなかったりするわけで。
個人的にはなるべくXcodeはいじりたくないという信念があるんだけどこればかりはいかんせん難しかったり。

でもまぁデザイン次第ではあるんだけどどうにかこれを解決する方法を見つけた。
ということで今日はデザイン次第ではあるんだけどSplash Screenの調整をサクッとやる方法的なお話をば。

まずreact-native-splash-screenは使わない。
ではどうするかということではあるんだけど、Xcodeを開いてAppDelegate.mを編集する。
その中でrootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];というところがあるので、ここを調整するだけ。
ここの部分がjsバンドルの読み込みをしている画面に当たるわけで。
で、スプラッシュスクリーンのデザイン次第ということだけど、スプラッシュスクリーンを単色で作っているならばその色に合わせちゃいましょう的な。
そうすれば白い部分が出ることがないので、視覚的にはどうにかごまかせるんじゃないかと。
で、これにreact-navigationのswitchNavigatorを組み合わせて云々と工夫すればいいんじゃないかと。

でもあくまでこれは誤魔化すという方法ではあるのであまりオススメはできないかなと。
ネイティブ部分を触ることに抵抗がなければreact-native-splash-screenを入れるべきではあるかなと。
AppDelegateも大量にいじるわけではないし。
個人的には簡易的にやりたいからこういう方法でもいいかなと思っていたりする的なみたいな。

0 件のコメント:

コメントを投稿

Adsense