iOS在React Native中启动屏幕
我正在使用React Native应用程序,我试图设置自定义启动屏幕,但是我无法启动。
React Native默认创build一个LaunchScreen.xib,所以我在Images.xcassets里面创build了一个LaunchImage:
我也读过我必须修改我的选项中的“应用程序图标和启动图像”下的“启动屏幕文件”:
一旦我这样做,我的启动屏幕变成全黑,当应用程序加载时,有顶部和底部的黑色框架:
所以我不知道我需要做什么才能在我的React Native项目中设置启动屏幕。
如果有人能帮我解决这些麻烦,我将不胜感激。
提前致谢。
我能够解决这个问题,在这个线程的帮助下: 启动图像不显示在iOS应用程序(使用Images.xcassets)
所以我会深深地解释一下,以免它可以帮助别人。
首先 ,您需要创build特定的图像。 我用的是这个模板和这个带有自动生成器的网页: TiCons
当我下载我的图片时,我拿了资产/ iPhone文件夹里面的那些,我只拿了那些:
- Default@2x.png (640×960)
- Default-568h@2x.png (640×1136)
- Default-667h@2x.png (750×1334)
- Default-Portrait-736h@3x.png (1242×2208)
- Default-Landscape-736h@3x.png (2208×1242)
你也需要在同一文件夹中的这个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文件,用于启动屏幕(闪屏)
- 积极的头脑;)
安装
- 安装generator-rn-toolbox和哟
-
npm install -g yo generator-rn-toolbox
- 安装imagemagick
brew install imagemagick
-
在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),它应该工作。