iOS React Native 中的启动屏幕

Question

我正在使用 React Native 应用程序，我正在尝试设置自定义启动屏幕，但我做不到。

React Native 默认创建一个 LaunchScreen.xib，所以我在 Images.xcassets:

中创建了一个 LaunchImage

我还读到我必须在我的选项中修改 "App Icons and Launch Images" 下的 "Launch Screen File":

完成后，我的启动屏幕变成全黑，当应用程序加载时，顶部和底部都有黑框：

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

如果有人能帮助我解决这些问题，我将不胜感激。

提前致谢。

Answer 1

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

Answer 2

在这个线程的帮助下，我能够解决问题：Launch Image not showing up in iOS application (using Images.xcassets)

所以我会深入解释它以防它能帮助到其他人。

首先，您需要制作一些图片。我为此使用的是这个模板和这个带有自动生成器的网页：TiCons

当我下载我的图片时，我把那些放在 assets/iphone 文件夹里的，我只拿了那些：

默认@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 的 Images.xcassets 文件夹中创建了一个名为 LaunchImage.launchimage 的文件夹本机项目并保存图像和其中的 Contents.json 文件：

其次，您必须在 Xcode 和 "General" 设置中打开您的项目，在“ 应用程序图标和启动图像下方”我们必须将选项“Launch Screen File”留空（我们也可以删除 LaunchScreen.xib 文件在我们的项目中），然后单击“Use Asset Catalog”。将打开一个模式，我们选择 Migrate 目录 Images

现在，在“Launch Images Source”选择器中，我们可以选择之前创建的文件夹，LaunchImage（带有我们的图片):

我们选择这个而不是 Brand Assets，我们可以删除 Brand Assets 文件夹。

此时，我们将能够运行我们的 React Native 应用程序与我们的自定义启动图像：

我知道这对于一个本应很简单的任务来说似乎有点复杂，但在阅读了很多有关它的内容之后，这是我让启动画面正常工作的唯一方法，所以我想与社区分享。

Answer 3

确保从模拟器中删除该应用程序。然后对您的项目进行清理。

Answer 4

刚刚经历了这一切，请客。我发现的唯一障碍是没有清除模拟器内容。如果您发现您的新启动屏幕无法正常工作，您需要打开模拟并转到以下内容：

模拟器>重置内容和设置

该模拟器中一定有一些硬核缓存正在进行，但一旦完成 - 重新运行，您就会看到该应用程序。确保对 xcode 模拟器和 react-native 模拟器都执行此操作！

Answer 5

我一直在 SO 中查看这些答案，其中包含有关如何创建新启动屏幕的解决方案。我的意思是让我们考虑一下。

当我们创建一个新的 react-native 项目时，我们看到了什么启动屏幕？

> Facebook's default launch screen

这让我开始思考，他们是怎么做到的？

They created a LaunchScreen.xib

我想这一定是有原因的。所以我进入 LaunchScreen.xib 并更改了默认文本 "React Native..." 或它所说的任何内容。我运行应用程序再次看到启动屏幕反映了我的编辑。

解决方案 1 编辑现有的 LaunchScreen.xib

解决方案 2 创建我自己的

所以我做到了，输入这个答案比学习如何创建自己的答案花费的时间更长。 Both of these solutions are compatible with all the devices.

Step 1:

删除LaunchScreen.xib

step 2:

点击images.xcassets 右击白色space 单击 **import**，然后单击 select 您要添加的图像。

step 3:

右键单击项目的根文件夹并添加一个类型为 Launch Screen 的新文件，并根据需要命名。

step 4

在左侧导航栏中单击您的项目，转到 Settings > General 并在 App Icons and Launch Images 下。确保 Launch Image Source 为空并且 Launch Screen File 与您新创建的启动屏幕同名。

step 5

单击您在 step 2 中创建的 b运行d 新文件，拖动 Image View 或按您喜欢的方式进行编辑。

就这样，大功告成。您甚至不需要清理解决方案，只需重建即可。

Answer 6

更新

generator-rn-toolbox 已弃用。请改用 react-native-make。

旧答案

我建议 generator-rn-toolbox 在 react-native 上应用启动屏幕或主图标。和react-native一样通过cli使用更简单易用

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

要求

节点 >= 6
一张方形图片或psd文件，启动画面（启动画面）的分辨率大于2208x2208像素
积极的心态 ;)

安装

安装 generator-rn-toolbox 和 yo
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

就是这样。 :)

Source

Answer 7

确保 'Launch Screen File' select 为空：

Answer 8

如果您想使用 React Native 最初设置的现有 Launch Screen .xib 文件，但使用您自己的徽标和背景颜色（并且没有任何 React Native 默认文本），您可以按照此处的说明进行操作: https://medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec.

Answer 9

Follow this link:

如果你想在我的 React Native application.Follow 过程中添加启动画面，结果将是你的。

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

步骤：2 change the code as written inside the subviews tag. 使用此代码<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) 单击 Xcode 左上角的“常规”选项卡，然后向下滚动到“应用程序图标”和“启动图像”

h) 转到 Launch Images Source 并单击 Use Asset Catalog。点击迁移。

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

j) 返回您的项目文件夹并打开 Images.xcassets 文件。您应该会看到 AppIcon 和 LaunchImage。

k) 接下来，点击 LaunchImage，最后，将您拥有的不同大小的启动画面图像拖到 Launch Image 框中。

Drag the images like this.

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

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

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

d) 运行你的应用再次使用 react-native 运行-ios

You can see your Splash Screen

Answer 10

如果您在 React 的帮助下创建启动屏幕，那么您应该在 iOS Xcode 中的 LaunchScreen.xib 文件中添加相同的内容，以便您可以截取屏幕截图并将其作为图像添加到 Images.xcassets.

打开 LaunchScreen 然后在 Xcode.

右面板的 View from Object Library 添加 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

Answer 11

对于那些仍然遇到问题的人，在使 iOS 启动屏幕正常工作之前，已接受的答案还缺少一个步骤。

在项目文件夹中打开 Info.plist 并删除 "Main nib file base name" 项。然后，重建并希望问题消失。

Answer 12

对于我来说 XCode 10.1 和 react-native 59.2 我必须在添加图像、故事板和 1 个通用图像之后 完成额外的步骤。

右键单击图像，单击 Show in Finder，然后编辑您的 Contents.json 文件

将图像添加到 2x 和 3x 部分

使用"ruler"菜单
转到启动屏幕故事板
确保只有内部红色箭头亮起，而不是外部红色箭头

点击"Safe Area Relative Margins"

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

Answer 13

按照上述解决方案，我的应用程序卡在启动画面上，因此我执行了以下 7 个步骤以在 ios.[ 上添加自定义启动画面=26=]

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

现在您已经知道如何更改背景颜色，让我们将图像添加到初始屏幕以执行此操作，单击以下按钮和 select 列表中的图像视图并将其拖放到合适的位置您是否希望它出现在初始屏幕上。

现在我们必须将图像添加到 Images.xcassets，以便我们可以在 LaunchScreen.xib 中引用它以执行转到 Images.xcassets 的操作。单击 + 按钮，然后单击 import，然后添加要在初始屏幕中显示的图像。在 AppIcon 下方，您会看到您的图像文件名。这是我们将在 LaunchScreen.xib
现在我们必须引用我们在 LaunchScreen.xib 文件中添加的图像，因此导航回 LaunchScreen.xib 并单击我们之前添加的 image view在右上角你会看到一堆选项。单击第一个 image 和 select 您在步骤 5 中导入的图像

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

iOS React Native 中的启动屏幕

iOS Launch screen in React Native

xcode

ios

asset-catalog

react-native

更新

旧答案

要求

安装