本方案适用于Android原生项目集成React Native框架。
问题描述
我们公司的APP部分模块使用了react native进行开发,使用react native开发确实很爽,一次编写到处运行,前端的开发体验,高效的开发效率,但是我们进入react native模块的时候,会有明显的白屏,时间大概是1-2s,这是很差的用户体验,我们今天的这篇文章就是为了解决这个痛点。
已有方案
我相信很多同学可能都看过react native中文网推荐的ReactNative安卓首屏白屏优化这篇文章,这篇文章方案很给力!作者采用了内存换时间的方案,缓存了ReactInstanceManager和ReactRootView对象,我们只需要在应用启动的时候初始化,之后进入react native模块都是调用缓存里的数据,所以速度非常快。
此方案存在的小问题
但是试过的同学可能知道这个方案有个小问题:第一次进入react native模块之后,再次进入react native模块,react native 页面的生命周期都不会执行(render, componentDidMount等),因为我们拿的都是已经缓存好的数据,假如我们在react native页面请求数据更新页面,只有第一次进入的时候是有效的。
改进方案
因为发现了这个问题,所以在github上面向作者提了issue,作者给了耐心解答,所以把改进方案分享给大家,省的大家走弯路。这篇文章还是原作者cnsnake11的智力成果,我只是做个分享以及简化了一点点代码。
我们这篇文章的重点是Android白屏优化,关于Android原生项目集成react native,请看我另一篇文章Android原生集成react native。
我们现在的方案就是只缓存ReactInstanceManager,每次进入ReactActivity的时候新建一个ReactRootView对象。具体代码如下: