ReactNativeHost介绍

1.什么是ReactNativeHost
ReactNativeHost是ReactNativeInstanceManager的土壤,为ReactNativeInstanceManager提供一定的环境,相当于装箱操作,帮你管理ReactInstanceManager。
2.什么时间创建?
在创建React Native项目的时候会自动帮你创建ReactNativeHost,这个小可爱在什么地方呢,如果你打开APP的Application就会惊奇的发现这个小可爱,通过getApplication,你可以随时拿到ReactNativeHost,先看下ReactNativeHost内部都有什么方法

    private final ReactNativeHost mjtReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }
        @Override
        protected String getJSBundleFile() {
          return super.getJSBundleFile();
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.asList(
                new MainReactPackage(),
                ...
            );
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }

        @Override
        protected String getBundleAssetName() {
            return "index.mjt.android.bundle";
        }
    };

ReactNativeHost 包含的方法有
getUseDeveloperSupport() 设置是否支持通过摇晃手机弹出React Native开发者模式
getJSBundleFile() 获取项目Assests下的Bundle文件,这个Bundle里边是ReactNative代码。
getPackages() 包含多个ReactPackage,每个ReactPackage包含多个ReactModule,每个Module中是Java与JS通信的代码。
getJSMainModuleName()
getBundleAssetName()
它会帮你创建一个单例:ReactInstanceManager 作为管理器。ReactNativeHost还可以配置一系列的行为,其中最关键的,便是getPackages接口。

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.asList(
                    new MainReactPackage(),
                  ...
            );	
        }
    };

getPackages 接口返回了一系列的ReactPackage类,ReactPackage可以看作是,向ReactNative注册了原生模块,这样在JS中你也可以使用原生模块的功能。
下边介绍下ReactPackage,先看个例子

public class LoginPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new LoginModule(reactContext));
        return modules;
    }
...
}

ReactPackage中承载了多个Module,每个Module都是具体的功能实现。
Module中你可以通过@ReactMethod注解,指定一个方法为JS可以调用的方法,如下图的openWebview,便是继承了NativeModule的JAVA端实现类,且可以在js中引入。
Android端例子如下

 @ReactMethod
    public void openWebview(String url) {
      ...
    }
import {
  NativeModules
} from 'react-native';
 RN端使用方法是   NativeModules.xxx.openWebview()
 注意:上处xxx是指Module 中的 getName()

总结一下:
MainApplication继承了ReactApplication,返回了ReactNativeHost。
ReactNativeHost里创建了ReactInstanceManager,并且实现了getPackages,返回了ReactPackage列表。
ReactInstanceManager在创建Builder时,把ReactPackage列表加入到管理器。
ReactPackage列表里面都关联了NativeModule的实现类。
NativeModule的实现类可以通过注解,类似@ReactMethod让原生方法可以被React调用。

粗略流程:
 MainApplication -> ReactApplication -> ReactNativeHost -> ReactInstanceManager -> ReactPackage -> NativeModule -> CatalystInstance(这位就是负责发送的同志)

所以只要实现了ReactPackage和NativeModule,将它注册到ReactNativeHost 或者ReactInstanceManager ,就可以在React Native中继承你原生的模块了。

2.ReactNativeHost有什么用。
3.怎么用ReactNativeHost
4.总结

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章