React Native 中的 iOS 启动屏幕

Question

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

React Native 默认创建一个 LaunchScreen.xib，所以我在 Images.xcassets 中创建了一个 LaunchImage：

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

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

所以我不知道如何在我的 React Native 项目中设置启动屏幕。

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

提前致谢。

Answer 1

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

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

首先，您需要创建某些图像。我用的是这个模板和这个带有自动生成器的网页：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"
  }
}

所以，此时我在我的 React Native 项目的 Images.xcassets 文件夹中创建了一个名为 LaunchImage.launchimage 的文件夹，并保存图像和 Contents .json 里面的文件：

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

现在，在“Launch Images Source”选择器中，我们可以选择我们之前创建的文件夹，LaunchImage（包含我们图片的那个）：

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

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

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

Answer 2

确保从模拟器中删除该应用。 然后清理你的项目。

Answer 3

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

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

> 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 类型的新文件，然后将其命名为您想要的任何名称。

第四步

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

第 5 步

点击您在step 2 中创建的全新文件，拖动Image View 或编辑您喜欢的任何内容。

然后就是这样，你就完成了。您甚至不需要清理解决方案，只需重建即可。

Answer 4

更新

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

旧答案

我推荐 generator-rn-toolbox 在 react-native 上应用启动屏幕或主图标。通过 cli 作为 react-native 使用更加简单易用。

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

要求

• 节点 >= 6
• 一个方形图像或psd文件，其大小超过2208x2208像素分辨率，用于启动屏幕（启动屏幕）
• 积极向上 ;)

安装

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

   或安卓

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

就是这样。 :)

Source

Answer 5

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

模拟器 > 重置内容和设置

该模拟器中必须进行一些核心缓存，但一旦完成 - 重新运行，您将看到该应用程序。确保对 xcode 模拟器和 react-native 模拟器都这样做！

Answer 6

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

Answer 7

Follow this link:

如果您想在我的 React Native 应用程序中添加启动画面。按照流程进行操作，结果将是您的全部。

步骤：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) 转到以 .xc​​odeproj 作为扩展名的文件，在我的例子中是 splaScreenTutorial.xcodeproj

d) 在你的 Xcode 中打开这个文件。

e) 删除 launchScreen.xib 文件。

f) 点击 splashScreenTutorial 文件夹，然后转到 TARGETS 部分

g) 点击 Xcode 左上角的 General 选项卡并向下滚动到 App Icons and Launch Images

h) 转到启动图像源并单击使用资产目录。点击迁移。

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

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

k) 接下来，点击 LaunchImage，最后，将你拥有的不同大小的闪屏图片拖到 Launch Image 框中。

Drag the images like this.

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

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

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

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

You can see your Splash Screen

Answer 8

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

• 右击图片，点击Show in Finder，然后编辑你的Contents.json文件
• 将图像添加到 2x 和 3x 部分
• 使用“标尺”菜单转到启动屏幕故事板
• 确保只有内部红色箭头亮，而不是外部红色箭头
• 点击“安全区域相对边距”

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

Answer 9

如果您想使用 React Native 最初设置的现有 Launch Screen .xib 文件，但使用您自己的徽标和背景颜色（并且没有任何 React Native 默认文本），您可以按照此处的说明进行操作：@ 987654321@.

Answer 10

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

打开 LaunchScreen 然后在 Xcode 右侧面板的 Object Library 中的 View 中添加 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

按照上述解决方案后，我的应用卡在启动画面上，因此我执行以下 7 个步骤在 ios 上添加自定义启动画面。

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

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

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

中引用的名称 1234563 .点击第一个image 并选择您在步骤5中导入的图像

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

Answer 13

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