我正在使用React Native应用程序，并且试图设置自定义启动屏幕，但是我不能。

React Native默认情况下会创建一个LaunchScreen.xib，因此我在Images.xcassets内创建了一个LaunchImage：

我还读到我必须在选项中的“应用程序图标和启动图像”下修改“启动屏幕文件”：

完成此操作后，我的启动屏幕将变成全黑，并且在加载应用程序时，顶部和底部都有黑色框架：

所以我不知道我该怎么做才能在我的React Native项目中设置启动屏幕。

如果有人可以帮助我解决这些麻烦，我将不胜感激。

提前致谢。

借助以下线程，我能够解决此问题： 启动图像未显示在iOS应用程序中（使用Images.xcassets）

因此，我将对其进行深入解释，以防它可以帮助其他人。

首先，您需要创建某些图像。我为此使用的是此模板和带有自动生成器的网页：TiCons

下载图片时，我将它们放在了assets / iphone文件夹中，而我只获取了那些：

• Default@2x.png（640x960）
• 默认值568h@2x.png（640x1136）
• 默认值667h@2x.png（750x1334）
• 默认肖像736h@3x.png（1242x2208）
• 默认景观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"
  }
}

因此，在这一点上，我在React Native项目的Images.xcassets文件夹内创建了一个名为LaunchImage.launchimage的文件夹，并将图像和Contents.json文件保存在其中：

其次，您必须在Xcode中打开项目，并在“常规”设置下的“ 应用程序图标和启动图像 ”下，我们必须将“ 启动屏幕文件 ” 选项保留为空（也可以删除项目内的LaunchScreen.xib文件），然后单击“ 使用资产目录 ”。将打开一个模式，我们选择迁移目录图像

现在，在“ 启动图像源 ”选择器中，我们可以选择之前创建的文件夹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。

旧答案

我建议使用generator-rn-toolbox在react-native上应用启动屏幕或主图标。通过cli作为本机，它更简单易用。

• 不需要打开XCode。
• 无需为各种分辨率制作大量图像文件。
• 随时使用一行命令更改启动屏幕。

要求

• 节点> = 6
• 一个启动画面（启动画面）的正方形图像或psd文件，其分辨率大于2208x2208 px
• 积极的思想;）

安装

1. 安装generator-rn-toolbox并安装
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模拟器和react-native模拟器都执行此操作！

确保“启动屏幕文件”选择为空：

点击此链接：

如果您想在我的React Native应用程序中添加一个初始屏幕，请按照以下步骤进行操作，所有操作都将由您完成。

步骤：1 首先，我创建了splashImageResource文件夹，并添加了带有初始图像的launchScreen.xib文件。

步骤：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文件夹，然后转到TARGETS部分

g）单击Xco​​de左上角的“常规”选项卡，然后向下滚动到“应用程序图标”和“启动图像”

h）转到启动图像源，然后单击使用资产目录。单击迁移。

i）从启动屏幕文件中删除文本LaunchScreen。

j）返回您的项目文件夹，然后打开Images.xcassets文件。您应该看到AppIcon和LaunchImage。

k）接下来，单击LaunchImage，最后，将具有不同大小的启动屏幕图像拖到Launch Image框中。

像这样拖动图像。

测试启动屏幕 a）要查看更改，如果您最初运行了应用程序，则需要从模拟器中删除该应用程序。

b）要删除该应用程序，请在模拟器栏上单击“硬件”菜单，然后转到“主页”。

c）点击并按住要删除的特定应用程序图标，然后单击图标上的X标志。

d）使用react-native run-ios再次运行您的应用

您可以看到启动画面

对我来说，在添加图像，情节提要和1个通用图像之后XCode 10.1，react-native 59.2我不得不执行其他步骤。

• 右键单击图像，单击Show in Finder，然后编辑Contents.json文件
• 将图像添加到2x和3x部分
• 转到带有“ ruler”菜单的“启动屏幕”情节提要
• 确保仅打开内部的红色箭头，而不打开外部的红色箭头
• 单击“安全区域相对保证金”

现在，图像应在所有尺寸的iPhone上居中（已在纵向上测试）。

如果要使用现有的启动屏幕.xib文件，React Native最初已设置，但是具有您自己的徽标和背景色（并且没有任何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启动屏幕工作之前，已接受的答案中还缺少一个步骤。

Info.plist在项目文件夹中打开并删除“主笔尖文件库名称”键。然后，重新构建，希望问题解决了。

遵循上述解决方案后，我的应用程序陷入了启动画面，因此我执行了以下7个步骤以在ios上添加自定义启动画面。

1. 打开Xcode并找到 LaunchScreen.xib在项目中文件（注意，这是ios中默认显示的屏幕）
2. 要删除/编辑屏幕上的文本，请单击它并根据需要进行必要的更改。
3. 要更改背景颜色，请在右侧栏上找到以下图标，然后单击最顶部左侧第四个小图标按钮（当您将鼠标悬停时，它将显示“显示属性检查器”）

4. 现在您已经知道如何更改背景颜色，让我们将图像添加到“启动画面”中，然后单击以下按钮，然后从列表中选择“图像”视图，然后将其拖放到启动画面上所需的位置。

5. 现在我们必须将图像添加到中，Images.xcassets以便我们可以在中引用它 LaunchScreen.xib以执行goto Images.xcassets。单击+按钮import，然后单击添加，然后添加要在初始屏幕中显示的图像。在下面，AppIcon您将看到图像文件名。这是我们将在我们的参考中使用的名称LaunchScreen.xib

6. 现在，我们必须引用我们在LaunchScreen.xib文件中添加的图像，因此导航回到LaunchScreen.xib并单击image view我们之前添加的图像，然后在右上角将看到很多选项。单击第一个，image然后选择在第5步中导入的图像

7. 清理项目并运行react-native run-ios，您应该会看到更改。

您应该将启动屏幕图像源设置为图像集。然后删除LauncScreen.xib文件。然后，在您的项目中进行全局搜索，并删除对LaunchScreen.xib的所有引用（在您的整个项目中查找。我使用了sublime文本编辑器，因此它是cmd + shift + f），它应该可以工作。