美文网首页
react-native项目Xcode11.3.1 (11C50

react-native项目Xcode11.3.1 (11C50

作者: 前端拾遗者 | 来源:发表于2020-03-19 14:10 被阅读0次

    问题描述:公司开发react-native项目。引入启动页,经自测发现,android没有问题,屏幕正常拉伸。ios端启动页没法正常拉伸,上下有黑边,且页面内容布局被挤压。

    异常图片

    于是开始了探索启动页正常配置的问题。

    初步断定是xcode配置项有问题。

    于是尝试,让UI提供所需适配的ios启动页。

    启动页图片

    然后拖到xcode的launchImage目录里,正确识别。

    但是跑起来发现出现上下黑边现象。

    于是自己找了一版尺寸正常的jpg格式的图片拖进去,图片正常识别,但是依然存在上下黑边的现象。

    然后,尝试清空构建的缓存,重新打开xcode,反复拖入正确尺寸的图片,试了很多次依然失败。

    于是,排除图片尺寸和格式问题。

    配置图片

    可以看到的是,工作区里启动页正确显示,但是却没有被正常加载到模拟器中。

    于是推测,是xcode新版的配置有了变化,与此同时利用搜索引擎搜到的解决方案都是千篇一律的老方案,和我使用的xcode11.3.1相去甚远。

    接下来开始了重复的探索,注意到

    配置过程

    build settings里appicon set name后面的value是AppIcon对应images.xcassets里的名字,如下图所示。

    配置过程

    而launch image set name后面的value对应的内容却是空字符串。所以猜测是因为没有加入正确的value导致xcode没有识别出正确配置的启动页,所以默认引用了xcode推荐新增的640*1136的启动页(位于ios目录下)。

    接来下尝试双击launch image set name右侧的值,输入LaunchImage,然后情调项目缓存,选择iPhoneX模拟器运行,果不其然,启动页被正常拉伸。如下图

    成功

    后来又尝试切换至默认的iPhone11proMax一样可以正常拉伸,填充整个屏幕,且页面内容布局正常。至此启动页不能全屏问题总算画上一个句点。

    最后要注意的是:

    从2020年4月开始,使⽤ iOS13 SDK 的 App 将必须提供 LaunchScreen,而LaunchImage将退出历史的舞台,说明以后启动页要通过LaunchScreen来设置了。

    小提示:遇到不熟悉的问题,多尝试几次,多点耐心,经得起折腾才能成功。

    相关文章

      网友评论

          本文标题:react-native项目Xcode11.3.1 (11C50

          本文链接:https://www.haomeiwen.com/subject/npflyhtx.html