React Native Android启动白屏的一种解决方案上
我们用RN去开发Android应用的时候,我们会发现一个很明显的问题,这个问题就是启动时每次都会有1~3秒的白屏时间,直到项目加载出来
为什么会出现这个问题?
RN开发的应用在启动时,首先会将js bundle读取到内存中,然后再完成渲染。那么这段等待的时间就导致了白屏的问题。(换句话来说,这个白屏时间是程序为了完成初始化加载数据,做一些初始化工作所保留的时间,如果在这段时间中不对启动屏做一些优化,就会呈现给用户一个白屏的时间段,用户体验较差)
我们可以利用白屏做点什么?
目前我们手机上所安装的绝大部分APP在启动的时候,都会有一个启动屏,这个启动屏可以是软件的欢迎页,也有启动屏是广告的,这对于用户来说是非常友好的。
解决Android白屏的一种方案
为React Native Android添加启动屏
先不急着动刀子,来一波原理分析
通过react-native init 初始化的应用,在Android部分,有一个MainActivity,它是整个Android程序的入口。
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "RN_APP";
}
}
通过上述代码可以看出MainActivity很干净,就一个getMainComponentName()方法。显然启动白屏不是因为MainActivity导致的。
接下来,我们就继续探索,进入ReactActivity源码一探究竟。
/** ReactActivity.java */
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mDelegate.onCreate(savedInstanceState);
}
上面代码是ReactActivity的onCreate方法的代码,onCreate作为一个Activity的入口,负责着程序初始化等一系列工作。这里有两个onCreate,第一个为调用父类完成一些初始化工作,我们重点进入第二个onCreate方法中,一探究竟
/** ReactActivityDelegate.java */
protected void onCreate(Bundle savedInstanceState) {
if (mMainComponentName != null) {
loadApp(mMainComponentName);
}
mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();
}
真是山路十八弯,看到loadApp那一瞬间眼睛就湿了,纵里寻她千百度,就你了!
/** ReactActivityDelegate.java */
protected void loadApp(String appKey) {
if (mReactRootView != null) {
throw new IllegalStateException("Cannot loadApp while app is already running.");
}
mReactRootView = createRootView();
mReactRootView.startReactApplication(
getReactNativeHost().getReactInstanceManager(),
appKey,
getLaunchOptions());
getPlainActivity().setContentView(mReactRootView);
}
上述代码中,首先通过 mReactRootView = createRootView();创建一个根视图,该视图便是React Native应用的最顶部视图。
然后通过mReactRootView.startReactApplication方法,加载并渲染js bundle,此过程是比较耗时的。
最后,通过setContentView(mReactRootView);将根视图绑定到Activity界面上。
基本原理就是这些,下面我们就对ReactActivity动动刀子。
React Native Android启动白屏的一种解决方案上的更多相关文章
- React Native Android启动白屏的一种解决方案下
实现思路 思路大流程: 1.APP启动的时候控制ReactActivity从而显示启动屏. 2.编写原生模块,提供一个关闭启动屏的公共接口. 3.在js的适当位置(一般是程序初始化工作完成后)调用上述 ...
- 解决android 启动白屏问题
Android 启动APP时黑屏白屏的三个解决方案 http://www.cnblogs.com/liqw/p/4263418.html android:windowSoftInputMode属性使用 ...
- 运行React Native项目出现白屏,无法运行
运行React Native出现白屏,无法运行,查看终端报错如下: 原因: 代码中有语法错误,导致运行失败. 其实到这里可以去Xcode查看控制台打印,会提示哪个文件出现错误的. 解决办法: 找到报错 ...
- Android 启动白屏或者黑屏闪现解决
1.设置Style //1.设置背景图Theme <style name="Theme.AppStartLoad" parent="android:Theme&qu ...
- react native 完美解决启动白屏
先讲下我的RN版本0.58.5 首先安装react-native-splash-screen(目前使用的版本是3.2.0) 项目地址https://github.com/crazycodeboy/re ...
- React native android 最常见的10个问题
这里逐条记录下最容易遇到的React native android 相关case: 1. app启动后,红色界面,unable load jsbundle : 解决办法:一般来说就是,你是用dev-s ...
- React Native Android 环境搭建
因为工作需要,最近正在学习React Native Android.温故而知新,把学习的内容记录下来巩固一下知识,也给有需要的人一些帮助. 需要说明的是,我刚接触React Native也不久,对它的 ...
- react-native —— 在Windows下搭建React Native Android开发环境
在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...
- react-native —— 在Mac上配置React Native Android开发环境排坑总结
配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...
随机推荐
- 解题:HEOI 2012 朋友圈
题面 因为$A$中只有奇偶性不同的人才能做朋友,所以A中只可能出0/1/2个人,分类讨论 然后$B$中求最大团,转成补图后正好是个二分图(不然就不用做了),求最大点独立集=总点数-最大匹配 我洛谷上交 ...
- 【POJ2728】Desert King 最优比率生成树
题目大意:给定一个 N 个点的无向完全图,边有两个不同性质的边权,求该无向图的一棵最优比例生成树,使得性质为 A 的边权和比性质为 B 的边权和最小. 题解:要求的答案可以看成是 0-1 分数规划问题 ...
- LeetCode 9 合并两个有序列表
将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1->3->4 输出:1->1->2- ...
- 【转】如何学习android开发
1.Java基础 很多朋友一上手就开始学习Android,似乎太着急了一些.Android应用程序开发是以Java语言为基础的,所以没有扎实的Java基础知识,只 是机械的照抄别人的代码,是没有任何意 ...
- python爬虫 抓取一个网站的所有网址链接
sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...
- 转:Xcode打印堆栈信息
2# 分享于 14-11-26 19:15:36 Chrome 39.0.2171.71 Mac OS X 10.10.1 如果只是看调用栈的话,可以使用 lldb 的功能.在你的代码里面打上一个 ...
- bzoj千题计划183:bzoj1197: [HNOI2006]花仙子的魔法
http://www.lydsy.com/JudgeOnline/problem.php?id=1197 题意转化:在n维空间中放m个n维球,问最多将空间分成几部分 f[i][j] 表示在i维空间中放 ...
- mysql出现ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' 错误
init 神奇..其他的都没有成功,这个居然成功了!! 还试验过:sudo mysqld restart啥的,都没有用......
- 自定义泛型_无多态_通配符无泛型数组_jdk7泛型使用
通配符 T, K, V, E 等泛型字母为有类型, 类型参数赋予具体的值 ? 未知类型 类型参数赋予不确定值, 任意类型 只能用在 声明类型上,方法参数上, 不能用在定义泛型类上 上限 extends ...
- ASP.NET MVC学习(二)之控制器Controller
1.控制器 Controller接收用户请求,将Model和View匹配在一起,共同完成用户请求.它是一个分发器,通过选择不同的Model.View,可以决定完成不同的用户请求. 但Controlle ...