最新消息:看到那些跳动的图片、文字了吗?点击点击 O(∩_∩)O~~

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

若思若想 onlyling 2252浏览

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

使用

参考 react-native-bootsplash 仓库文档,安装

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