React Native中的iOS启动屏幕

合资路宝:

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

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

Images.xcassets中的LaunchImage

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

启动图像选项

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

在此处输入图片说明

所以我不知道我该怎么做才能在React Native项目中设置启动屏幕。

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

提前致谢。

合资路宝:

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:

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

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "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.

在这一点上,我们将能够使用我们的自定义启动映像运行React Native应用程序:

在此处输入图片说明

我知道对于一个本来就很简单的任务来说似乎有点复杂,但是在阅读了很多有关这的内容之后,这是使我的启动图像工作的唯一方法,因此我想与社区分享。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章