React Native填坑之旅--开启TurboModule（Android)

FB宣传了N多年的新架构估计很多人都熟知了。最主要的改进就是从所有通讯都通过异步Bridge的方式转为直接通讯的方式。减少消息通讯延迟，提高性能。这其中最关键的就是TurboModule。

开启TurboModule

开启TurboModule没有文档。只有就的原生module里夹杂着只言片语。一个例子就把开发同学带到react-native的代码里了。这说明官方早就支持这个机制了，只是没正式官宣。但是复杂度太高，还需要对react-native的repo代码结构有了解。还有一个更好的例子react-native-animated。

这个项目大小适中，结构也不那么复杂。很适合类比研究，实现。

实现NativeModule

和之前一样，继承ReactContextBaseJavaModule。具体可以参考这里。实现getName方法。

添加ReactModule注解

这是和之前的方式不同的一点。

现在代码看起来是这样的:

@ReactModule(name = ReanimatedModule.NAME)
public class ReanimatedModule extends ReactContextBaseJavaModule {

  public static final String NAME = "ReanimatedModule";

  public ReanimatedModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return NAME;
  }
}

最后添加ReactMethod

  @ReactMethod
  public void animateNextTransition(int tag, ReadableMap config) {
    mTransitionManager.animateNextTransition(tag, config);
  }

原生模块这部分就完事儿了。下面看看如何注册这个原生模块。

注册原生模块

这个部分就是重点了。上一节，和之前开发原生模块唯一不同的点就是多了一个@ReactModule的注解。这一部分不同的地方就有点多，按照官网的说法是比之前稍微多了几步。

1. 添加一个继承了TurboReactPackage的类

public class ReanimatedPackage extends TurboReactPackage {}

2. 实现getModule方法

  @Override
  public NativeModule getModule(String name, ReactApplicationContext reactContext) {
    if (name.equals(ReanimatedModule.NAME)) {
      return new ReanimatedModule(reactContext);
    }

    return null;
  }

3. 实现getReactModuleInfoProvider

  @Override
  public ReactModuleInfoProvider getReactModuleInfoProvider() {
    Class[] moduleList =
        new Class[] {
          ReanimatedModule.class, ReanimatedUIManager.class,
        };

    final Map reactModuleInfoMap = new HashMap<>();
    for (Class moduleClass : moduleList) {
      ReactModule reactModule = moduleClass.getAnnotation(ReactModule.class);

      reactModuleInfoMap.put(
          reactModule.name(),
          new ReactModuleInfo(        // *
              reactModule.name(),
              moduleClass.getName(),
              true,
              reactModule.needsEagerInit(),
              reactModule.hasConstants(),
              reactModule.isCxxModule(),
              TurboModule.class.isAssignableFrom(moduleClass)));
    }

    return new ReactModuleInfoProvider() {
      @Override
      public Map getReactModuleInfos() {
        return reactModuleInfoMap;
      }
    };
  }

在这里Module的名字依然扮演了重要的角色，它是把前(JS）后（原生），在原生里注册的多个原生模块之间如何找到那个模块都需要这模块名称。所以在初始化ReactModuleInfo的时候第一个参数就是模块名称。

第三个参数canOverrideExistingModule，一般在你还有不是TurboModules的时候最好是设置为false。

needEgerInit如果你需要这个模块懒加载的话设置为false。除非你要你的app在初始化的时候也一起初始化你的模块。这样会增加开机时间。

hasConstant如果你的模块有常量导出的话设置为true。

isCxxModule为true如果代码都是C代码。

isTurboModule如果当前模块是turbo module设置为true。不是为false。这个参数在这里是因为ReactModuleInfo不是只服务于turbo module的。

4. 在Application里注册Package

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List getPackages() {
      return Arrays.asList(
          // ...
          new ReanimatedPackage(), //*
          // ...
      );
    }
}

在方法getPackages()里注册ReanimatedPackage()对象。

总结

FB对React Native架构的优化主要集中在优化性能。在具体的开发活动里，主要就是利用turbo module来使用新架构的优化。加快开机速度，让动画更流畅，让长列表滚动更加流畅。