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

问题描述

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

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

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

一旦我这样做了，我的启动屏幕就变成了全黑，当应用加载时，顶部和底部都有黑框:

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

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

提前致谢.

解决方案

我能够解决这个问题，在这个线程的帮助下:

当我下载我的图片时，我在assets/iphone文件夹中取了那些，我只取了那些:

• 默认@2x.png (640x960)
• [e-mail] (640x1136)
• [e-mail] (750x1334)
• [e-mail] (1242x2208)
• [e-mail] (2208x1242)

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

<代码>{图片": [{"extent": "全屏","idiom": "iphone","filename": "[e-mail]",最低系统版本":7.0"，方向":肖像"，规模":2x"，子类型":retina4"},{"extent": "全屏","idiom": "iphone","filename": "默认[e-mail]",最低系统版本":8.0"，方向":肖像"，规模":2x"，子类型":667h"},{"extent": "全屏","idiom": "iphone","filename": "[e-mail]",最低系统版本":8.0"，"方向": "风景",规模":3x"，子类型":736h"},{"extent": "全屏","idiom": "iphone","filename": "[e-mail]",最低系统版本":8.0"，方向":肖像"，规模":3x"，子类型":736h"},{"extent": "全屏","idiom": "iphone","filename": "默认@2x.png",最低系统版本":7.0"，方向":肖像"，比例":2x"}],信息":{版本":1，作者":xcode"}}

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

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

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

我们选择这个而不是品牌资产，我们可以删除品牌资产文件夹.

此时，我们将能够使用自定义启动图像运行我们的 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 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:

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.

Thanks in advance.

解决方案

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.

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

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)

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"
  }
}

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:

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

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

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

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屋！