React Native Module 注册流程

📅 2026/7/31 3:12:10 👁️ 阅读次数 📝 编程学习
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这一条链。