我们用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启动白屏的一种解决方案上的更多相关文章

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

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

  2. 解决android 启动白屏问题

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

  3. 运行React Native项目出现白屏,无法运行

    运行React Native出现白屏,无法运行,查看终端报错如下: 原因: 代码中有语法错误,导致运行失败. 其实到这里可以去Xcode查看控制台打印,会提示哪个文件出现错误的. 解决办法: 找到报错 ...

  4. Android 启动白屏或者黑屏闪现解决

    1.设置Style //1.设置背景图Theme <style name="Theme.AppStartLoad" parent="android:Theme&qu ...

  5. react native 完美解决启动白屏

    先讲下我的RN版本0.58.5 首先安装react-native-splash-screen(目前使用的版本是3.2.0) 项目地址https://github.com/crazycodeboy/re ...

  6. React native android 最常见的10个问题

    这里逐条记录下最容易遇到的React native android 相关case: 1. app启动后,红色界面,unable load jsbundle : 解决办法:一般来说就是,你是用dev-s ...

  7. React Native Android 环境搭建

    因为工作需要,最近正在学习React Native Android.温故而知新,把学习的内容记录下来巩固一下知识,也给有需要的人一些帮助. 需要说明的是,我刚接触React Native也不久,对它的 ...

  8. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

  9. react-native —— 在Mac上配置React Native Android开发环境排坑总结

    配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...

随机推荐

  1. token的理解

    今天学习了token,它的英文意思是令牌的意思.在我理解即像通行证一样,在用户登录成功系统后,会为这个用户颁发一个token,这样它去其他系统都免登录,因为有了这个令牌. token的生成我们可以用U ...

  2. WebService和Http的POST和GET请求区别和示例

    web service(SOAP) Webservice的一个最基本的目的就是提供在各个不同平台的不同应用系统的协同工作能力.Web service 就是一个应用程序,它向外界暴露出一个能够通过Web ...

  3. js判断当前页面是顶级窗口

    <script> if(top.location!=self.location){ alert("不是顶层窗口"); }else{ alert("是顶层窗口& ...

  4. 考研:操作系统:进程同步—信号量实现同步互斥(PV操作)

    进程互斥的硬件实现方法

  5. Spring RedisTemplate操作-通道操作(10)

    @Autowired @Resource(name = "redisTemplate") private RedisTemplate<String, String> r ...

  6. Spring Cloud(十二)声名式服务调用:Feign 的使用(下)

    前言 本文是对上一篇博文的扩充,很多平时用不到的特性就开始简略一写,Spring Cloud各版本之间的差距很大的,用不到的可能下一个版本就被kill掉了.由于笔者写本文开始的时候误解了Feign的继 ...

  7. 加速计 & CoreMotion

    CHENYILONG Blog 加速计 & CoreMotion 加速计 & CoreMotion 技术博客http://www.cnblogs.com/ChenYilong/ 新浪微 ...

  8. 01:MFC应用程序编程

    一 MFC的发展 VC 1.0->VC 5.0->VC 6.0->VC2008 SP1)->VS2010 二 MFC基础 1 MFC 微软基础类库 采用类的方式,将Win32 ...

  9. HDU 4502 吉哥系列故事——临时工计划(一维动态规划)

    题意:吉哥的假期是1到n天,然后有m个工作可以让吉哥选择做,每个工作都有一个开始 t_s  和结束的时间   t_e ,都用天来表示,然后每个工作必须从第一天做到最后一天, 从头到尾做完之后就可以得到 ...

  10. Windows::Docker::Ubuntu 做 SLAM

    如题,这是一件很蛋疼的事情. 为了完成这一件事情,需要达成目标: Ubuntu GUI 必须要能够显示. Ubuntu 可以链接 USB Camera. 目标一 目标1很容易达成. 在 Win10 中 ...