React Nativeアプリを使用していて、起動画面のカスタマイズを設定しようとしていますが、設定できません。

React NativeはデフォルトでLaunchScreen.xibを作成するため、Images.xcassets内にLaunchImageを作成しました。

オプションの「アプリのアイコンと起動画像」の下にある「起動画面ファイル」を変更する必要があることも読みました。

これを実行すると、起動画面が真っ黒になり、アプリが読み込まれると、上部と下部の両方に黒いフレームが表示されます。

そのため、React Nativeプロジェクトで起動画面を設定するために何をしなければならないのかわかりません。

誰かがそれらのトラブルを手伝ってくれるなら、私は感謝します。

前もって感謝します。

私はこのスレッドの助けを借りて、問題を解決することができました： iOSアプリケーションに起動画像が表示されない（Images.xcassetsを使用）

他の人を助けることができるように、私はそれを深く説明するつもりです。

まず、特定の画像を作成する必要があります。私がそのために使用したのは、このテンプレートと自動ジェネレータを備えたこのWebページでした：TiCons

画像をダウンロードするときに、assets / iphoneフォルダー内の画像を取得しました。これらの画像のみを取得しました。

• Default@2x.png（640x960）
• デフォルト -568h@2x.png（640x1136）
• デフォルト -667h@2x.png（750x1334）
• Default-Portrait-736h@3x.png（1242x2208）
• Default-Landscape-736h@3x.png（2208x1242）

また、同じContents.jsonファイルが同じフォルダーに必要です。友人から入手しました。

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-568h@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-667h@2x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Landscape-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Portrait-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}

だから、この時点で私はと呼ばれるフォルダを作成LaunchImage.launchimage内部Images.xcassetsの私のネイティブプロジェクトを反応し、画像や保存フォルダをContents.jsonのその中のファイルを：

次に、プロジェクトをXcodeで開き、[全般]設定の[ アプリアイコンと起動画像 ]の下で[ 画面ファイルを起動 ]オプションを空のままにする必要があります（プロジェクト内のLaunchScreen.xibファイルを削除することもできます） ）、その後「Use Asset Catalog」をクリックします。モーダルが開き、カタログ画像を移行することを選択します

ここで、「Launch Images Source」セレクターで、前に作成したフォルダーLaunchImage（画像を含むフォルダー）を選択できます。

ブランドアセットの代わりにこれを選択すると、ブランドアセットフォルダを削除できます。

この時点で、カスタム起動イメージを使用してReact Nativeアプリケーションを実行できるようになります。

おそらく簡単なタスクでは少し複雑に見えるかもしれませんが、それについてよく読んだ後、これがスプラッシュ画像を機能させる唯一の方法だったので、コミュニティと共有したいと思いました。

必ずシミュレータからアプリを削除してください。次に、プロジェクトをクリーンアップします。

新しい起動画面を作成する方法のソリューションを含むSOでこれらの答えをよく見てきました。ちょっと考えてみましょう。

新しい反応ネイティブプロジェクトを作成すると、起動画面には何が表示されますか？

> Facebookのデフォルトの起動画面

それで私は考えさせられました、彼らはどうやってそれをしましたか？

彼らは LaunchScreen.xib

これには理由があるに違いないと思います。だから私はに入ったLaunchScreen.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か、ドラッグして編集するか、必要に応じて編集します。

それで終わりです。ソリューションをクリーンアップする必要はなく、再構築するだけです。

更新

generator-rn-toolbox廃止予定です。代わりにreact-native-makeを使用してください。

古い答え

私はお勧め発電-RN-ツールボックスを上使用して反応させ、ネイティブの起動画面やメインアイコンを適用するため。それは反応ネイティブとしてのcliを通してよりシンプルで使いやすいです。

• XCodeを開く必要はありません。
• さまざまな解像度の画像ファイルを大量に作成する必要はありません。
• いつでも1行のコマンドで起動画面を変更できます。

必要条件

• ノード> = 6
• 起動画面（スプラッシュ画面）の解像度が2208x2208 px を超える1つの正方形の画像またはpsdファイル
• ポジティブマインド;）

インストール

1. generator-rn-toolboxとyoをインストールします
2. npm install -g yo generator-rn-toolbox
3. imagemagickをインストールする brew install imagemagick

4. iOSでスプラッシュスクリーンを適用する

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

   またはAndroid

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

それで全部です。:)

ソース

ちょうどこれを経験し、御馳走を働かせます。私が発見した唯一の障害は、シミュレーターのコンテンツをクリアすることではありませんでした。新しい起動画面が機能しない場合は、シミュレーションを開いて次の手順に進む必要があります。

シミュレーター>コンテンツと設定をリセット

そのシミュレーター内でいくつかのハードコアキャッシングが行われている必要がありますが、それが完了したら、再実行するとアプリが表示されます。xcodeシミュレーターと反応ネイティブシミュレーターの両方でこれを実行してください。

「Launch Screen File」の選択が空であることを確認します。

このリンクに従ってください：

React Nativeアプリケーションにスプラッシュスクリーンを追加する場合は、プロセスに従ってください。結果はすべてあなた次第です。

STEP：1 まず、splashImageResourceフォルダーを作成し、スプラッシュ画像を含むlaunchScreen.xibファイルを追加しました。

STEP：2 subviewsタグ内に記述されているようにコードを変更します。このコードで<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

ステップ：3 アプリをXcodeで開く必要があります。次の手順に従います。

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）反応ネイティブのrun-iosを使用してアプリを再度実行します

スプラッシュスクリーンが表示されます

私にとっては上XCode 10.1とreact-native 59.2私は追加の手順を経る必要があった後、既に画像、ストーリーボードと1つのユニバーサルイメージを追加します。

• 画像を右クリックしてをクリックし、ファイルをShow in Finder編集しますContents.json
• 2xおよび3xセクションに画像を追加する
• 「ルーラー」メニューを使用して、起動画面のストーリーボードに移動します
• 確認してくださいだけで内部の赤い矢印は、上にない外部の赤い矢印が
• 「セーフエリア相対マージン」をクリックします

画像はすべてのサイズのiPhoneの中央に配置されます（縦向きでテスト済み）。

React Nativeで最初に設定した既存の起動画面.xibファイルを使用する場合は、独自のロゴと背景色を使用します（React Nativeのデフォルトテキストはありません）。手順は次のとおりです。https：// medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec。

Reactを使用して起動画面を作成する場合は、iOS XcodeのLaunchScreen.xibファイルに同じものを追加する必要があります。スクリーンショットを取得して、Images.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ファイルのベース名」キーを削除します。その後、再構築すれば、問題は解消されます。

上記のソリューションを実行したところ、アプリがスプラッシュ画面で動かなくなったため、次の7つのステップを実行して、iOSにカスタムスプラッシュ画面を追加しました。

1. Xcodeを開き、LaunchScreen.xibプロジェクト内のファイルを見つけます（これはiOSでデフォルトで表示される画面であることに注意してください）
2. 画面上のテキストを削除/編集するには、テキストをクリックして、必要に応じて必要な変更を行います。
3. 背景色を変更するには、右側のバーにある次のアイコンを見つけて、左から4番目の最上部にある小さなアイコンボタンをクリックします（ホバーすると、「属性インスペクターの表示」と表示されます）。

4. 背景色を変更する方法がわかったので、スプラッシュ画面に画像を追加して次のボタンをクリックし、リストから画像ビューを選択して、スプラッシュ画面のどこにでもドラッグして配置します。

5. gotoを実行するImages.xcassetsためにで参照できるように 、画像をに追加LaunchScreen.xibする必要がありImages.xcassetsます。+ボタンをクリックしてimportから、スプラッシュ画面に表示する画像を追加します。その下にAppIcon画像ファイル名が表示されます。これは、私たちが参照するために使用する名前ですLaunchScreen.xib

6. ここで、LaunchScreen.xibファイルに追加した画像を参照する必要があるため、前に追加した画像に戻ってLaunchScreen.xibクリックするimage viewと、右隅に多数のオプションが表示されます。最初のメッセージをクリックしてimage、ステップ5でインポートした画像を選択します。

7. プロジェクトをクリーンアップして実行するreact-native run-iosと、変更が表示されます。

起動画面の画像ソースを画像セットとして設定する必要があります。その後、LauncScreen.xibファイルを削除します。その後、プロジェクトでグローバル検索を実行し、LaunchScreen.xibへのすべての参照を削除します（プロジェクト全体を調べます。私は崇高なテキストエディターを使用しているため、cmd + shift + fです）。