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)
• Default-568h@2x.png (640x1136)
• Default-667h@2x.png (750x1334)
• Default-Portrait-736h@3x.png (1242x2208)
• Default-Landscape-736h@3x.png (2208x1242)

你还需要这个 Contents.json 文件在同一个文件夹中，我从 friend 那里得到的:

{
  "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 和“常规”设置中打开您的项目，在“应用程序图标和启动图像”下方我们必须保留选项“< strong>Launch Screen File”为空(我们也可以删除项目中的LaunchScreen.xib文件)，然后点击“Use Asset Catalog” .将打开一个模式，我们选择迁移目录图像

现在，在“Launch Images Source”选择器中，我们可以选择我们之前创建的文件夹，LaunchImage(包含我们图像的文件夹):

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

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

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