React Native Module 注册流程

React Native 的 Native Module 注册流程，指的是 JavaScript 层如何调用 Android/iOS 原生代码（Java/Kotlin/Obj-C/Swift）的过程。

整体流程：

yaml 复制代码

JavaScript
    |
    | NativeModules.xxx
    ↓
React Native Bridge
    |
    ↓
Module Registry
    |
    ↓
Native Module Provider
    |
    ↓
Java/Kotlin/Obj-C Module实例
    |
    ↓
执行原生方法

一、Android Native Module 注册流程

以 Android 为例：

1. 创建 Native Module

例如：

typescript 复制代码

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);
    }
}

关键：

scss 复制代码

getName()

决定 JS 调用名字：

复制代码

NativeModules.MyModule

2. 创建 Module Package

RN 通过 Package 管理 Native Module。

typescript 复制代码

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();
    }
}

这里完成：

yaml 复制代码

Package
  |
  └── MyModule实例

3. 注册 Package

加入：

复制代码

MainApplication.java

里面：

csharp 复制代码

@Override
protected List<ReactPackage> getPackages() {

    List<ReactPackage> packages =
        new PackageList(this)
        .getPackages();


    packages.add(
        new MyPackage()
    );


    return packages;
}

流程：

yaml 复制代码

MainApplication
        |
        |
        ↓
ReactNativeHost
        |
        ↓
Package列表

4. React Native 初始化时加载

App启动：

yaml 复制代码

ReactInstanceManager
        |
        |
        ↓
createReactContext()
        |
        ↓
NativeModuleRegistryBuilder
        |
        ↓
遍历 ReactPackage
        |
        ↓
createNativeModules()
        |
        ↓
注册 Module

最终形成：

css 复制代码

NativeModuleRegistry

{
   MyModule : MyModule实例
}

5. JS调用

JS:

javascript 复制代码

import {
 NativeModules
} from 'react-native';


NativeModules.MyModule.hello(
    "Tom"
);

调用链：

yaml 复制代码

JS
 |
 |
Bridge
 |
 |
NativeModuleRegistry
 |
 |
MyModule.hello()

二、iOS Native Module 注册流程

类似。

1. 创建 Module

Objective-C：

less 复制代码

@interface MyModule : NSObject
<
RCTBridgeModule
>

@end


@implementation MyModule


RCT_EXPORT_MODULE();


RCT_EXPORT_METHOD(
 hello:(NSString *)name
)
{
 NSLog(@"Hello %@", name);
}


@end

关键：

scss 复制代码

RCT_EXPORT_MODULE()

自动注册。

2. Bridge扫描

启动：

yaml 复制代码

RCTBridge
 |
 |
 ↓
Load Native Modules
 |
 |
 ↓
扫描 RCT_EXPORT_MODULE
 |
 |
 ↓
生成 Module Registry

三、新架构（New Architecture）

React Native 0.68+ 引入：

复制代码

JSI
Fabric
TurboModule
Codegen

流程变化：

旧架构：

scss 复制代码

JS
 |
Bridge(JSON)
 |
Native Module

新架构：

复制代码

JS
 |
JSI
 |
TurboModule
 |
C++ Binding
 |
Native

TurboModule注册流程

例如：

JS定义：

php 复制代码

interface Spec
extends TurboModule {

  hello(name:string):void;

}

Codegen生成：

复制代码

NativeMyModuleSpec.java

NativeMyModuleSpec.h

然后：

yaml 复制代码

TurboModuleManager
        |
        |
        ↓
Module Provider
        |
        ↓
MyModule实例

四、完整生命周期总结

yaml 复制代码

App启动
 |
 |
初始化 ReactContext
 |
 |
加载 ReactPackage
 |
 |
createNativeModules()
 |
 |
生成 NativeModuleRegistry
 |
 |
Bridge/TurboModule 注册
 |
 |
JS NativeModules访问
 |
 |
调用 Native 方法
 |
 |
返回结果

五、关键类关系（Android）

yaml 复制代码

ReactApplication
        |
        ↓
ReactNativeHost
        |
        ↓
ReactInstanceManager
        |
        ↓
ReactContext
        |
        ↓
NativeModuleRegistry
        |
        ↓
NativeModule

六、开发中常见问题

JS 找不到 Module

错误：

java 复制代码

Native module cannot be null

检查：

getName() 是否一致

kotlin 复制代码

return "MyModule";

JS:

复制代码

NativeModules.MyModule

Package 是否加入：

csharp 复制代码

packages.add(new MyPackage());

是否重新编译 Android：

arduino 复制代码

npx react-native run-android

方法没暴露

必须：

typescript 复制代码

@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 这一条链。