前一篇文章 Android&ReactNative的一次亲密接触 介绍的主要是在已有App里嵌入RN（ReactNative）部分，实际在用的时候，可能单纯的跳转并不能满足我们的需求。
** 我们可能想要：**
- 在startActivity时，通过Intent向RN里传递参数
- 使用startActivityForResult方式，在RN页面关闭时，拿到返回值
- 从RN页面startActivity，跳转到原生APP页面
- 从RN页面startActivityForResult ，跳转到原生APP页面，并拿到返回值
- 更多等等
想达到上述的几点，我们必须要了解一个知识点 ReactNative的原生模块，那么到底是个什么东西呢？
基本上，就是RN完成不了的功能，或者需要原生去实现高性能的模块，就需要用到原生模块去实现了，官方提供的模块包括（除去ZmyNativeModule）：
官方是以ToastModule做了介绍，也比较详细，就不重复说了。今天主要介绍的是Native与RN的整个的通信流程，以及实践上面的我们可能想要做的事儿。
Native->RN的流程
首先，在Application里，实现了ReactApplication 并重写getReactNativeHost方法（ 前一篇 有完整的代码），重点是以下部分
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),//默认的包管理
new ReactToolTipPackage(),//自定义的包管理
new NativePackage()//自定义的包管理
);
}
默认的包管理 MainReactPackage 向JS端暴漏原生提供的模块，以下：
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Arrays.<NativeModule>asList(
new AppStateModule(reactContext),
new AsyncStorageModule(reactContext),
new CameraRollManager(reactContext),
new ClipboardModule(reactContext),
new DatePickerDialogModule(reactContext),
new DialogModule(reactContext),
new FrescoModule(reactContext),
new I18nManagerModule(reactContext),
new ImageEditingManager(reactContext),
new ImageLoaderModule(reactContext),
new ImageStoreManager(reactContext),
new IntentModule(reactContext),
new LocationModule(reactContext),
new NativeAnimatedModule(reactContext),
new NetworkingModule(reactContext),
new NetInfoModule(reactContext),
new PermissionsModule(reactContext),
new ShareModule(reactContext),
new StatusBarModule(reactContext),
new TimePickerDialogModule(reactContext),
new ToastModule(reactContext),
new VibrationModule(reactContext),
new WebSocketModule(reactContext)
);
}
以上只是在做基础数据的准备，真正的入口还是在我们跳转要RN的Activity里，RN提供了名为ReactActivity的抽象类，继承后仅需要实现
@Override
protected String getMainComponentName() {
return "ZmyNative";
}
注意，返回的字符串，对应的即是JS中注册的组件
AppRegistry.registerComponent('ZmyNative', () => ZmyNative);
下面就简单看一下，是怎么联系在一起的？
查看源码发现ReactActivity继承自Activity，这就到我们Android的天地了，从onCreate看起，主要做了几件事儿：
- 创建
mReactRootView = createRootView();
( 最终继承自我们所熟悉的FrameLayout) - 调用
mReactRootView.startReactApplication(...)方法，其中几个参数：
-
getReactNativeHost().getReactInstanceManager()就是调用我们上面介绍的Application里的准备参数mReactNativeHost的方法，获取到ReactInstanceManager实例。
ReactInstanceManager初始化主要操作：
* ` ReactInstanceManager `初始化基本参数
* addPackage
* 设置JSBundle文件信息
-
getMainComponentName()获取子类重写的MainComponent名称 -
getLaunchOptions()获取初始化参数， 默认是null
接着看下startReactApplication(...)做了哪些事情？
- 创建
reactContext
（是个异步的过程，所以有容错处理，若未开始创建时调用）
- 具体实现在
XReactInstanceManagerImpl类中，
-
经过种种条件判断处理后，会走到ReactContextInitAsyncTask的doInBackground里，里面初始化JavaScriptExecutor
调用createReactContext(...）方法（下面仅列出部分重点分析的代码）private ReactApplicationContext createReactContext( JavaScriptExecutor jsExecutor, JSBundleLoader jsBundleLoader) { ...//部分代码省略 NativeModuleRegistry.Builder nativeRegistryBuilder = new NativeModuleRegistry.Builder(); JavaScriptModuleRegistry.Builder jsModulesBuilder = new JavaScriptModuleRegistry.Builder(); final ReactApplicationContext reactContext = new ReactApplicationContext(mApplicationContext); CoreModulesPackage coreModulesPackage = new CoreModulesPackage(this, mBackBtnHandler, mUIImplementationProvider); //ADD核心模块 processPackage(coreModulesPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder)； for (ReactPackage reactPackage : mPackages) { //ADD应用模块 processPackage(reactPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder); } NativeModuleRegistry nativeModuleRegistry; nativeModuleRegistry = nativeRegistryBuilder.build();//初始化nativeModuleRegistry NativeModuleCallExceptionHandler exceptionHandler = mNativeModuleCallExceptionHandler != null ? mNativeModuleCallExceptionHandler : mDevSupportManager; CatalystInstanceImpl.Builder catalystInstanceBuilder = new CatalystInstanceImpl.Builder() .setReactQueueConfigurationSpec(ReactQueueConfigurationSpec.createDefault()) .setJSExecutor(jsExecutor) .setRegistry(nativeModuleRegistry) .setJSModuleRegistry(jsModulesBuilder.build()) .setJSBundleLoader(jsBundleLoader) .setNativeModuleCallExceptionHandler(exceptionHandler); final CatalystInstance catalystInstance; catalystInstance = catalystInstanceBuilder.build();//初始化catalystInstance if (mBridgeIdleDebugListener != null) { catalystInstance.addBridgeIdleDebugListener(mBridgeIdleDebugListener); } catalystInstance.getReactQueueConfiguration().getJSQueueThread().callOnQueue( new Callable<Void>() { @Override public Void call() throws Exception { reactContext.initializeWithInstance(catalystInstance); catalystInstance.runJSBundle(); return null; } }).get(); return reactContext; }
关键代码runJSBundle
@Override
public void runJSBundle() {
// This should really be done when we post the task that runs the JS bundle
// (don't even need to wait for it to finish). Since that is currently done
// synchronously, marking it here is fine.
mAcceptCalls = true;
Assertions.assertCondition(!mJSBundleHasLoaded, "JS bundle was already loaded!");
mJSBundleHasLoaded = true;
// incrementPendingJSCalls();
mJSBundleLoader.loadScript(CatalystInstanceImpl.this);
// This is registered after JS starts since it makes a JS call
Systrace.registerListener(mTraceListener);
}
创建reactContext是在子线程执行的，执行过后回到UI线程
实践
上面原理知道了，那么我们就开始将最开始的几个问题实践一下吧。
1. 在startActivity时，通过Intent向RN里传递参数
Android端Module新建方法
/**
* 获取当前activity传递的intent
*/
@ReactMethod
public void getDataFromIntent(Callback success, Callback error) {
try {
Activity activity = getCurrentActivity();
if (activity != null) {
String data = activity.getIntent().getStringExtra("zmy");
if (TextUtils.isEmpty(data)) {
data = "zmy default value";
}
success.invoke(data);
}
} catch (Exception e) {
error.invoke(e.getMessage());
throw new JSApplicationIllegalArgumentException(
"Could not open the activity : " + e.getMessage());
}
}
JS端调用
ZmyNativeModule = NativeModules.ZmyNativeModule;
ZmyNativeModule.getDataFromIntent(success => {
console.warn(success);
}, error => {
console.warn(error);
});
**2. 使用startActivityForResult方式，在RN页面关闭时，拿到返回值
**
Android端
/**
* native 打开js for result
* js 的回调
*/
@ReactMethod
public void finishActivity(String result) {
Activity currentActivity = getCurrentActivity();
Intent intent = new Intent();
intent.putExtra("result", result);
currentActivity.setResult(100, intent);
currentActivity.finish();
}
JS端
finish() {
let ZmyNativeModule = NativeModules.ZmyNativeModule;
ZmyNativeModule.finishActivity('result');
}
**3. 从RN页面startActivity，跳转到原生APP页面
**
Android端
/**
* js跳转nativeActivity
*/
@ReactMethod
public void startActivityByString(String activityName) {
try {
Activity currentActivity = getCurrentActivity();
if (null != currentActivity) {
Class aimActivity = Class.forName(activityName);
Intent intent = new Intent(currentActivity, aimActivity);
currentActivity.startActivity(intent);
}
} catch (Exception e) {
throw new JSApplicationIllegalArgumentException(
"Could not open the activity : " + e.getMessage());
}
}
JS端
startNative(activityName) {
ZmyNativeModule.startActivityByString(text)
}
** 4. 从RN页面startActivityForResult ，跳转到原生APP页面，并拿到返回值
**
这里借助了ArrayBlockingQueue用来实现原生回调JS的callback，实际可以按照业务来，保存callback，变化后主动回调。
Android端
Module
@ReactMethod
public void startActivityForResult(String activityName, int requestCode, final Callback successCallback, Callback erroCallback) {
try {
Activity currentActivity = getCurrentActivity();
if (null != currentActivity) {
Class aimActivity = Class.forName(activityName);
Intent intent = new Intent(currentActivity, aimActivity);
currentActivity.startActivityForResult(intent, requestCode);
new Thread() {
@Override
public void run() {
String result = null;
try {
result = BaseApplication.myBlockingQueue.take();
successCallback.invoke(result);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}.start();
}
} catch (Exception e) {
erroCallback.invoke(e.getMessage());
throw new JSApplicationIllegalArgumentException(
"Could not open the activity : " + e.getMessage());
}
}
原生Activity
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (resultCode == RESULT_OK && requestCode == 100) {
String result = data.getStringExtra("result");
if (TextUtils.isEmpty(result)) {
BaseApplication.myBlockingQueue.add(result);
} else {
BaseApplication.myBlockingQueue.add("no data");
}
} else {
BaseApplication.myBlockingQueue.add("null");
}
}
初始化ArrayBlockingQueue
public static ArrayBlockingQueue<String> myBlockingQueue = new ArrayBlockingQueue<String>(1);
JS端
startNativeForResult(text) {
ZmyNativeModule.startActivityForResult(text, 100,
(succ)=>{ToastAndroid.show(succ, ToastAndroid.SHORT)},
(err)=>{console.warn(err)})
}
注意（下面的分析是RN 0.32.1 版本，目前0.36.1已经改变了处理方式，并没有清空资源）
- ReactInstanceManager 是在ReactNativeHost中创建的，而这个又是在Application里做的初始化，ReactInstanceManager 则是为空的时候才创建
public ReactInstanceManager getReactInstanceManager() {
if (mReactInstanceManager == null) {
mReactInstanceManager = createReactInstanceManager();
}
return mReactInstanceManager;
}
所以若我们的项目中有多个RN的页面，且有这种Native 1->RN 1->Native 2->RN 2的任务栈时，当RN 2 关闭时，会回调 onDestroy
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactRootView != null) {
mReactRootView.unmountReactApplication();
mReactRootView = null;
}
getReactNativeHost().clear();
}
clear方法会清理资源
public void clear() {
if (mReactInstanceManager != null) {
mReactInstanceManager.destroy();
mReactInstanceManager = null;
}
}
清理资源会有什么影响呢？
别忘了，我们任务栈里还有一个RN 1的页面，因为mReactInstanceManager被清理了，所以当回退到RN 1页面时，你会发现所有的事件都失效了。所以，使用的时候千万注意。
- 如上，fragment也是一个道理。
ReactNative版本迭代更新很快，新版本很可能就已经解决了你使用的版本遇到的问题，遇到问题查下更新~
这篇写的比较早，一直没发布，如有问题，欢迎指导~
希望能帮到你。
