先讲下我的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 完美解决启动白屏的更多相关文章
-
写启动界面Splash的正确姿势,解决启动白屏(转)
原文链接:http://www.jianshu.com/p/cd6ef8d3d74d 从我学习写第一个android项目以来,我都是这样写着启动界面: 在里面做一些事,比如:第一次启动时拷贝数据. 然 ...
-
React Native 首次加载白屏优化
RN首次加载都会有个白屏过程,一般都会有500ms+的白屏时间,原生页面开发同样的页面会能够快速显示而在RN页面中有个明显的等待过程,这个会影响用户体验. 1.使用过渡页面 简单处理可以在白屏过程中加 ...
-
React Native Android启动白屏的一种解决方案上
我们用RN去开发Android应用的时候,我们会发现一个很明显的问题,这个问题就是启动时每次都会有1~3秒的白屏时间,直到项目加载出来 为什么会出现这个问题? RN开发的应用在启动时,首先会将js b ...
-
Flutter应用在夜神模拟器启动白屏问题
Flutter应用在夜神模拟器启动白屏问题 flutter run 出现如下错误 [ERROR:flutter/shell/gpu/gpu_surface_gl.cc(39)] Failed to ...
-
React Native Android启动白屏的一种解决方案下
实现思路 思路大流程: 1.APP启动的时候控制ReactActivity从而显示启动屏. 2.编写原生模块,提供一个关闭启动屏的公共接口. 3.在js的适当位置(一般是程序初始化工作完成后)调用上述 ...
-
Android开发之解决APP启动白屏或者黑屏闪现的问题
在做搜芽的过程中,发现那个外包人缘做的不行,由于启动的时候会停顿,然后白屏一会,联想到几个月前我在我的三僚企业通信软件里面拉起9K-Mail的时候也会黑屏,所以决定学习一下.解决一下.这不,万能的网络 ...
-
解决 APP启动白屏黑屏问题
闪屏页简介 闪屏页,我们手机上的每个 APP 几乎都有自己的闪屏页,就是在真正进入程序前,会有一个页面停顿几秒钟.其实我们完全可以充分利用好这几秒钟做很多的程序初始化了启动. 为什么我的 APP 启动 ...
-
解决android splash 启动白屏问题
有时我们会发现 ,在splash 页面启动之前会有那么零点几秒的白屏, 真的很让人抓狂 解决办法其实也很简单 . 1.在style.xml中定义一个样式, 这里引入 splash页面的 图片, 注意不 ...
-
解决android 启动白屏问题
Android 启动APP时黑屏白屏的三个解决方案 http://www.cnblogs.com/liqw/p/4263418.html android:windowSoftInputMode属性使用 ...
随机推荐
-
VBS_For_next
指定循环次数,使用计数器重复运行语句,语法结构如下: 1 2 3 4 5 For counter = start To end [Step step] [statements] [Ex ...
-
javaScript 对json数据按key值排序
var ajson= { "result":[ { "cid":1, "name":"aaa", "price ...
-
[Eclipse]The type XXX cannot be resolved. It is indirectly referenced from required .class files
在Eclipse中遇到The type XXX cannot be resolved. It is indirectly referenced from required .class files错误 ...
-
js获取上传文件扩展名
File_box.value.substring(File_box.value.lastIndexOf(".") + 1);
-
iOS 10 (X8)上CoreData的使用(包含创建工程时未添加CoreData)
1.在创建工程时未添加CoreData,后期想要使用CoreData则要在工程Appdelegate.h文件中添加CoreData库和CoreData中的通道类(用来管理类实例和CoreData之间的 ...
-
linux操作提示:“Can&;#39;t open file for writing”或“operation not permitted”的解决的方法
在linux上使用vi命令改动一个文件内容的时候,发现无法保存,每次写完使用":q!"命令能够正常退出可是使用":wq!"命令保存文件并退出时出现一下信息提示: ...
-
Axis1.4之即时发布服务
下载axis1.4开发包,解压开发包,将webapps目录下的axis文件夹拷贝到tomcat的webapps目录下.启动tomcat,在浏览器输入http://localhost:8080/axis ...
-
一例完全理解vue 2.0 的slots 和 functional render
https://jsfiddle.net/pronan/mjqpmw0u/ 通过调节plan="bbb"的值, 比如换成plan="children",你会发现 ...
-
Maven settings.xml
<?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...
-
linux局域网内挂载其它操作系统目录
一.linux挂载windows 1.windows目录打开共享: 2.mount -t cifs -o username=admin***tor,password=abc //192.168.*** ...