如何为React Native应用添加图片或渐变色彩的Splash Screen启动屏

优先方案：渐变背景启动屏实现 #

react-native-bootsplash 默认仅支持纯色背景配置，渐变效果需要在原生端单独修改启动页布局：

iOS 端操作步骤 #

• 打开iOS项目下的ios/项目名/LaunchScreen.storyboard文件，删除默认的纯色背景视图
• 新增全屏渐变视图：可以通过Xib可视化拖拽View后配置CAGradientLayer属性，也可以手写渐变代码绑定到启动页视图
• 配置渐变的起始色、结束色、渐变方向参数，将原有启动图标视图放到渐变视图的上层，保持和之前一致的居中位置、尺寸
• 给渐变视图添加四边贴紧父视图的Auto Layout约束，避免异形屏出现留白
  iOS 12及以上系统对启动页渐变渲染无兼容问题，无需额外做版本适配

Android 端操作步骤 #

• 打开安卓项目下的app/src/main/res/drawable/bootsplash.xml文件
• 替换原有纯色背景的item为渐变drawable配置，示例代码如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 渐变背景 -->
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:angle="270"
                android:startColor="#2E3192"
                android:endColor="#1BFFFF"
                android:type="linear" />
        </shape>
    </item>
    <!-- 原有启动图标配置，保留不动即可 -->
    <item
        android:drawable="@drawable/bootsplash_icon"
        android:gravity="center" />
</layer-list>

如需径向、扫描渐变效果，修改android:type属性为对应的radial/sweep即可

降级方案：自定义图片背景启动屏实现 #

如果渐变配置存在兼容问题，用全屏背景图片替换实现成本更低：

前置准备 #

• 切出适配不同分辨率的背景图：
  • iOS端需要导出1x、2x、3x三个尺寸的图片
  • Android端需要把对应分辨率的图片放到drawable-mdpi/hdpi/xhdpi/xxhdpi/xxxhdpi对应文件夹下
• 背景图需要预留顶部、底部安全区域，避免刘海屏、挖孔屏裁切重要元素

iOS 端操作步骤 #

• 把切好的背景图导入Xcode的Image Assets中
• 打开LaunchScreen.storyboard，将背景视图的内容设置为导入的背景图，配置Aspect Fill属性，添加四边贴紧父视图的约束即可

Android 端操作步骤 #

• 修改bootsplash.xml文件的背景配置，示例如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 自定义背景图 -->
    <item android:drawable="@drawable/你的背景图文件名（无需带后缀）" />
    <!-- 原有启动图标配置 -->
    <item
        android:drawable="@drawable/bootsplash_icon"
        android:gravity="center" />
</layer-list>

如果你使用的是4.x及以上版本的react-native-bootsplash，可以直接在初始化生成配置的命令中指定--background参数为本地背景图路径，工具会自动生成双端配置，无需手动修改原生文件

所有原生配置修改完成后，需要执行cd ios && pod install && cd ..重新安装iOS依赖，之后双端都要完全卸载设备上的原有测试包再重新编译运行，避免缓存导致配置不生效。

内容的提问来源于stack exchange，提问作者Manko