React Native 启动页组件 react-native-bootsplash – OnlyLing

最开始使用的是 react-native-splash-screen，后来发现它在多渠道打包的时候有问题，该问题也有人提了 PR，但是一直没有合并，所以正好换一个。

使用

yarn add react-native-bootsplash

项目中使用的是 React Native 0.60.0+ 的版本，所以就不需要手动连接了。

生成启动页需要的原生端文件、页面。

yarn react-native generate-bootsplash assets/bootsplash_logo_original.png \
  --background-color=F5FCFF \
  --logo-width=100 \
  --assets-path=assets \
  --flavor=main

assets/bootsplash_logo_original.png 项目根目录下方某个图片文件路径，该文件最好是正常图标的 4 倍。

--background-color 启动页的背景色。

--logo-width 启动页所用图片的宽，正常图片、设计稿上的的宽。

--assets-path 动态生成图片保存的路径，该命令会把指定文件做缩小处理生成 1、1.5、2、3、4 倍图，然后复制到 Android、iOS 文件夹内使用。

--flavor Android 打包渠道，默认 main 就好，生成 Android 相关的文件会创建到 android/app/src/main/res 该渠道文件夹内。

执行这个命令后会多一些文件，例如

android/app/src/main/res/drawable/bootsplash.xml Android 启动页布局文件，会原生的可以自己改。

android/app/src/main/res/mipmap-xxx/xxxx.png bootsplash.xml 文件使用的图片。

ios/LaunchScreen.storyboard iOS 启动页。

ios/YourApp/Images.xcassets/BootSplashLogo.imageset iOS 启动页用到的图片。

接着是参考文档把 Android、iOS 文件夹内的一些文件修修改改，不做太多描述。

在 React Native 中关闭启动页。

import RNBootSplash from "react-native-bootsplash";

RNBootSplash.hide(); // immediate
RNBootSplash.hide({ fade: true }); // fade

其他

Android 端启动页状态栏修改。

在 react-native-splash-screen 中可以同个配置 status_bar_color 修改状态栏背景色，react-native-bootsplash 这边并没有提供对应的配置，它更推荐在 android/app/src/main/res/values/styles.xml 文件中按照原始方案修改。

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#11151A</item>
        <item name="colorControlActivated">@color/primary</item>
        <item name="android:statusBarColor">@android:color/white</item>
        <item name="android:navigationBarColor">@android:color/white</item>
    </style>

    <!-- Add the following lines (BootTheme should inherit from AppTheme) -->
    <style name="BootTheme" parent="AppTheme">
        <!-- set the generated bootsplash.xml drawable as activity background -->
        <item name="android:background">@drawable/bootsplash</item>
    </style>

</resources>

启动页样式。

启动页默认图片居中，如果想要修改。

Android 在 android/app/src/main/res/drawable/bootsplash.xml 文件内改。

iOS 修改导入的启动页。

转载请注明：OnlyLing - Web 前端开发者 » React Native 启动页组件 react-native-bootsplash

使用

其他

与本文相关的文章