Android源码分析ReactNative之Debug下Bundle文件加载流程

2023-12-29 02:16:32

前言

React Native 是一种用于构建跨平台移动应用程序的开源框架。它使用 JavaScript 和 React 库构建应用程序，然后将它们编译成本机代码，以便它们可以在 Android 和 iOS 设备上运行。

在 React Native 开发中，我们需要在设备上加载 JavaScript 代码和资源文件，这些文件通常打包成一个 bundle 文件。在 debug 模式下，React Native 使用了一种不同的方式来加载 bundle 文件，这种方式可以让我们更方便地调试代码。

加载流程分析

React Native 在 debug 模式下加载 bundle 文件的流程如下：

当我们在 Android 设备上运行 React Native 应用时，首先会启动一个名为 adb reverse 的命令。这个命令会将设备上的端口转发到本地电脑的端口上。
然后，我们可以在本地电脑上启动一个名为 react-native run-android 的命令。这个命令会启动一个名为 Metro Bundler 的服务器，这个服务器会负责将 JavaScript 代码和资源文件打包成一个 bundle 文件。
Metro Bundler 会将 bundle 文件推送到设备上的端口上。
设备上的 React Native 应用程序会从端口上拉取 bundle 文件。
React Native 应用程序会将 bundle 文件加载到内存中。
React Native 应用程序会执行 bundle 文件中的 JavaScript 代码。

关键代码分析

在 React Native 源码中，负责加载 bundle 文件的类是 ReactNativeDevServerHelper。这个类中的 loadFromDevServer 方法负责从设备上的端口上拉取 bundle 文件。

public void loadFromDevServer() {
  String bundleUrl = getDevServerBundleURL();
  loadFrom(bundleUrl, null, false);
}

在 loadFromDevServer 方法中，我们首先调用 getDevServerBundleURL() 方法来获取设备上的端口号。然后，我们调用 loadFrom() 方法来从设备上的端口上拉取 bundle 文件。

private void loadFrom(String url, String devAssetUrl, boolean isSync) {
  if (sReactInstanceManager == null) {
    throw new IllegalStateException(
        "Cannot load script from dev server after instance has been destroyed");
  }

  BundleLoader.loadScriptFromUrl(sReactInstanceManager, url, isSync, devAssetUrl);
}