react native 完美解决启动白屏

时间:2022-05-16 01:45:57

先讲下我的RN版本0.58.5

首先安装react-native-splash-screen(目前使用的版本是3.2.0)

项目地址https://github.com/crazycodeboy/react-native-splash-screen

原理参考作者的文章:https://www.jianshu.com/p/78571e5435ec

安装了这个组件后,可以解决掉RN的启动白屏,但是启动时仍然会有一小段的白屏,

这个是ANDROID本身的白屏,要解决掉这个白屏

需要修改android目录下app/src/main/res/values/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="android:windowTranslucentStatus">true</item>

        + <item name="android:statusBarColor">@android:color/transparent</item

        + <item name="android:windowBackground">@drawable/launch_screen</item>

        + <item name="android:windowFullscreen">true</item>

</style>

其中有 + 号的行为后增加的行,其主要原理就是ANDROID启动时先设置一个背景,这里面我们把背景设成和react-native-splash-screen组件一样的背景,

<item name="android:windowBackground">@drawable/launch_screen</item>

这样设置完成后,启动时确实没有白屏了,但是有一个问题,我们在启动时的背景是全屏,没有标题栏,但是当react-native-splash-screen的背景启动时,就会出现标题栏,这时候图片就会有一个向下的位移,要解决这个问题,需要改下react-native-splash-screen的源码。

找到node_modules/react-native-splash-screen/android/src/main/res/values/styles.xml

<resources>
<style name="SplashScreen_SplashAnimation">
<item name="android:windowExitAnimation">@android:anim/fade_out</item>
</style> <style name="SplashScreen_SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowAnimationStyle">@style/SplashScreen_SplashAnimation</item>
+ <item name="android:windowNoTitle">true</item>
+ <item name="android:windowTranslucentStatus">true</item>
</style>
<style name="SplashScreen_Fullscreen" parent="SplashScreen_SplashTheme">
<item name="android:windowFullscreen">true</item>
</style>
</resources>

同样的带 + 号的行是增加的行

react native 完美解决启动白屏的更多相关文章

  1. 写启动界面Splash的正确姿势&comma;解决启动白屏(转)

    原文链接:http://www.jianshu.com/p/cd6ef8d3d74d 从我学习写第一个android项目以来,我都是这样写着启动界面: 在里面做一些事,比如:第一次启动时拷贝数据. 然 ...

  2. React Native 首次加载白屏优化

    RN首次加载都会有个白屏过程,一般都会有500ms+的白屏时间,原生页面开发同样的页面会能够快速显示而在RN页面中有个明显的等待过程,这个会影响用户体验. 1.使用过渡页面 简单处理可以在白屏过程中加 ...

  3. React Native Android启动白屏的一种解决方案上

    我们用RN去开发Android应用的时候,我们会发现一个很明显的问题,这个问题就是启动时每次都会有1~3秒的白屏时间,直到项目加载出来 为什么会出现这个问题? RN开发的应用在启动时,首先会将js b ...

  4. Flutter应用在夜神模拟器启动白屏问题

    Flutter应用在夜神模拟器启动白屏问题 flutter run  出现如下错误 [ERROR:flutter/shell/gpu/gpu_surface_gl.cc(39)] Failed to ...

  5. React Native Android启动白屏的一种解决方案下

    实现思路 思路大流程: 1.APP启动的时候控制ReactActivity从而显示启动屏. 2.编写原生模块,提供一个关闭启动屏的公共接口. 3.在js的适当位置(一般是程序初始化工作完成后)调用上述 ...

  6. Android开发之解决APP启动白屏或者黑屏闪现的问题

    在做搜芽的过程中,发现那个外包人缘做的不行,由于启动的时候会停顿,然后白屏一会,联想到几个月前我在我的三僚企业通信软件里面拉起9K-Mail的时候也会黑屏,所以决定学习一下.解决一下.这不,万能的网络 ...

  7. 解决 APP启动白屏黑屏问题

    闪屏页简介 闪屏页,我们手机上的每个 APP 几乎都有自己的闪屏页,就是在真正进入程序前,会有一个页面停顿几秒钟.其实我们完全可以充分利用好这几秒钟做很多的程序初始化了启动. 为什么我的 APP 启动 ...

  8. 解决android splash 启动白屏问题

    有时我们会发现 ,在splash 页面启动之前会有那么零点几秒的白屏, 真的很让人抓狂 解决办法其实也很简单 . 1.在style.xml中定义一个样式, 这里引入 splash页面的 图片, 注意不 ...

  9. 解决android 启动白屏问题

    Android 启动APP时黑屏白屏的三个解决方案 http://www.cnblogs.com/liqw/p/4263418.html android:windowSoftInputMode属性使用 ...

随机推荐

  1. VBS&lowbar;For&lowbar;next

    指定循环次数,使用计数器重复运行语句,语法结构如下: 1 2 3 4 5 For counter = start To end [Step step]     [statements]     [Ex ...

  2. javaScript 对json数据按key值排序

    var ajson= { "result":[ { "cid":1, "name":"aaa", "price ...

  3. &lbrack;Eclipse&rsqb;The type XXX cannot be resolved&period; It is indirectly referenced from required &period;class files

    在Eclipse中遇到The type XXX cannot be resolved. It is indirectly referenced from required .class files错误 ...

  4. js获取上传文件扩展名

    File_box.value.substring(File_box.value.lastIndexOf(".") + 1);

  5. iOS 10 &lpar;X8&rpar;上CoreData的使用&lpar;包含创建工程时未添加CoreData&rpar;

    1.在创建工程时未添加CoreData,后期想要使用CoreData则要在工程Appdelegate.h文件中添加CoreData库和CoreData中的通道类(用来管理类实例和CoreData之间的 ...

  6. linux操作提示:&OpenCurlyDoubleQuote;Can&amp&semi;&num;39&semi;t open file for writing”或&OpenCurlyDoubleQuote;operation not permitted”的解决的方法

    在linux上使用vi命令改动一个文件内容的时候,发现无法保存,每次写完使用":q!"命令能够正常退出可是使用":wq!"命令保存文件并退出时出现一下信息提示: ...

  7. Axis1&period;4之即时发布服务

    下载axis1.4开发包,解压开发包,将webapps目录下的axis文件夹拷贝到tomcat的webapps目录下.启动tomcat,在浏览器输入http://localhost:8080/axis ...

  8. 一例完全理解vue 2&period;0 的slots 和 functional render

    https://jsfiddle.net/pronan/mjqpmw0u/ 通过调节plan="bbb"的值, 比如换成plan="children",你会发现 ...

  9. Maven settings&period;xml

    <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...

  10. linux局域网内挂载其它操作系统目录

    一.linux挂载windows 1.windows目录打开共享: 2.mount -t cifs -o username=admin***tor,password=abc //192.168.*** ...