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

检查：

1. getName()是否一致

return "MyModule";

JS:

NativeModules.MyModule

1. Package 是否加入：

packages.add(new MyPackage());

1. 是否重新编译 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这一条链。