iOS在React Native中启动屏幕

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

React Native默认创build一个LaunchScreen.xib,所以我在Images.xcassets里面创build了一个LaunchImage:

在Images.xcassets中启动图像

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

启动图像选项

一旦我这样做,我的启动屏幕变成全黑,当应用程序加载时,有顶部和底部的黑色框架:

在这里输入图像说明

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

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

提前致谢。

我能够解决这个问题,在这个线程的帮助下: 启动图像不显示在iOS应用程序(使用Images.xcassets)

所以我会深深地解释一下,以免它可以帮助别人。

首先 ,您需要创build特定的图像。 我用的是这个模板和这个带有自动生成器的网页: TiCons

在这里输入图像说明

当我下载我的图片时,我拿了资产/ iPhone文件夹里面的那些,我只拿了那些:

你也需要在同一文件夹中的这个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文件夹里创build了一个名为LaunchImage.launchimage的文件夹,并将图像和Contents.json文件保存在里面:

在这里输入图像说明

其次 ,您必须在Xcode中打开您的项目,在“常规”设置中,在“ 应用程序图标和启动图像 ”下方我们必须将“ 启动屏幕文件 ”选项保留为空(也可以删除项目中的LaunchScreen.xib文件),然后点击“ 使用资产目录 ”。 模式将打开,我们select迁移目录图片

在这里输入图像说明

现在,在“ Launch Images Source ”select器中,我们可以select我们之前创build的文件夹LaunchImage (与我们的图像一起):

在这里输入图像说明

我们select这个,而不是品牌资产 ,我们可以删除品牌资产文件夹。

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

在这里输入图像说明

我知道这对于一个简单的任务来说似乎有点复杂,但是在阅读了很多内容之后,这是唯一能够让我的图片起作用的方法,所以我想和社区分享一下。

确保从模拟器中删除应用程序。 然后做一个干净的项目。

我一直在寻找这些包含解决scheme的答案,以了解如何创build新的启动屏幕。 我的意思是让我们考虑一下。

当我们创build一个新的反应原生项目时,我们看到的启动屏幕是什么?

> Facebook的默认启动屏幕

所以让我思考,他们是怎么做到的?

他们创build了一个LaunchScreen.xib

我认为这一定是有原因的。 所以我进入了LaunchScreen.xib ,并对默认文本“React Native …”进行了修改,或者说了一遍。 我再次运行应用程序,看到启动屏幕反映了我的编辑。

解决scheme1编辑现有的LaunchScreen.xib

解决scheme2 创build我自己的

所以我做了,花了我更多的时间来input这个答案,而不是学习如何创build自己的。 Both of these solutions are compatible with all the devices.

步骤1:

删除LaunchScreen.xib

第2步:

点击images.xcassets右键单击在空白处单击**import**然后select您要添加的图像。 在这里输入图像说明

第3步:

右键单击项目的根文件夹,然后添加一个types为“ Launch Screen的新文件,并将其命名为您想要的内容。

在这里输入图像说明

步骤4

点击左侧导航栏中的项目,进入Settings > General ,在App Icons and Launch Images 。 确保“ Launch Image Source为空,“ Launch Screen File ”与新创build的启动屏幕名称相同。

在这里输入图像说明

步骤5

点击您在step 2创build的全新文件,拖动Image View或编辑它如何让您满意。

在这里输入图像说明

那就是这样,你完成了。 你甚至不需要清理解决scheme,只需重build。

刚刚通过这个工作,一个治疗。 我发现的唯一路障是没有清理模拟器的内容。 如果您发现新的启动屏幕无法运行,则需要打开模拟并转至以下内容:

模拟器>重置内容和设置

在模拟器中必须有一些硬核caching,但一旦完成 – 重新运行,你会看到应用程序。 确保你对xcode模拟器和反应原生模拟器都这样做!

我build议generator-rn-toolbox应用启动屏幕或使用react-native的主图标。 通过cli作为反应原生物更简单易用。

  • 不需要打开XCode。
  • 不需要为各种分辨率制作大量的图像文件。
  • 任何时候都可以使用一条线改变启animation面。

要求

  • 节点> = 6
  • 一个大小超过2208×2208像素分辨率的方形图像或psd文件,用于启动屏幕(闪屏)
  • 积极的头脑;)

安装

  1. 安装generator-rn-toolbox和哟
  2. npm install -g yo generator-rn-toolbox
  3. 安装imagemagick brew install imagemagick
  4. 在iOS上应用启animation面

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

    或Android

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

就这样。 🙂

资源

确保“启动屏幕文件”select为空: 在这里输入图像说明

如果您想使用现有的Launch Screen .xib文件,React Native最初已经设置好了,但是您可以使用自己的徽标和背景颜色(并且没有任何React Native默认文本),您可以按照以下说明进行操作: https:// medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec 。

您应该将启动屏幕图像源设置为您的图像集。 之后删除LauncScreen.xib文件。 之后在你的项目中进行全局search,并删除对LaunchScreen.xib的所有引用(查看你的整个项目,我用户崇高的文本编辑器,所以它的cmd + shift + f),它应该工作。

Interesting Posts