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.MyModule2. 创建 Module PackageRN 通过 Package 管理 Native Module。public class MyPackage implements ReactPackage { Override public ListNativeModule createNativeModules( ReactApplicationContext context ) { ListNativeModule modules new ArrayList(); modules.add( new MyModule(context) ); return modules; } Override public ListViewManager createViewManagers( ReactApplicationContext context ) { return Collections.emptyList(); } }这里完成Package | └── MyModule实例3. 注册 Package加入MainApplication.java里面Override protected ListReactPackage getPackages() { ListReactPackage 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. 创建 ModuleObjective-Cinterface 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 ArchitectureReact Native 0.68 引入JSI Fabric TurboModule Codegen流程变化旧架构JS | Bridge(JSON) | Native Module新架构JS | JSI | TurboModule | C Binding | NativeTurboModule注册流程例如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 方法 | | 返回结果五、关键类关系AndroidReactApplication | ↓ ReactNativeHost | ↓ ReactInstanceManager | ↓ ReactContext | ↓ NativeModuleRegistry | ↓ NativeModule六、开发中常见问题JS 找不到 Module错误Native module cannot be null检查getName()是否一致return MyModule;JS:NativeModules.MyModulePackage 是否加入packages.add(new MyPackage());是否重新编译 Androidnpx 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这一条链。