大家吼，(◐‿◑)作为失踪人口回归，这次第二期，就让我们来怼React Native的通信，快速实现单独的React Native模块到APP里，愉悦吧骚年。至于为什么要有这期？当然是为了愉悦的飙车啦ε-(´∀｀; )。
下方包含源码剧透，剧情略长，请紧张耐心的往下看。(￣^￣)ゞ
文中标注有“【数字】”的是干货哟。
开始之前
本文前上部分主要拆解一些基础的原理，由浅到深；后半部分讲解集成模块实现，你也可以直接阅读后半部分，快速实现模块集成。文中着重在Android端帮助大家理解React Native。
下方先提前介绍一些关键类。
- ReactActivity：默认所有的Activity都继承它。
- ReactNativeHost ：帮你"hold"住ReactInstanceManager。
- ReactActivityDelegate：ReactActivity的逻辑代理实现。
- ReactRootView ：React NativeUI的所在。
- ReactInstanceManager：React Native的扛把子，抽象类。
- XReactInstanceManagerImpl ：ReactInstanceManager的实现类。
- ReactContext： 管理React Native的状态等。
- NativeModule：继承它的module可以在js端使用，其中就包括有DeviceEventManagerModule，与JS实现事件模式交互的module。
- Callback／Promise： 回调接口，与js端交互。
一、上半部分
1、MainApplication
默认react-native init创建的项目里，会有一个MainActivity 和一个MainApplication 。MainApplication继承了ReactApplication接口，接口只有一个方法：getReactNativeHost。
1.1、ReactNativeHost
这个接口实现在Application，通过getApplication，你可以随时拿到ReactNativeHost，它会帮你创建一个单例：ReactInstanceManager 作为管理器。ReactNativeHost还可以配置一系列的行为，其中最关键的，便是getPackages接口。
getPackages 接口返回了一系列的ReactPackage类，ReactPackage可以看作是，向ReactNative注册了原生模块，这样在JS中你也可以使用原生模块的功能，按键第三方库时，react-native link命令，其中一个行为，就是在getPackages中帮你插入，库需要引用到的模块。
如上图，是MainReactPackage 内部实现，MainReactPackage是官方的类，其中关联了很多NativeModule，Module中你可以通过@ReactMethod注解，指定一个方法为JS可以调用的方法，如下图的DetailModule，便是继承了NativeModule的JAVA端实现类，在js中引入。
总结一下，划重点Σ(￣。￣ﾉ)ﾉ：
- MainApplication继承了ReactApplication，返回了ReactNativeHost。
- ReactNativeHost里创建了ReactInstanceManager，并且实现了getPackages，返回了ReactPackage列表。
- ReactInstanceManager在创建Builder时，把ReactPackage列表加入到管理器。
- ReactPackage列表里面都关联了NativeModule的实现类。
- NativeModule的实现类可以通过注解，类似@ReactMethod让原生方法可以被React调用。
粗略流程：
MainApplication -> ReactApplication -> ReactNativeHost -> ReactInstanceManager -> ReactPackage -> NativeModule -> CatalystInstance(这位就是负责发送的同志)
【1】所以只要实现了ReactPackage和NativeModule，将它注册到ReactNativeHost 或者ReactInstanceManager ，就可以在React Native中继承你原生的模块了。
2、ReactActivity
MainActivity大家肯定不陌生，默认react-native init创建的项目里，MainActivity十分简单，只有一个getMainComponentName，它就是告诉Avtivity，默认需要加载的js组件名（Component）是什么，而其余的事情，都是继承的ReactActivity帮你实现。
首先我们直接来分析下顺序：
ReactActivity默认创建了一个ReactActivityDelegate。ReactActivityDelegate创建了一个单例的ReactInstanceManager（通过上面的ReactNativeHost）。ReactInstanceManager（抽象类）内部创建了ReactRootView。ReactInstanceManager的实现类为XReactInstanceManagerImpl。XReactInstanceManagerImpl在createReactContext 创建了ReactApplicationContext。ReactApplicationContext实现了生命状态事件的分发，通知js端Activity的状态。
结合上面 MainApplication部分：
ReactInstanceManager里面注册了ReactPackage。ReactPackage关联了NativeModule的实现类。NativeModule可以通过增加注解的方法被JS端调用。
所以流程可以粗略认为是
1、MainApplication -> ReactApplication -> ReactNativeHost。
2、ReactActivity -> ReactActivityDelegate -> ReactNativeHost ->
ReactInstanceManager -> ReactContex -> ReactPackage -> NativeModule
例如，ReactActivity的OnResume事件流程：
1、ReactActivityDelegate.onResume();。
2、getReactNativeHost().getReactInstanceManager().onHostResume();。
3、ReactContext.onHostResume();。
4、AppStateModule.onHostResume();。
5、RCTDeviceEventEmitter 通过 emit("appStateDidChange", createAppStateEventMap());通知js。
【2】这里我们需要注意，只要继承了ReactActivity，无论你实现了多少个Activity，它们的内部ReactInstanceManager都只有一个，消息会出现共享的情况。比如A页面onResume是，B页面就会onPause，如果你在JS端监听页面的状态，会同时收到两个消息通知。
再深入的我们就先不追究，后面有深入通信相关的文章推荐，其中涉及到CatalystInstance 、ReactBridge、BridgeCallback等等，通过jni转为字符串，再拼接为命令和代码执行等原理，有兴趣的可以移步吸几口。
可以看出，ReactInstanceManager是其中的关键，无论哪里都有它的身影，ReactNativeHost的Package列表是给它，创建ReactContex也是它，其实加载JS的也是它，所以后半部分实现模块，其中很关键的就是它了。
二、下半部分
实现一个React Native应用，有两种方法:
1、一种直接继承ReactActivity，指定js中需要加载的组件名字。
2、在布局中加入ReactRootView，通过ReactInstanceManager 加载管理js。
关于第一种，我们不深入展开，因为它的实现通过上面已经大致讲完，参考init下来的react工程，可以很简单的实现，他们共享Applicaton中的ReactNativeHost，和Host创建的ReactInstanceManager。
那么我们为什么要讲第二种呢？这里首先讲解一个知识点：
【3】React Native在打包的时候，是把js代码打包成js bundle，js bundle就是压缩后的js代码，它放在android的assert文件下，启动React Native应用时默认加载它。
既然如何，那么我们是否可以修改js bundle的加载路径？当然可以啊，不然说个卵(╯‵□′)╯︵┻━┻。通过网络下载不同的js bundle，加载实现不同的React Native App，哇塞，这不就是简单的微信小程序么。
ReactNativeHost也可以配置js bundle的文件路径，那么继承ReactActivity不是可以更简单的实现吗？不，因为继承ReactActivity，他们内部共享了一个ReactInstanceManager，作为单独的React Native程序模块，想想消息、路由、store等等会互相干扰污染·····
1、创建一个React Native 应用。
1.1、如下图，首先你需要在布局中创建一个ReactRootView。
1.2、创建一个ReactInstanceManager，配置你需要支持的自定义选项，最后通过build()，实现一个XReactInstanceManagerImpl，将它这是给ReactRootView。
如上图，可以看到：
- setJSBundleFile，你可以指定加载bundle文件的路径
- addPackge，增加你的React Native小程序支持的原生模块，其中MainReactPackage是必须的。
- setJSMainModuleName指定了主js模块的名字。
是不是很简单，这样你就可以通过原生的http，去下载和更新js bundle，然后加载显示，从而实现类似微信小程序的需求。
当然，如上图，不要忘记给你的Activity继承DefaultHardwareBackBtnHandler接口，还有将activity的生命状态通知到js端。
1.3 DefaultHardwareBackBtnHandler
这里要大篇幅讲解下，DefaultHardwareBackBtnHandler接口，通过它我们可以整体了解，React Native从android端，到JS端对back按键事件的处理。
- 首先Activity需要继承DefaultHardwareBackBtnHandler接口。DefaultHardwareBackBtnHandler只有一个invokeDefaultOnBackPressed方法。
- ReactInstanceManager在
onHostResume(Activity activity, DefaultHardwareBackBtnHandler defaultBackButtonImpl);中需要传入activity和handler接口。 - ReactInstanceManager.onBackPressed()会通过DeviceEventManagerModule，向js端发送了
"hardwareBackPress"消息。 - JS中，在BackAndrod类中，默认通过全局静态方法，注册了
"hardwareBackPress"的监听。如下图所示，监听中判断全局Set表中的callBack，倒序循环判断，是否有callback，callback是否返回true，如果都没有，就调用exitApp。
- BackAndroid.App()通过下图中的原生module，最终经过几次变换，会调用到上面Activity的DefaultHardwareBackBtnHandler接口，通过invokeDefaultOnBackPressed()响应。
- 最后在invokeDefaultOnBackPressed中通过 super.onBackPressed();结束Activity的一生。
【4】综合理解，React Native对于android back按键，是在onBackPressed中，把所有的back事件都发到js端，如果js端没监听，或者监听都返回了false，那么就会回到继承了DefaultHardwareBackBtnHandler接口，实现了invokeDefaultOnBackPressed的Activity处理。
2、创建你的Moudle实现自定义交互
(˶‾᷄ ⁻̫ ‾᷅˵)下方干货满满，请耐心吸食
首先我们创建一个DetailMoudle继承ReactContextBaseJavaModule，如下图。
- 通过
getName指定了js端使用的名字。 - 通过
@ReactMethod注解指定了哪些方法可以被js端调用，js端可以传递指定类型的参数，这里注意【5】@ReactMethod的返回类型一定是void。 - 参数传递js端与android端对应如下图。
- Callback／Promise 都是回调接口，promise有更多元化的回调选择。但是注意：【6】无论是Callback 还是 Promise ，在执行invoke／（reject、resolve）之后，都会在js的消息队列中被销毁，不能再调用一次，也就是说所有的callback只能执行一次。
- 你还可以通过消息机制实现android和js端的交互，如下图。
- 如下图，通过继承ActivityEventListener，用ReactApplicationContext添加监听，可以方便的在module中监听activity返回。网上说的用消息阻塞队列的做法就算了吧。
- 通过如下方法，可以在android的其他位置拿到module对象。
- 创建一个DetailPackage 继承 ReactPackage，将创建好的DetailModule添加到
createNativeModules方法中，如下图。
- 最后将你的ReactPackage添加到你的ReactNativeHost或者ReactInstanceManager中。在js端通过下图方式调用。
欧耶，终于码完了，你是不是对于React Native 相关的通信机制，还有交互实现有了新的了解呢？如果你觉得还不满足，这里推荐一个深度了解React Native通信的系列。文中从android到js端，还有jni层面都做了详细的跟踪，有兴趣的可跳转观摩，下方链接。
React-Native系列Android——Native与Javascript通信原理
项目相关的源码：https://github.com/CarGuo/LearnProject
RN完整学习项目：https://github.com/CarGuo/GSYGithubAPP
个人github：https://github.com/CarGuo
