React Native中的iOS启动屏幕 [英] iOS Launch screen in React Native

问题描述

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

I'm working with a React Native app and I'm trying to set a customize launch screen but I'm not able to.

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

React Native creates a LaunchScreen.xib by default, so I've created a LaunchImage inside Images.xcassets:

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

I've also read that I've to modify the "Launch Screen File" under "App Icons and Launch Images" in my options:

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

Once I've done that, my launch screen became totally black and when the app is loaded, there are both top and bottom black frames:

所以我不知道要在我的React Native项目中设置启动屏幕该做什么.

So I don't know what I have to do to set my launch screen in my React Native project.

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

I'll be grateful if someone can help me out with those troubles.

谢谢.

推荐答案

借助以下线程，我能够解决此问题:

I was be able to solve the issue, with the help of this thread: Launch Image not showing up in iOS application (using Images.xcassets)

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

So I'm gonna explain it deeply in case it can help someone else.

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

First, you need to create certain images. What I used for that was this template and this webpage with an automatic generator: TiCons

下载图像时，我将这些图像放在了assets/iphone文件夹中，而我只采用了这些图像:

When I downloaded my images, I took the ones inside assets/iphone folder, I only took those ones:

• [e-mail] (640x960)
• 默认[e-mail] (640x1136)
• 默认[e-mail] (750x1334)
• [e-mail] (1242x2208)
• 默认风景[e-mail] (2208x1242)

• [e-mail] (640x960)
• [e-mail] (640x1136)
• [e-mail] (750x1334)
• [e-mail] (1242x2208)
• [e-mail] (2208x1242)

此外，您还需要在同一文件夹中的此 Contents.json 文件，我是从朋友那里得到的:

Also you need this Contents.json file in the same folder, I got it from a friend:

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

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

So, at this point I created a folder called LaunchImage.launchimage inside Images.xcassets folder in my React Native project and save the images and the Contents.json file inside it:

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

Second, you have to open your project in Xcode and in "General" settings, below "App icons and Launch Images" we have to leave the option "Launch Screen File" empty (also we can delete the LaunchScreen.xib file inside our project), and click in "Use Asset Catalog" after that. A modal will open, we choose to Migrate the catalog Images

现在，在"启动图像源"选择器中，我们可以选择之前创建的文件夹 LaunchImage (包含我们图像的文件夹):

Now, in the "Launch Images Source" selector, we can choose the folder we created before, LaunchImage (the one with our images):

我们选择它而不是 Brand Assets ，并且我们可以删除 Brand Assets 文件夹.

We pick this instead of Brand Assets and we can delete Brand Assets folder.

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

At this point, we'll be able to run our React Native application with our custom launch images:

我知道对于一个本来很简单的任务来说似乎有点复杂，但是在阅读了很多有关这之后，这是我使我的启动图像起作用的唯一方法，所以我想与社区分享.

I know it seems a little bit complex for an supposedly easy task, but after reading a lot about it this was the only way I could get my splash images working, so I wanted to share with the community.

这篇关于React Native中的iOS启动屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！