如何添加启动画面以响应本机（IOS）
在本文中，我将告诉您如何向“本机”（IOS）添加启动画面。 我要告诉你非常简单的步骤。 这是我们可以为每个移动应用程序创建的非常初始的东西。 因此，对于每个开发人员来说，知道如何以正确的方式添加它都是非常重要的。
您可以在此处查看整个源代码：
rockinghajay / splash-screen-react-native
闪屏React Native（IOS和Android）。 通过……为rockinghajay / splash-screen-react-native开发做出贡献
github.com
我正在使用简单的react native项目向其添加初始屏幕。 因此，让我们开始初始化系统中的react native项目。
react-native初始SplashScreenReactNative
cd SplashScreenReactNative
将这两行运行到终端后，您将在系统上响应本机项目。
如果您注意到React本机应用程序具有白色背景初始屏幕。 在该屏幕上，我们将添加自定义启动屏幕。 如何注意到第一个白色启动画面，我们需要在我们的应用程序中首先设置深色背景。
用下面的代码替换您的App.js组件
首先在Xcode中打开您的应用。
cd ios / SplashScreenReactNative.xcodeproj
在Xcode上打开项目后，您将转到Images.xcassets文件夹，您可以在下面的屏幕截图中看到该文件夹。
然后，您需要单击Xcode底部显示的+图标，然后单击“ 新建图像集”。
然后继续将Image重命名为一个图标 ，然后根据需要将其拖动到框中以添加图像集。
然后，您必须打开Info.plist下面的LaunchScreen.xib ，您将看到。
这是ios的默认初始屏幕，选择两个文本元素“ SplashExample”和“ Powered by React Native”并将其删除。
继续并将背景色设置为“深灰色”。
在下一步中，我们必须将图像视图添加到初始屏幕视图中。 您可以通过按图标并搜索图像来找到该图像，然后单击图像元素，如上图所示。
并将UIImageView拖动到视图的中心
现在我们要从Images.xcassets设置图像源。 选择图像下拉菜单时，应该显示Images.xcassets中的所有图像，然后选择您最近添加的图标。
现在，您需要将图像设置为与垂直和水平中心对齐，然后将“内容模式”更改为Aspect Fit
在下一步中，我们需要确保我们的图标在所有设备上都保持居中，无论使用哪种屏幕尺寸的设备，因此现在您都可以按照上面的gif进行相同的操作。
您可以在“自动调整大小”部分中看到要禁用外部红线并通过单击启用内部红箭头的功能。 这将使图像相对于屏幕尺寸保持居中。
完成上述所有步骤后，我们将获得以下内容：
但是，出现一个问题之后，启动屏幕也出现白屏，这是因为当时Javascript正在加载并且桥正在初始化。 在react-native-splash-screen的帮助下解决此问题。
因此，首先安装该软件包，然后将其与项目链接。
npm安装react-native-splash-screen@3.0.6
react-native链接react-native-splash-screen
然后，我们需要使用Xcode配置此程序包，因此让我们在Xcode中打开AppDelegate.m文件。 然后只需在#import 行下方添加#import“ SplashScreen.h”行。 完成此操作后，您只需要添加[SplashScreen show]； 在返回YES之上； 就是这样。
最后，您只需要在app.js组件中导入react-native-splash-screen包，请参见上面的代码：
我希望您喜欢这篇有关 如何添加初始屏幕以响应本机（IOS）的文章。
如果您觉得这篇文章有用，请拍一下
欢迎发表评论并喜欢这篇文章，以便其他人可以在Medium上轻松找到它！
你好，我的名字是 阿杰（Ajay Singh Rajput） 。 我是 ZestGeek 的前端开发人员 。 我写关于JavaScript和reactjs的文章。 并与所有人分享我的世界观，通过在 Twitter 或 Medium中 关注我，加入我的追求 。
想更多地了解JavaScript，Reactjs和Life？ 看看我的其他文章：
- 编写ReactJS组件的离散方法
- 如何在reactjs中处理多个表单输入
- 考虑某事
- 生活中的感激之力
- 在Heroku上创建并部署React应用
- JavaScript中的闭包
- 了解JavaScript中的吊装
- 在reactjs中与GitHub和Microsoft登录
9.在reactjs中使用Facebook和Google登录
10.如何在您的react应用程序中设置redux和react router v4
11.通过简单的步骤设置一个React.js项目
感谢您阅读本文，如果您喜欢它，然后与您的朋友和敌人分享。 我将写更多关于JavaScript的信息，react.js，并与我保持联系。