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

? 总结

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

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

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

ReactNative

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

被以下专题收入,发现更多相似内容