ReactNative Android 白屏问题

来源：互联网发布：汉字淘汰知乎编辑：程序博客网时间：2024/05/17 04:44

使用 React Native 开发混合应用的过程中，我们在打完 bundle 进 release 包后，会发现第一次进入页面（React 的 Activity）会有一个短暂的白屏过程（在真机上近 1秒，在模拟器上比较快，在 200毫秒左右），而且在完全退出后再进入，仍然会有这个白屏。

仔细查看加载过程（其实猜猜都能知道）后可以发现，这个过程就是在加载我们的 js bundle，通常即便是一个小的 RN 应用（混合应用中的子业务），也会动辄到 1MB 的大小，除非是完整的 RN 应用，可以把这个当做是启动速度，否则这样的加载速度都是对用户体验的很大伤害。

于是我们决定进行 Bundle 预加载的优化。

项目源码上传在：markzhai/react-native-preloader，稍后会上传到 maven，版本号会和 rn 保持一致。

耗时操作

见 ReactActivity 的 onCreate 方法：

@Overrideprotected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  if (getUseDeveloperSupport() && Build.VERSION.SDK_INT >= 23) {    // Get permission to show redbox in dev builds.    if (!Settings.canDrawOverlays(this)) {      Intent serviceIntent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION);      startActivity(serviceIntent);      FLog.w(ReactConstants.TAG, REDBOX_PERMISSION_MESSAGE);      Toast.makeText(this, REDBOX_PERMISSION_MESSAGE, Toast.LENGTH_LONG).show();    }  }  mReactRootView = createRootView();  mReactRootView.startReactApplication(    getReactNativeHost().getReactInstanceManager(),    getMainComponentName(),    getLaunchOptions());  setContentView(mReactRootView);  mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();}

打点后可以发现耗时的其实是

createRootView();
startReactApplication();

这两个操作，所以考虑只需要提前创建 ReactRootView 进行 render，之后直接挂载该 view 上去即可。

预加载

创建预加载类 ReactPreLoader：

public class ReactPreLoader {    private static final String TAG = "ReactPreLoader";    private static final Map<String, ReactRootView> CACHE_VIEW_MAP =            new ArrayMap<>();    /**     * Get {@link ReactRootView} with corresponding {@link ReactInfo}.     */    public static ReactRootView getRootView(ReactInfo reactInfo) {        return CACHE_VIEW_MAP.get(reactInfo.getMainComponentName());    }    /**     * Pre-load {@link ReactRootView} to local {@link Map}, you may want to     * load it in previous activity.     */    public static void init(Activity activity, ReactInfo reactInfo) {        if (CACHE_VIEW_MAP.get(reactInfo.getMainComponentName()) != null) {            return;        }        ReactRootView rootView = new ReactRootView(activity);        rootView.startReactApplication(                ((ReactApplication) activity.getApplication()).getReactNativeHost().getReactInstanceManager(),                reactInfo.getMainComponentName(),                reactInfo.getLaunchOptions());        CACHE_VIEW_MAP.put(reactInfo.getMainComponentName(), rootView);    }    /**     * Remove {@link ReactRootView} from parent.     */    public static void onDestroy(ReactInfo reactInfo) {        try {            ReactRootView rootView = getRootView(reactInfo);            ViewGroup parent = (ViewGroup) rootView.getParent();            if (parent != null) {                parent.removeView(rootView);            }        } catch (Throwable e) {            Log.e(TAG, e+"");        }    }}

在 init 操作中，我们通过 ReactInfo 缓存把 view 缓存在本地的 ArrayMap。值得注意的是 onDestroy，在 ReactActivity 销毁后，我们需要把 view 从 parent 上卸载下来。

使用预加载的 view

使用预加载的 View，就需要侵入 activity 的创建过程，我们无法再使用 RN 库提供的 ReactActivity，只能建立自己的，以下列出修改的方法，其他方法照抄 ReactActivity：

public abstract class MrReactActivity extends ReactActivity        implements DefaultHardwareBackBtnHandler, PermissionAwareActivity {    public ReactRootView mReactRootView;    public DoubleTapReloadRecognizer mDoubleTapReloadRecognizer;    public String TAG = "MrReactActivity";    public String REDBOX_PERMISSION_MESSAGE = "REDBOX_PERMISSION_MESSAGE";    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        if (getUseDeveloperSupport() && Build.VERSION.SDK_INT >= 23) {            // Get permission to show redbox in dev builds.            if (!Settings.canDrawOverlays(this)) {                Intent serviceIntent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION);                startActivity(serviceIntent);                FLog.w(ReactConstants.TAG, REDBOX_PERMISSION_MESSAGE);                Toast.makeText(this, REDBOX_PERMISSION_MESSAGE, Toast.LENGTH_LONG).show();            }        }        mReactRootView = ReactPreLoader.getRootView(getReactInfo());        if (mReactRootView != null) {            Log.i(TAG, "use pre-load view");        } else {            Log.i(TAG, "createRootView");            mReactRootView = createRootView(getApplicationContext());            if (mReactRootView != null) {                mReactRootView.startReactApplication(                        getReactNativeHost().getReactInstanceManager(),                        getReactInfo().getMainComponentName(),                        getReactInfo().getLaunchOptions());            }        }        setContentView(mReactRootView);        mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();    }    @Override    protected void onDestroy() {        super.onDestroy();        if (mReactRootView != null) {            mReactRootView.unmountReactApplication();            mReactRootView = null;            ReactPreLoader.onDestroy(getReactInfo());        }//        getReactNativeHost().clear();    }    protected ReactRootView createRootView(Context context/*Application application*/) {        return new ReactRootView(context);    }    protected boolean getUseDeveloperSupport() {        return BuildConfig.DEBUG;    }    public abstract ReactInfo getReactInfo();}

ReactInfo类

/** * Created by songyu on 2017/1/18. */public class ReactInfo {    private String mMainComponentName;    private Bundle mLaunchOptions;    public ReactInfo(String mainComponentName) {        mMainComponentName = mainComponentName;    }    public ReactInfo(String mainComponentName, Bundle launchOptions) {        mMainComponentName = mainComponentName;        mLaunchOptions = launchOptions;    }    public Bundle getLaunchOptions() {        return mLaunchOptions;    }    public String getMainComponentName() {        return mMainComponentName;    }}

优化后可以达到瞬间加载。

已知的坑

由于进行了预加载，目前已知的问题是 Modal 无法显示 —— 因为 Modal 在 Android 的实现使用了 Dialog，而该 View 将创建 ReactRootView 的 context 作为参数传给了 Dialog，而不是实际运行时所在的 Activity context。查看源码可以验证（com.facebook.react.views.modal）。

TimePickerAndroid 这类 picker 则没有问题。

0 0