React Native Module 注册流程
·
React Native 的 Native Module 注册流程,指的是 JavaScript 层如何调用 Android/iOS 原生代码(Java/Kotlin/Obj-C/Swift)的过程。
整体流程:
JavaScript
|
| NativeModules.xxx
↓
React Native Bridge
|
↓
Module Registry
|
↓
Native Module Provider
|
↓
Java/Kotlin/Obj-C Module实例
|
↓
执行原生方法
一、Android Native Module 注册流程
以 Android 为例:
1. 创建 Native Module
例如:
public class MyModule extends ReactContextBaseJavaModule {
public MyModule(ReactApplicationContext context) {
super(context);
}
@Override
public String getName() {
return "MyModule";
}
@ReactMethod
public void hello(String name) {
Log.d("RN", "Hello " + name);
}
}
关键:
getName()
决定 JS 调用名字:
NativeModules.MyModule
2. 创建 Module Package
RN 通过 Package 管理 Native Module。
public class MyPackage
implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(
ReactApplicationContext context
) {
List<NativeModule> modules =
new ArrayList<>();
modules.add(
new MyModule(context)
);
return modules;
}
@Override
public List<ViewManager> createViewManagers(
ReactApplicationContext context
) {
return Collections.emptyList();
}
}
这里完成:
Package
|
└── MyModule实例
3. 注册 Package
加入:
MainApplication.java
里面:
@Override
protected List<ReactPackage> getPackages() {
List<ReactPackage> packages =
new PackageList(this)
.getPackages();
packages.add(
new MyPackage()
);
return packages;
}
流程:
MainApplication
|
|
↓
ReactNativeHost
|
↓
Package列表
4. React Native 初始化时加载
App启动:
ReactInstanceManager
|
|
↓
createReactContext()
|
↓
NativeModuleRegistryBuilder
|
↓
遍历 ReactPackage
|
↓
createNativeModules()
|
↓
注册 Module
最终形成:
NativeModuleRegistry
{
MyModule : MyModule实例
}
5. JS调用
JS:
import {
NativeModules
} from 'react-native';
NativeModules.MyModule.hello(
"Tom"
);
调用链:
JS
|
|
Bridge
|
|
NativeModuleRegistry
|
|
MyModule.hello()
二、iOS Native Module 注册流程
类似。
1. 创建 Module
Objective-C:
@interface MyModule : NSObject
<
RCTBridgeModule
>
@end
@implementation MyModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(
hello:(NSString *)name
)
{
NSLog(@"Hello %@", name);
}
@end
关键:
RCT_EXPORT_MODULE()
自动注册。
2. Bridge扫描
启动:
RCTBridge
|
|
↓
Load Native Modules
|
|
↓
扫描 RCT_EXPORT_MODULE
|
|
↓
生成 Module Registry
三、新架构(New Architecture)
React Native 0.68+ 引入:
JSI
Fabric
TurboModule
Codegen
流程变化:
旧架构:
JS
|
Bridge(JSON)
|
Native Module
新架构:
JS
|
JSI
|
TurboModule
|
C++ Binding
|
Native
TurboModule注册流程
例如:
JS定义:
interface Spec
extends TurboModule {
hello(name:string):void;
}
Codegen生成:
NativeMyModuleSpec.java
NativeMyModuleSpec.h
然后:
TurboModuleManager
|
|
↓
Module Provider
|
↓
MyModule实例
四、完整生命周期总结
App启动
|
|
初始化 ReactContext
|
|
加载 ReactPackage
|
|
createNativeModules()
|
|
生成 NativeModuleRegistry
|
|
Bridge/TurboModule 注册
|
|
JS NativeModules访问
|
|
调用 Native 方法
|
|
返回结果
五、关键类关系(Android)
ReactApplication
|
↓
ReactNativeHost
|
↓
ReactInstanceManager
|
↓
ReactContext
|
↓
NativeModuleRegistry
|
↓
NativeModule
六、开发中常见问题
JS 找不到 Module
错误:
Native module cannot be null
检查:
-
getName()是否一致
return "MyModule";
JS:
NativeModules.MyModule
-
Package 是否加入:
packages.add(new MyPackage());
-
是否重新编译 Android:
npx react-native run-android
方法没暴露
必须:
@ReactMethod
public void test()
{
}
否则 JS 看不到。
简单理解:
React Native Module 注册 = Native代码创建 Module → Package 提供 Module → Host 注册 Package → ReactContext启动时生成 Registry → JS通过Bridge/JSI找到并调用。
如果你是在做 React Native 底层源码分析,重点应该看:ReactInstanceManager → NativeModuleRegistryBuilder → ReactPackage → NativeModuleRegistry 这一条链。
更多推荐


所有评论(0)