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

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐