我正在使用React Native应用程序,我正在尝试设置自定义启动屏幕,但我无法做到.
React Native默认创建一个LaunchScreen.xib,所以我在Images.xcassets中创建了一个LaunchImage:
我还读到我要在我的选项中修改"应用程序图标和启动图像"下的"启动屏幕文件":
一旦我完成了,我的启动屏幕变得完全黑了,当应用程序加载时,有顶部和底部黑色框架:
所以我不知道在React Native项目中设置启动画面需要做些什么.
如果有人可以帮我解决这些麻烦,我将不胜感激.
提前致谢.
在这个线程的帮助下,我能够解决这个问题:启动图像没有出现在iOS应用程序中(使用Images.xcassets)
所以我会深刻解释它,以防它可以帮助别人.
首先,您需要创建某些图像.我用的是这个模板和这个带有自动生成器的网页:TiCons
当我下载我的图片时,我拿了assets/iphone文件夹里面的那些,我只拿了那些:
Default@2x.png(640x960)
Default-568h@2x.png(640x1136)
默认-667h@2x.png(750x1334)
Default-Portrait-736h@3x.png(1242x2208)
Default-Landscape-736h@3x.png(2208x1242)
你还需要这个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"
}
}
所以,在这一点上我创建了一个文件夹,名为LaunchImage.launchimage内Images.xcassets文件夹在我的阵营本地项目并保存图像和Contents.json里面的文件:
其次,你必须在Xcode和"常规"设置中打开你的项目,在" 应用程序图标和启动图像 "下面我们必须将" 启动屏幕文件 " 选项留空(我们也可以删除项目中的LaunchScreen.xib文件) ),然后单击" 使用资产目录 ".一个模态将打开,我们选择迁移目录图像
现在,在" Launch Images Source "选择器中,我们可以选择之前创建的文件夹LaunchImage(带有我们图像的文件夹):
我们选择此而不是Brand Assets,我们可以删除Brand Assets文件夹.
此时,我们将能够使用自定义启动映像运行React Native应用程序:
我知道这对于一个简单易懂的任务来说似乎有点复杂,但在阅读了很多关于它之后,这是我能让我的启动图像工作的唯一方法,所以我想与社区分享.
确保从模拟器中删除该应用程序.然后对您的项目进行清理.
我建议使用generator-rn-toolbox在react-native上应用启动画面或主图标.它通过cli作为反应原生更简单易用.
不需要打开XCode.
不需要为各种分辨率制作大量图像文件.
任何时候使用一行修改启动屏幕.
node> = 6
一个方形图像或psd文件,大小超过2208x2208像素分辨率,用于启动屏幕(闪屏)
积极的心态;)
安装generator-rn-toolbox和哟
npm install -g yo generator-rn-toolbox
安装imagemagick
brew install imagemagick
在iOS上应用启动画面
yo rn-toolbox:assets --splash YOURIMAGE.png --ios
或Android
yo rn-toolbox:assets --splash YOURIMAGE.png --android
就这样.:)
资源
我在SO中一直在寻找这些答案,其中包含如何创建新的启动屏幕的解决方案.我的意思是让我们考虑一下.
当我们创建一个新的react-native项目时,我们在启动屏幕上看到了什么？
> Facebook的默认发布屏幕
这让我思考,他们是怎么做到的？
他们创造了一个
LaunchScreen.xib
我认为必须有这样的理由.所以我进入LaunchScreen.xib并更改了默认文本"React Native ..."或其所说的内容.我再次运行应用程序,看到启动屏幕反映了我的编辑.
解决方案1 编辑现有的LaunchScreen.xib
解决方案2 创建我自己的
所以我做了,输入这个答案花了我更长时间,而不是学习如何创建自己的答案. Both of these solutions are compatible with all the devices.
步骤1:
删除 LaunchScreen.xib
第2步:
单击images.xcassets
右键单击空白区域,**import**然后选择要添加的图像.
第3步:
右键单击项目的根文件夹,然后添加一个新类型的文件,Launch Screen并根据需要为其命名.
第4步
单击左侧导航栏中的项目,转到Settings> General和下App Icons and Launch Images.确保Launch Image Source为空,并且与Launch Screen File新创建的启动屏幕名称相同.
第5步
点击您创建的全新文件step 2,拖动Image View或编辑您喜欢的文件.
那就是它,你已经完成了.您甚至不需要清理解决方案,只需重建即可.
刚刚经历了这一点，并请客。我发现的唯一障碍是没有清除模拟器内容。如果发现新的启动屏幕不起作用，则需要打开仿真并转到以下步骤：
模拟器>重置内容和设置
该模拟器中必须有一些硬盘缓存，但是一旦完成，请重新运行，您将看到该应用程序。确保对xcode模拟器和react-native模拟器都执行此操作！
确保“启动屏幕文件”选择为空：
京公网安备 11010802040832号 | 京ICP备19059560号-6 