目錄
一、前言
二、需要了解的幾個(gè)類
三、JavaModule注冊(cè)流程參考資料
一、前言
JavaModule是React Native提供給我們封裝原生模塊的能力，它可以讓你復(fù)用一些原生的代碼，又或者如果React Native還不支持某個(gè)你需要的原生特性，可以自己實(shí)現(xiàn)該特性的封裝。官網(wǎng)文檔介紹了如何封裝JavaModule的過程，這里不再啰嗦，本文將會(huì)更深入一層Java層源碼，看下它是如何注冊(cè)并提供給JS端調(diào)用的，以及需要注意的一些問題。
二、需要了解的幾個(gè)類
-
ReactContext
繼承于ContextWrapper，React Native應(yīng)用的上下文，通過getContext()獲得，它和Android中的Context是同一個(gè)概念 -
ReactRootView
繼承于FragmeLayout，主要負(fù)責(zé)native端事件的監(jiān)聽(鍵盤事件、tounch事件)，并將結(jié)果傳遞給js端，以及負(fù)責(zé)頁面元素的繪制 -
ReactInstanceManager
React Native應(yīng)用的總的管理類，創(chuàng)建ReactContext、CatalystInstance實(shí)體，解析ReactPackage生成映射表，并且配合ReactRootView管理View的創(chuàng)建與生命周期等功能 -
CatalystInstance
通信大管家，負(fù)責(zé)Java層、C++層、JS層三端通信與協(xié)調(diào)，它的實(shí)現(xiàn)類是CatalystInstanceImpl -
NativeModuleRegistry
JavaModule注冊(cè)表，負(fù)責(zé)管理和查找JavaModule -
ReactPackage
定義原生模塊和原生組件必須繼承的一個(gè)類，提供NativeModule和ViewManager列表，其實(shí)ViewManager也是NativeModule子類，但是它們的行為是不一樣的。
三、JavaModule注冊(cè)流程
首先我們要明白R(shí)eact Native本質(zhì)上是一個(gè)View，它通過ReactInstanceManager進(jìn)行一系列的管理，也是我們跟它打交道最多的，如果我們直接創(chuàng)建一個(gè)ReactNative項(xiàng)目，在它的Android目錄下并不能直接找到ReactInstanceManager這個(gè)類，而是通過ReactNativeHost簡(jiǎn)化了很多初始化的事情，下面先來看下它的代碼：
ReactNativeHost.java
public abstract class ReactNativeHost {
private final Application mApplication;
private @Nullable ReactInstanceManager mReactInstanceManager;
......
protected ReactInstanceManager createReactInstanceManager() {
ReactInstanceManagerBuilder builder = ReactInstanceManager.builder()
.setApplication(mApplication)
.setJSMainModulePath(getJSMainModuleName())
.setUseDeveloperSupport(getUseDeveloperSupport())
.setRedBoxHandler(getRedBoxHandler())
.setJavaScriptExecutorFactory(getJavaScriptExecutorFactory())
.setUIImplementationProvider(getUIImplementationProvider())
.setInitialLifecycleState(LifecycleState.BEFORE_CREATE);
for (ReactPackage reactPackage : getPackages()) {
builder.addPackage(reactPackage);
}
String jsBundleFile = getJSBundleFile();
if (jsBundleFile != null) {
builder.setJSBundleFile(jsBundleFile);
} else {
builder.setBundleAssetName(Assertions.assertNotNull(getBundleAssetName()));
}
return builder.build();
}
/**
* Returns a list of {@link ReactPackage} used by the app.
* You'll most likely want to return at least the {@code MainReactPackage}.
* If your app uses additional views or modules besides the default ones,
* you'll want to include more packages here.
*/
protected abstract List<ReactPackage> getPackages();
......
}
ReactNativeHost主要是負(fù)責(zé)ReactInstanceManager的實(shí)例創(chuàng)建，從它的createReactInstanceManager()方法可以看出構(gòu)建者ReactInstanceManagerBuilder將ReactInstanceManager的構(gòu)建與表示進(jìn)行了分離，其中的getPackages()方法就是我們注冊(cè)封裝原生JavaModule的地方，并在builder中通過for循環(huán)將packagelist逐個(gè)add進(jìn)去，進(jìn)一步跟進(jìn)build()方法，會(huì)發(fā)現(xiàn)它調(diào)用了ReactInstanceManager的構(gòu)造方法，參數(shù)有點(diǎn)多，但總得來說是把packages放進(jìn)了ReactInstanceManager的成員變量mPackages。
那僅僅是把它放進(jìn)mPackages成員變量就結(jié)束了？沒有其他操作？別急，我們還要從ReactNative的啟動(dòng)流程講起，這里以ReactActivityDelegate這個(gè)代理類為例，在它的onCreate方法中有一段邏輯loadApp邏輯：
protected void loadApp(String appKey) {
if (mReactRootView != null) {
throw new IllegalStateException("Cannot loadApp while app is already running.");
}
mReactRootView = createRootView();
mReactRootView.startReactApplication(
getReactNativeHost().getReactInstanceManager(),
appKey,
getLaunchOptions());
getPlainActivity().setContentView(mReactRootView);
}
- 創(chuàng)建一個(gè)ReactRootView
- 獲取ReactInstanceManager實(shí)例
- ReactRootView#startReactApplication()
- 給當(dāng)前Activity設(shè)置setContentView()
ReactRootView.java
public class ReactRootView extends SizeMonitoringFrameLayout
implements RootView, MeasureSpecProvider{
......
public void startReactApplication(
ReactInstanceManager reactInstanceManager,
String moduleName,
@Nullable Bundle initialProperties) {
Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE, "startReactApplication");
try {
UiThreadUtil.assertOnUiThread();
Assertions.assertCondition(
mReactInstanceManager == null,
"This root view has already been attached to a catalyst instance manager");
mReactInstanceManager = reactInstanceManager;
mJSModuleName = moduleName;
mAppProperties = initialProperties;
if (!mReactInstanceManager.hasStartedCreatingInitialContext()) {
mReactInstanceManager.createReactContextInBackground();
}
attachToReactInstanceManager();
} finally {
Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
}
}
......
}
在startReactApplication()方法中保存相應(yīng)的參數(shù)外，還有重要的一點(diǎn)，如果是第一次啟動(dòng)，hasStartedCreatingInitialContext()肯定是false的，那么就會(huì)調(diào)用ReactInstanceManager#createReactContextInBackground()方法，進(jìn)行一系列ReactContext的初始化，可以推測(cè)我們的mPackage也是在此刻注冊(cè)進(jìn)去的，其內(nèi)部一系列調(diào)用鏈也表明最終會(huì)進(jìn)入ReactInstanceManager#createReactContext()方法：
private ReactApplicationContext createReactContext(
JavaScriptExecutor jsExecutor,
JSBundleLoader jsBundleLoader) {
Log.d(ReactConstants.TAG, "ReactInstanceManager.createReactContext()");
ReactMarker.logMarker(CREATE_REACT_CONTEXT_START);
//創(chuàng)建reactContext，繼承于ContextWrapper
final ReactApplicationContext reactContext = new ReactApplicationContext(mApplicationContext);
if (mUseDeveloperSupport) { //設(shè)置本地模塊異常處理
reactContext.setNativeModuleCallExceptionHandler(mDevSupportManager);
}
//解析mPackages，并創(chuàng)建NativeModuleRegistry進(jìn)行管理
NativeModuleRegistry nativeModuleRegistry = processPackages(reactContext, mPackages, false);
NativeModuleCallExceptionHandler exceptionHandler = mNativeModuleCallExceptionHandler != null
? mNativeModuleCallExceptionHandler
: mDevSupportManager;
CatalystInstanceImpl.Builder catalystInstanceBuilder = new CatalystInstanceImpl.Builder()
.setReactQueueConfigurationSpec(ReactQueueConfigurationSpec.createDefault())
.setJSExecutor(jsExecutor)
.setRegistry(nativeModuleRegistry)
.setJSBundleLoader(jsBundleLoader)
.setNativeModuleCallExceptionHandler(exceptionHandler);
ReactMarker.logMarker(CREATE_CATALYST_INSTANCE_START);
//創(chuàng)建CatalystInstance實(shí)例
Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE, "createCatalystInstance");
final CatalystInstance catalystInstance;
try {
catalystInstance = catalystInstanceBuilder.build();
} finally {
Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
ReactMarker.logMarker(CREATE_CATALYST_INSTANCE_END);
}
if (mBridgeIdleDebugListener != null) {
catalystInstance.addBridgeIdleDebugListener(mBridgeIdleDebugListener);
}
if (Systrace.isTracing(TRACE_TAG_REACT_APPS | TRACE_TAG_REACT_JS_VM_CALLS)) {
catalystInstance.setGlobalVariable("__RCTProfileIsProfiling", "true");
}
ReactMarker.logMarker(ReactMarkerConstants.PRE_RUN_JS_BUNDLE_START);
catalystInstance.runJSBundle();
// Transitions functions in the minitFunctions list to catalystInstance, to run after the bundle
// TODO T20546472
if (!mInitFunctions.isEmpty()) {
for (CatalystInstanceImpl.PendingJSCall function : mInitFunctions) {
((CatalystInstanceImpl) catalystInstance).callFunction(function);
}
}
reactContext.initializeWithInstance(catalystInstance);
return reactContext;
}
- 通過mApplicationContext來創(chuàng)建ReactApplicationContext
- 創(chuàng)建NativeModuleRegistry，將mPackages中每個(gè)ReactPackage返回的List<NativeModule>集合都注冊(cè)到NativeModuleRegistry中，這里不包含List<ViewManager>集合
- 創(chuàng)建CatalystInstance實(shí)例，后續(xù)與C++進(jìn)行交互
在創(chuàng)建CatalystInstance實(shí)例的同時(shí)也把NativeModuleRegistry引用給了它，這才真正和C++端建立起B(yǎng)ridge橋連接，讓C++端能調(diào)用到JavaModule，CatalystInstanceImpl的構(gòu)造函數(shù)內(nèi)部initializeBridge()可以表明這一點(diǎn)。
我們回過頭來看看NativeModuleRegistry的getJavaModules()方法
/* package */ Collection<JavaModuleWrapper> getJavaModules(
JSInstance jsInstance) {
ArrayList<JavaModuleWrapper> javaModules = new ArrayList<>();
for (Map.Entry<Class<? extends NativeModule>, ModuleHolder> entry : mModules.entrySet()) {
Class<? extends NativeModule> type = entry.getKey();
if (!CxxModuleWrapperBase.class.isAssignableFrom(type)) {
javaModules.add(new JavaModuleWrapper(jsInstance, type, entry.getValue()));
}
}
return javaModules;
}
每一個(gè)JavaModule都用JavaModuleWrapper進(jìn)行了包裹，它是C++中Java層BaseJavaModule特有的包裝類，通過它可以更方便的閱讀和被JNI調(diào)用。在JavaModuleWrapper中解析了JavaModule的名字、方法，并通過invoke方式進(jìn)行調(diào)用。
@DoNotStrip
public class JavaModuleWrapper {
......
@DoNotStrip
public BaseJavaModule getModule() {
return (BaseJavaModule) mModuleHolder.getModule();
}
@DoNotStrip
public String getName() {
return mModuleHolder.getName();
}
@DoNotStrip
private void findMethods() {
Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE, "findMethods");
Set<String> methodNames = new HashSet<>();
Class<? extends NativeModule> classForMethods = mModuleClass;
Class<? extends NativeModule> superClass =
(Class<? extends NativeModule>) mModuleClass.getSuperclass();
if (ReactModuleWithSpec.class.isAssignableFrom(superClass)) {
classForMethods = superClass;
}
Method[] targetMethods = classForMethods.getDeclaredMethods();
for (Method targetMethod : targetMethods) {
ReactMethod annotation = targetMethod.getAnnotation(ReactMethod.class);
if (annotation != null) {
String methodName = targetMethod.getName();
if (methodNames.contains(methodName)) {
//js不支持方法重載否則會(huì)拋出這個(gè)異常
throw new IllegalArgumentException(
"Java Module " + getName() + " method name already registered: " + methodName);
}
MethodDescriptor md = new MethodDescriptor();
JavaMethodWrapper method = new JavaMethodWrapper(this, targetMethod, annotation.isBlockingSynchronousMethod());
md.name = methodName;
md.type = method.getType();
if (md.type == BaseJavaModule.METHOD_TYPE_SYNC) {
md.signature = method.getSignature();
md.method = targetMethod;
}
mMethods.add(method);
mDescs.add(md);
}
}
Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
}
//C++端調(diào)用，返回這個(gè)NativeModule的所有被@ReactMethod注解方法的描述
@DoNotStrip
public List<MethodDescriptor> getMethodDescriptors() {
if (mDescs.isEmpty()) {
findMethods();
}
return mDescs;
}
......
}
這里有一點(diǎn)需要注意，findMethod()方法中通過反射的方式，獲取到了所有被@ReactMethod注解標(biāo)記的方法，
并用集合判斷了是否有方法名重復(fù)的方法，否則拋出IllegalArgumentException，我們都知道在Java中可以很方便的根據(jù)方法名重復(fù)參數(shù)不一樣來進(jìn)行方法重載，但是js是沒有方法重載的，否則就會(huì)出現(xiàn)問題。
我自己寫了一個(gè)ToastModule測(cè)試類，里面進(jìn)行了方法重載，發(fā)現(xiàn)ReactNative并沒有把IllegalArgumentException拋回給Java層，直接就應(yīng)用內(nèi)部崩潰ANR了，這是一個(gè)令人很尷尬的地方，其實(shí)我們可以通過ReactInstanceManagerBuilder#setNativeModuleCallExceptionHandler()進(jìn)行捕獲處理.
大概就是這樣吧，可能對(duì)于ReactNative內(nèi)部執(zhí)行流程的還不是特別的熟悉，很多跟著源碼一步步點(diǎn)進(jìn)去看的，如有不對(duì)的地方，還請(qǐng)各位看官多多包涵了！
