Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IOS 怎么添加静态图片作为启动闪屏呢? #257

Open
Mscynol opened this issue Mar 31, 2024 · 12 comments
Open

IOS 怎么添加静态图片作为启动闪屏呢? #257

Mscynol opened this issue Mar 31, 2024 · 12 comments

Comments

@Mscynol
Copy link

Mscynol commented Mar 31, 2024

因为不懂原生,这块折腾了好久了,感觉也无法适配屏幕,看了教程感觉实际效果还是不满意,大神能否出个步骤教程适配下,

@listenzz
Copy link
Owner

listenzz commented Apr 1, 2024

一张图片铺满整个屏幕吗?

@Mscynol
Copy link
Author

Mscynol commented Apr 1, 2024

是的

@Mscynol
Copy link
Author

Mscynol commented Apr 1, 2024

以前的一个项目用的第三方库react-native-splash-screen,现在用hybrid-navigation,不知道怎么实现了,试了很多种方法不行

@listenzz
Copy link
Owner

listenzz commented Apr 1, 2024

这种铺满不能是配所有机型,一般是一个 logo 图片配合背景颜色。

我是按下面的方法来实现的。

实现 iOS 闪屏

@Mscynol
Copy link
Author

Mscynol commented Apr 7, 2024

IOS适配所有机型的闪屏步骤示例子,本例子在Xcode 15.3中
第一步:新建一个文件名LaunchImage的图片集
image

第二步骤需要设计师出一系列如下比例的图片
image

@Mscynol
Copy link
Author

Mscynol commented Apr 7, 2024

以上图片需要手动一一拖入第一步新建的launchImage中,拖入不对的会有感叹号,所有的都调整正确!
接下来第三步:配置图片约束和相关配置
image

按照图示意图勾选掉 user safe area layout guides

@Mscynol
Copy link
Author

Mscynol commented Apr 7, 2024

第四步:向Launchscreen.storyboard中拖入Image View
image

@Mscynol
Copy link
Author

Mscynol commented Apr 7, 2024

第五步:选择mageView ,为新建的ImageView 添加约束全部为0
image
标记的1 2 3 4处的小红虚线,必须鼠标点击一下变为实体红线之后在填0,5处不勾选,这样才是真正的写入约束,最后点击 add constraints

@Mscynol
Copy link
Author

Mscynol commented Apr 7, 2024

第6步骤:左侧选择Imageview,将第一步新建的图集名字复制粘贴到这右侧🫱
image

@Mscynol
Copy link
Author

Mscynol commented Apr 7, 2024

到此为止,屏幕上下两端会有留白
第7步骤:选中底部约束,选中First item,选择Superview ,并且将Constant 设置为0
image

@Mscynol
Copy link
Author

Mscynol commented Apr 7, 2024

第八步骤:选中顶端约束,选中Second Item,选择Superview,并且将Constant 设置为0
image

@Mscynol
Copy link
Author

Mscynol commented Apr 7, 2024

记得图片选择small to fill
image
此时此刻,我们就设置完毕了,大家有需要的可以尝试

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants