React NativeのiOS起動画面
Reactネイティブアプリで作業しており、起動画面のカスタマイズを設定しようとしていますが、できません。
React NativeはデフォルトでLaunchScreen.xibを作成するため、Images.xcassets内にLaunchImageを作成しました。
また、オプションの[アプリアイコンと画像の起動]の下にある[画面ファイルの起動]を変更する必要があることも読みました。
それを行うと、起動画面が完全に黒くなり、アプリをロードすると、上部と下部の両方の黒いフレームが表示されます。
そのため、Reactネイティブプロジェクトで起動画面を設定するために何をする必要があるかわかりません。
誰かがそれらのトラブルで私を助けてくれれば幸いです。
前もって感謝します。
このスレッドの助けを借りて、この問題を解決することができました： iOSアプリケーションに（Images.xcassetsを使用して）画像が表示されない
だから、他の人を助けることができるなら、それを深く説明するつもりです。
最初に、特定の画像を作成する必要があります。そのために使用したのは、このテンプレートと自動ジェネレーターを備えたこのWebページでした。 TiCons
画像をダウンロードするときに、assets/iphoneフォルダー内の画像を取得しましたが、これらの画像のみを取得しました。
- [email protected]（640x960）
- [email protected]（640x1136）
- [email protected]（750x1334）
- [email protected]（1242x2208）
- [email protected]（2208x1242）
また、同じフォルダ内にこのContents.jsonファイルが必要です。友人から入手しました
{
"images": [
{
"extent": "full-screen",
"idiom": "iphone",
"filename": "[email protected]",
"minimum-system-version": "7.0",
"orientation": "portrait",
"scale": "2x",
"subtype": "retina4"
},
{
"extent": "full-screen",
"idiom": "iphone",
"filename": "[email protected]",
"minimum-system-version": "8.0",
"orientation": "portrait",
"scale": "2x",
"subtype": "667h"
},
{
"extent": "full-screen",
"idiom": "iphone",
"filename": "[email protected]",
"minimum-system-version": "8.0",
"orientation": "landscape",
"scale": "3x",
"subtype": "736h"
},
{
"extent": "full-screen",
"idiom": "iphone",
"filename": "[email protected]",
"minimum-system-version": "8.0",
"orientation": "portrait",
"scale": "3x",
"subtype": "736h"
},
{
"extent": "full-screen",
"idiom": "iphone",
"filename": "[email protected]",
"minimum-system-version": "7.0",
"orientation": "portrait",
"scale": "2x"
}
],
"info": {
"version": 1,
"author": "xcode"
}
}
そのため、この時点でLaunchImage.launchimageというフォルダーを作成しましたImages.xcassetsReact Nativeプロジェクト内のフォルダーに画像とContents.jsonファイルを保存します。
秒、Xcodeおよび「一般」設定でプロジェクトを開く必要があります。「アプリアイコンと起動Images "オプション（Launch Screen File）を空のままにする必要があります（LaunchScreen.xibプロジェクト内のファイル）、「アセットカタログを使用」をクリックその後。モーダルが開き、Migrateカタログを選択しますImages
これで、「Launch Images Source」セレクターで、前に作成したフォルダーLaunchImage（画像があるもの）：
Brand Assetsの代わりにこれを選択し、Brand Assetsフォルダーを削除できます。
この時点で、カスタム起動画像を使用してReactネイティブアプリケーションを実行できます。
おそらく簡単なタスクには少し複雑に思えますが、それについて多くのことを読んだ後、これがスプラッシュ画像を機能させる唯一の方法であったため、コミュニティと共有したいと考えました。
シミュレーターからアプリを必ず削除してください。次に、プロジェクトをクリーンアップします。
React-nativeを使用して起動画面またはメインアイコンを適用するには、 generator-rn-toolbox をお勧めします。 cliを使用して、react-nativeとして使用する方がよりシンプルで簡単です。
- XCodeを開く必要はありません。
- さまざまな解像度の画像ファイルを大量に作成する必要はありません。
- いつでも1行を使用して起動画面を変更できます。
必要条件
- ノード> = 6
- 1つのsquare画像またはpsdファイルのサイズが2208x2208pxを超える起動画面（スプラッシュ画面）の解像度
- ポジティブマインド;）
インストール
- Generator-rn-toolboxをインストールしてください
npm install -g yo generator-rn-toolbox- Imagemagickをインストールする
brew install imagemagick IOSにスプラッシュスクリーンを適用する
yo rn-toolbox:assets --splash YOURIMAGE.png --iosまたはAndroid
yo rn-toolbox:assets --splash YOURIMAGE.png --Android
それで全部です。 :)
新しい起動画面を作成する方法のソリューションを含むSOで、これらの回答をよく見てきました。少し考えてみましょう。
新しいリアクションネイティブプロジェクトを作成するとき、起動画面には何が表示されますか？
> Facebookのデフォルトの起動画面
それで私は考えました
彼らは
LaunchScreen.xibを作成しました
これには理由があるに違いないと思います。だから私はtheLaunchScreen.xibに入り、デフォルトのテキスト「React Native ...」またはそれが言ったことを変更しました。アプリをもう一度実行して、起動画面に編集内容が反映されていることを確認しました。
ソリューション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をドラッグするか、好きなように編集します。
それで終わりです。ソリューションをクリーニングする必要さえなく、再構築するだけです。
ちょうどこれを経て、御treat走になります。私が発見した唯一の障害は、シミュレーターのコンテンツをクリアしないことです。新しい起動画面が機能しないことがわかった場合は、シミュレーションを開いて次の手順に進む必要があります。
シミュレーター>コンテンツと設定をリセット
そのシミュレーター内で筋金入りのキャッシングが行われている必要がありますが、それが完了したら、再実行するとアプリが表示されます。 Xcodeシミュレーターと反応ネイティブシミュレーターの両方でこれを行うようにしてください！
[スクリーンファイルの起動]の選択が空であることを確認します。 
スプラッシュスクリーンをReactネイティブアプリケーションに追加する場合は、プロセスに従ってください。結果はすべてあなたのものになります。
STEP：1最初に、splashImageResourceフォルダーを作成し、スプラッシュ画像を含むlaunchScreen.xibファイルを追加しました。
STEP：2subviewsタグ内に記述されているコードを変更します。 このcode<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>で
STEP：3Xcodeでアプリを開く必要があります。次に手順を示します。
a）プロジェクトフォルダに移動します
b）iosフォルダーを開きます
c）拡張子が.xcodeprojのファイルに移動します。私の場合はsplasScreenTutorial.xcodeprojです。
d）Xcodeでこのファイルを開きます。
e）launchScreen.xibファイルを削除します。
f）splashScreenTutorialフォルダーをクリックし、「ターゲット」セクションに移動します
g）Xcodeの左上隅にある[一般]タブをクリックし、[アプリアイコン]および[画像の起動]までスクロールします。
h）[Launch Images Source]に移動して、[Use Asset Catalog]をクリックします。移行をクリックします。
i）Launch Screen FileからLaunchScreenというテキストを削除します。
j）プロジェクトフォルダーに戻り、Images.xcassetsファイルを開きます。 AppIconとLaunchImageが表示されます。
k）次に、LaunchImageをクリックし、最後に、サイズの異なるスプラッシュスクリーンイメージをLaunch Imageボックスにドラッグします。
スプラッシュ画面のテストa）変更を確認するには、最初にアプリを実行した場合、シミュレーターからアプリを削除する必要があります。
b）アプリを削除するには、シミュレーターバーの[ハードウェア]メニューをクリックして[ホーム]に移動します。
c）削除する特定のアプリアイコンをタップアンドホールドし、アイコンのX記号をクリックします。
d）react-native run-iosを使用してアプリを再度実行します
上記のソリューションを実行すると、アプリがスプラッシュスクリーンで停止するので、iosにカスタムスプラッシュスクリーンを追加するために次の7つのステップを実行しました
- Xcodeを開き、プロジェクト内の
LaunchScreen.xibファイルを見つけます（これは、iosでデフォルトで表示される画面であることに注意してください） - 画面上のテキストを削除/編集するには、テキストをクリックして、必要に応じて必要な変更を行います。
- 背景色を変更するには、右側のサイドバーで次のアイコンを見つけて、一番上、左から4番目の小さなアイコンボタンをクリックします（ホバーすると、「属性インスペクターを表示」と表示されます）
- 背景色を変更する方法がわかったので、スプラッシュ画面に画像を追加し、次のボタンをクリックして、リストから画像ビューを選択し、スプラッシュ画面の好きな場所にドラッグして配置します。
次に、
Images.xcassetsに画像を追加して、LaunchScreen.xibで参照してImages.xcassetsに移動できるようにする必要があります。 [+]ボタンに続いて[import]をクリックし、スプラッシュ画面に表示する画像を追加します。AppIconの下に、画像ファイル名が表示されます。これは、LaunchScreen.xibで参照するために使用する名前ですここで、
LaunchScreen.xibファイルに追加した画像を参照する必要があるので、LaunchScreen.xibに戻って、前に追加したimage viewをクリックします。右側の隅に多数のオプションが表示されます。imageという最初のアイコンをクリックして、手順5でインポートした画像を選択します
- プロジェクトをクリーンアップして
react-native run-iosを実行すると、変更が表示されるはずです。
既存の起動画面.xibファイルを使用する場合は、Reactネイティブが最初にセットアップされていますが、独自のロゴと背景色を使用します（Reactネイティブのデフォルトテキストはありません） 、こちらの手順に従ってください： https://medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec 。
XCode 10.1とreact-native 59.2については、追加の手順afterを経て、画像、ストーリーボード、1つのユニバーサル画像を追加する必要がありました。
- 画像を右クリックし、
Show in Finderをクリックしてから、Contents.jsonファイルを編集します - 2xおよび3xセクションに画像を追加します
- 「ルーラー」メニューを使用して、起動画面のストーリーボードに移動します
- inside赤い矢印のみがオンになり、outsidered矢印がオンにならないことを確認してください。矢
- [セーフエリア相対マージン]をクリックします
これで、すべてのサイズのiPhoneで画像が中央に配置されるはずです（ポートレートでテスト済み）。
Reactの助けを借りて起動画面を作成する場合、iOS XcodeのLaunchScreen.xibファイルに同じものを追加する必要があります。これは、スクリーンショットを取得し、画像に画像として追加できます。 xcassets。
LaunchScreenを開き、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の起動画面を機能させる前に、受け入れられた答えからもう1つのステップが欠落しています。
プロジェクトフォルダーでInfo.plistを開き、「メインnibファイルベース名」キーを削除します。その後、再構築し、うまくいけば問題が解決します。