React Native 学习笔记之添加图标与启动屏

? 前言

本文仅针对 iOS 系统。为初始化的项目添加一个图标，同时增加一个启动屏

? 预览

? 正文

添加图标

• 首先需要准备一套不同尺寸的同一张图片，推荐使用 Ape Tools，它可以根据一张 1024 * 1024 的图片，生成 ios 需要的各种尺寸的图片。阿里矢量中的所有图标是都 1024 * 1024 的，可以很方便的找一个图片素材

  

  

• XCode 打开初始化的项目，把刚刚下载好的一套图片添加至 Images.xcassets 文件夹下，XCode 会根据图片大小，自动匹配到对应的尺寸，如果某个图标出现了黄色的警告，删掉就可以了

  

• 至此，刷新一下手机，就可以看到图标已经替换完成了

添加启动屏

首先准备一张竖屏的图片，这里会用到约束与对不同分辨率维持正确的视频信号比例设置，因此不用担心尺寸问题。了解更多关于 iOS 启动图尺寸

首先到项目根目录，找到以 .stioyboard 的文件：

删除默认的启动屏，直接点击图片中的项目名称，delete 即可：

新增一个 image View：

添加之后将这个视图拉伸填充完启动屏：

回到项目的根目录，进入 Images.xcassets 文件夹，将准备好的图片移到里面：

回到 .stioyboard ，在右侧工具栏 -> Image 选择刚才拖入的图片，并且设置为适应多种分辨率：

添加约束。点击刚才添加的图片，按住 ctrl，将它拖拽至 View，即可看到约束选项，选择宽度与高度的约束：

最后，回到项目根目录 -> General，检查屏名称是否正确，名称与左侧 .storyboard 为后缀的文件保持一致：

引入组件解决启动白屏问题

为了解决启动白屏问题，我使用了 react-native-splash-screen 组件，文档写的非常详细，没有什么坑，不过要记住引入组件后要 pod install

? 总结

启动屏设置方法有很多种，在这我仅列举了一种，尺寸拉伸，清晰度会受到影响，因此针对官方文档来设置启动屏分辨率，我认为会有更有的用户体验

本人技术能力捉襟见肘，如果有写的不对的地方，请留言斧正，十分感谢 ?

如果没有解决您的问题，首先十分抱歉耽误您的时间，可以在下方评论区留言，看到后我会第一时间回复?‍♂️