React Native Android白屏优化终极方案

最新推荐文章于 2023-02-10 18:24:45 发布

原创

最新推荐文章于 2023-02-10 18:24:45 发布 · 置顶 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #react-native #白屏优化

本文探讨了在Android项目中集成React Native时遇到的白屏问题及其优化方案。现有方案通过缓存ReactInstanceManager和ReactRootView提高加载速度，但导致页面生命周期不执行。改进方案仅缓存ReactInstanceManager，每次进入ReactActivity时新建ReactRootView，有效解决生命周期问题，提供更好的用户体验。

本方案适用于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对象。具体代码如下：

public class RNCacheViewManager {

    private

最低0.47元/天解锁文章