RN配置启动页，解决app启动白屏问题，实现启动页全屏展示

本文记录配置 andriod app 启动页
环境：react-native: 0.70.4
机型：小米10
参考：https://www.jianshu.com/p/251d1c5dc0db

1、最简单配置

文件位置 android\app\src\main\res\values\styles.xml

配置代码展示

<resources>
    <style>
    	<item name="android:windowDisablePreview">false</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <!-- 设置状态栏颜色，解决其影响启动页全屏展示问题 -->
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
        <item name="android:windowBackground">@drawable/launch_screen</item>
    </style>

</resources>

2、实现手动控制关闭启动页

懒得写>_>配置参考：https://www.cnblogs.com/fe-linjin/p/10685676.html

文件目录

手动关闭示例

调用上面配置时注册的SplashScreenModule原生模块暴露的接口

// src\pages\home\index.jsx
  import { NativeModules } from 'react-native';
  const { SplashScreenModule } = NativeModules;
  ...
  useEffect(() => {
    // listenBack();//监听 ： 两次点击返回按钮退出APP
    // getImage();//
    SplashScreenModule.hide();//关闭启动页
    return () => {
      // removeListenBack();
    }

  }, [])

效果展示

WeChat_20221116202402

详细配置参考

github：https://github.com/QWYZ/studyRN