React-native集成到原生项目

以下基于react-native 0.64.2

更新说明

日期	更新内容
2021-08-12	补充RN调试及bundle加载的信息
2021-07-10	-

1. React Native集成到原生项目中

1.1. RN的工作原理

对于RN的工作原理，这里简单说明一下不做深入的探索，主要是为了更好地了解和使用RN。

1.2. 推荐集成方式

在原生项目中直接集成RN并不一定很好操作，更快捷和合理的方法是通过RN创建一个全新的项目，然后再将原项目移植到该项目下替换原来的android文件夹中的原生项目。

使用此方法可以尽可能保证集成时不必要的麻烦。

1.3. 集成RN的开发环境

此部分操作以官网提供的方式集成即可，一般以最新版本的RN集成相应的环境。

官方中文文档参考，包含环境集成，混合集成

在MAC系统中，RN使用的npm包管理及其它环境，都需要安装/usr/local/bin到路径下，由于MAC系统最新系统可能对系统路径有访问的权限限制，所以使用homebrew安装的话可能会出现一些无法安装的情况。如果原环境中已经有homebrew等环境，建议直接升级即可。

1.4. 原生与JS通讯交互

原生与JS交互的事件通讯

1.4.1. 原生->JS

原生与JS的通讯一般通过事件进行数据的传递。双方通过注册和使用相同名称的事件名称进行事件收发。

WritableMap params = Arguments.createMap();
params.putString("message",msg.obj.toString());
//reactContext为RN注册创建模块时由package提供的
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
        .emit(eventName, params);

其中reactContext是RN的模块在package中创建并注册时，由RN框架提供的。每个RN的模块也都是需要该参数初始化的。以下是一个RN桥接模块的实现示例。

public class CustomToastPackage implements ReactPackage{
   
   
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
   
   
        //来自RN的框架提供的
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ToastModule(reactContext));
        return modules;
    }
}

public class ToastModule extends ReactContextBaseJavaModule {
   
   
    //每个RN模块都是需要使用该 reactContext 来提供初始化的
    public ToastModule(ReactApplicationContext</