news 2026/7/31 3:03:10

React Native Module 注册流程

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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这一条链。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/31 2:58:42

如何用Bili2Text一键将B站视频转为文字稿:完整免费教程

如何用Bili2Text一键将B站视频转为文字稿&#xff1a;完整免费教程 【免费下载链接】bili2text Bilibili视频转文字&#xff0c;一步到位&#xff0c;输入链接即可使用 项目地址: https://gitcode.com/gh_mirrors/bi/bili2text 还在为整理B站视频内容而烦恼吗&#xff1…

作者头像 李华
网站建设 2026/7/31 2:58:01

树莓派SPI驱动TFT屏幕实战:从硬件连接到Python图形显示

1. 项目缘起&#xff1a;为什么选择SPI驱动TFT屏幕&#xff1f;最近在折腾一个需要本地显示状态的小项目&#xff0c;手头正好有一块闲置的1.5寸的TFT彩屏。这种小尺寸屏幕在物联网设备、便携式仪表或者智能家居的中控面板上很常见。直接使用HDMI输出对于树莓派来说当然最简单&…

作者头像 李华
网站建设 2026/7/31 2:55:57

Kimi LeetCode 3791. 给定范围内平衡整数的数目 Java实现

以下是 LeetCode 3791. 给定范围内平衡整数的数目 的 Java 实现。题目理解一个整数是平衡的&#xff0c;当且仅当&#xff1a; 1. 至少包含两位数字 2. 奇数位数字之和等于偶数位数字之和&#xff08;最左边数字位置为1&#xff09;例如&#xff1a;121 是平衡的&#xff08;奇…

作者头像 李华
网站建设 2026/7/31 2:54:52

有关pycharm插件报错问题

#摘要&#xff1a;这篇主要就pycharm插件路径相关问题&#xff0c;提出解决办法pycharm插件报错主要是因为电脑用户名不规范&#xff0c;例如&#xff1a;中文&#xff0c;数字&#xff0c;半角符号等提供一条可行解决办法&#xff1a;将pycharm插件路径从 用户/Appdata放到c盘…

作者头像 李华
网站建设 2026/7/31 2:54:05

2026年商城小程序开发哪家好?SaaS、企业级电商与定制路线对比

企业搜索“商城小程序开发哪家好”&#xff0c;容易把标准化 SaaS、企业级电商系统和定制开发放在同一维度比较。但不同方案服务的企业规模、客户入口和业务复杂度不同&#xff0c;知名度高并不代表能够直接满足微信小程序场景。中小商家的标准商品交易、会员和营销&#xff0c…

作者头像 李华
网站建设 2026/7/31 2:54:02

ADC前端电路设计实战:放大器选型与RC滤波器抗混叠详解

1. 项目概述&#xff1a;为什么ADC前端设计是成败关键做嵌入式或者硬件开发的朋友&#xff0c;尤其是和传感器、数据采集打交道的&#xff0c;肯定都绕不开ADC&#xff08;模数转换器&#xff09;。很多人拿到一个高分辨率的ADC芯片&#xff0c;比如24位的Σ-Δ型ADC&#xff0…

作者头像 李华