使用Xcode启动屏幕反应本机iOS启动屏幕
这里的JavaScript开发人员使用React Native在移动开发世界中生活。 我从事过许多React Native项目（几乎在生产和生产中），并且在每个项目中，我都不得不沉迷于特定于平台的代码。 实际上不是太脏，只有一点点灰尘。 由于我最终甚至用很少的本机代码工作，所以我总是以react-native init AwesomeProject而不是create-react-native-app AwesomeProject来启动我的项目。 如果您使用create-react-native-app ，那么除非您决定“退出” React Native应用程序，否则将无法使用以下信息。 在这里更多。
您为什么要在Xcode中构建初始屏幕而不使用其资产目录？ 有一些原因。 也许您不想处理所有这些屏幕尺寸的图像，然后又有新设备问世，迫使您为下一个版本重做/添加新尺寸。 也许您想使用本机代码添加某种特殊效果。 我之所以学到这一点，是因为我计划制作一个动画，并且想让自己的脚步进入iOS视图。 动画实际上变成了没有动画，但是尽管如此我还是学到了，现在我对Xcode更加熟悉了，所以对我来说是一个胜利。
说了这么多，如果您想走资产目录之路，那绝对很酷。 Spencer Carli（令人惊叹的React Native博客作者）写了一篇很棒的文章，介绍了如何使用iOS中的资产目录添加初始屏幕（他还包括Android的说明-奖励）。
我们从什么开始
当您首次在React Native中启动一个项目时，您会得到一个可爱的启动屏幕，在您的第一次运行中向您打招呼。
好消息是，他们已经为我们设置了LaunchScreen.xib，这将用于我们自己的品牌初始屏幕。
我们要去的地方
这就是我们要去的地方（圆圈和字母是您计划显示的徽标图像）。
在Xcode中查看屏幕
让我们在Xcode中看看我们所拥有的。 从左侧的主项目目录中打开子目录，然后最上面的一个通常与您的项目名称相同。 也打开那个，然后单击LaunchScreen.xib 。 这将打开右侧的外观。
我注意到的第一件事是一个正方形，看起来不像我正在开发的任何设备。 我喜欢更改视图，以便可以在各种设备中检查所有内容。
确保左栏中的View高亮显示。 在右侧栏上，单击最左上角的小图标按钮（从左数第四个按钮）（当您悬停时，它将显示“显示属性检查器”）。 将第一个下拉菜单从“自由格式”更改为“页面表单”。 我还要在这里设置背景颜色，方法是单击“背景”旁边的下拉列表，然后选择我的颜色。 这是一个视觉效果-左边是我们开始的地方，右边是您现在应该去的地方（具有选择的任何背景色）。
凉！ 现在，我们可以通过单击底部栏中的任意设备查看初始屏幕。
删除React本机文本
React Native的默认启动屏幕仅使用文本，因此让我们摆脱它。 只需单击左侧栏中“ View下面的每个项目，上面带有文本字符（从我所见即为L ），然后使用键盘上的delete键。
因此，现在我们剩下的空白屏幕是我们选择的背景色。 让我们添加徽标。
将图像视图添加到LaunchScreen.xib
在左侧栏中选择“ View ，转到右侧栏中的底部，您将在其中看到这个小小的正方形动作，然后单击左侧的第三个图标（中间带有正方形的圆圈）。
向下滚动，直到看到“图像视图”选项。 单击并将其拖放到屏幕上。
将图像文件添加到Xcode
太好了，现在我们需要添加图片。 如果返回项目目录并单击Images.xcassets ，则目录列表右侧可能会出现类似AppIcon的内容。 我们将图像添加到该目录。 在此窗格的底部，有一个小的“ +”按钮。 单击该按钮，然后选择Import... 它将打开一个对话框，供您查找和选择要使用的图像。
现在，在AppIcon下面，您将看到图像文件名。 这是我们将在LaunchScreen.xib引用的LaunchScreen.xib 。 因此，请确保您复制的名称与此处完全相同。
引用您的图像以在LaunchScreen.xib中使用
现在，我们将返回到LaunchScreen.xib文件，并在左窗格中选择“图像视图”。 将您的视线切换到右侧窗格，在该窗格中，您选择了左侧图标中的第四个，然后看到第一个显示Image下拉列表。 单击此处，然后输入与保存图像完全相同的图像名称（从上方）。 您将不包括扩展名（.jpg，.png）。 首次添加时，图像可能会有些变形。 没关系，我们会修复它。 这是我到目前为止的位置。
要固定该长宽比，请移至右窗格中的“ View部分，选择“ Content Mode下拉列表，然后选择“ Aspect Fit 。 是的，好多了！
我要直接在中间，所以我将其抓住并向下拖动，直到横杆显示我居中。 看起来不错！ 但是我们有一个问题。 当我切换到iPad视图时…
固定长宽比
再次转到右侧窗格中的图标选择，然后单击右侧的下一个（看起来像垂直标尺）。 转到自动调整Autoresizing部分，您可以单击侧面带有箭头的小红线以获取正确的徽标位置。 试一下以获取所需的内容，或者如果要在每个设备的中央使用完全相同的徽标，请取消选择突出显示的徽标，然后确保仅较小的中央框中的两个突出显示，如下所示。
现在，如果我们回顾一下iPad和其他屏幕尺寸……
好极了！ 四周看起来不错。 因此，现在您具有使用LaunchScreen.xib文件的启动屏幕。 因此，您不必更改启动屏幕的来源。 您可以继续打包并重新运行React Native应用程序，然后一秒钟就能看到您美丽的新启动画面。
希望这对您有所帮助-感谢您的阅读！
如果喜欢的话，请随时鼓掌欣赏。 🙂
并在下面评论任何提示，反馈或一般想法。 我总是乐于学习新事物并听取别人的建议（无论是否接受😉）。 ❤