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() //设置主MoudleName 其实就是index.android
getBundleAssetName() //Bundle文件的名字
它会帮你创建一个单例: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调用。
所以只要实现了ReactPackage和NativeModule,将它注册到ReactNativeHost 或者ReactInstanceManager ,就可以在React Native中继承你原生的模块了。