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.MyModule2. 创建 Module PackageRN 通过 Package 管理 Native Module。public class MyPackage implements ReactPackage { Override public ListNativeModule createNativeModules( ReactApplicationContext context ) { ListNativeModule modules new ArrayList(); modules.add( new MyModule(context) ); return modules; } Override public ListViewManager createViewManagers( ReactApplicationContext context ) { return Collections.emptyList(); } }这里完成Package | └── MyModule实例3. 注册 Package加入MainApplication.java里面Override protected ListReactPackage getPackages() { ListReactPackage 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. 创建 ModuleObjective-Cinterface 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 ArchitectureReact Native 0.68 引入JSI Fabric TurboModule Codegen流程变化旧架构JS | Bridge(JSON) | Native Module新架构JS | JSI | TurboModule | C Binding | NativeTurboModule注册流程例如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 方法 | | 返回结果五、关键类关系AndroidReactApplication | ↓ ReactNativeHost | ↓ ReactInstanceManager | ↓ ReactContext | ↓ NativeModuleRegistry | ↓ NativeModule六、开发中常见问题JS 找不到 Module错误Native module cannot be null检查getName()是否一致return MyModule;JS:NativeModules.MyModulePackage 是否加入packages.add(new MyPackage());是否重新编译 Androidnpx 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这一条链。

相关新闻

小牛电动车电池无输出故障排查:从BMS原理到维修实战

小牛电动车电池无输出故障排查:从BMS原理到维修实战

1. 问题引入:当你的小牛“趴窝”时,先别急着送修如果你是一位小牛电动自行车的车主,某天早上准备出门,拧开钥匙,仪表盘正常亮起,但一拧转把,车子纹丝不动,或者干脆连仪表盘都点不亮&…

2026/10/11 19:52:40 阅读更多 →
别让每个请求都烧大模型:意图识别的「三层漏斗」架构

别让每个请求都烧大模型:意图识别的「三层漏斗」架构

用最便宜的方式处理最多的请求,只把最难的交給大模型——工程级意图识别三层漏斗架构的完整拆解,含可运行代码实现。你的 Agent 每次对话都要调一次 GPT-4,哪怕用户只是问「今天周几」。 一次 GPT-4 调用 ≈ 0.05 美元。一天 10 万次 5,000 …

2026/10/11 19:52:57 阅读更多 →
古诗词微信小程序源码

古诗词微信小程序源码

公众号回复:【古诗词小程序源码】即可获取,如下:使用方式 使用微信开发工具导入该项目,并更换自己的APPID。创建免费的古诗词接口API KEY,地址:https://qyunge.cn/user/profile。把创建的API KEY写入到 min…

2026/10/10 18:19:51 阅读更多 →

最新新闻

学生选课系统:SQL Server数据库课程设计实战指南

学生选课系统:SQL Server数据库课程设计实战指南

简介:本资源是一份完整的数据库系统课程设计报告模板,面向高校计算机、软件工程等专业本科生,用于支撑《数据库系统概论》类课程的实践教学与课程设计作业。报告以“学生选课管理信息系统”为案例,系统覆盖需求分析(含…

2026/10/11 19:52:46 阅读更多 →
Photoshop习题版PDF:用可验证的题海训练打磨抠图调色肌肉记忆

Photoshop习题版PDF:用可验证的题海训练打磨抠图调色肌肉记忆

简介:这是一份精选的Photoshop基础习题资料,面向刚接触图像处理的初学者和需要巩固基础的设计爱好者,将颜色模式、位图与矢量图、图像文件格式、像素与分辨率、画布与图像尺寸等核心概念以问答形式系统梳理,并涵盖旋转画布、精确裁…

2026/10/11 19:52:46 阅读更多 →
UML实验报告实战:用EA7.5完成网上选课系统八图建模

UML实验报告实战:用EA7.5完成网上选课系统八图建模

简介:面向系统分析与建模课程的UML实验报告,是一份完整的课程实践资料,适合软件工程专业学生、建模初学者及相关课程教师参考。报告从实验0熟悉Enterprise Architect开发环境入手,系统覆盖用例图、类和对象图、交互图、状态图、活…

2026/10/11 19:52:46 阅读更多 →
YOLOv8瓶子检测源码实战:从训练到Docker部署全链路拆解

YOLOv8瓶子检测源码实战:从训练到Docker部署全链路拆解

简介:本资源面向深度学习目标检测初学者与进阶开发者,提供一套基于YOLOv8的瓶子识别检测完整工程,可用于物品检测课程设计、毕业项目或工业质检场景的快速复现。压缩包共488个文件,约89.27MB,以115个Python源码、173个…

2026/10/11 19:52:46 阅读更多 →
Linux下Ad-Hoc无线网络实战:IBSS模式配置与驱动级调试

Linux下Ad-Hoc无线网络实战:IBSS模式配置与驱动级调试

简介:本资源是一份面向高校计算机网络课程实验的Ad-Hoc无线自组网实践指导文档,适用于网络工程、通信技术等专业学生及初学者,解决无AP环境下快速构建临时对等无线网络并实现文件共享的实际问题。文档完整覆盖实验目的、原理(强调…

2026/10/11 19:52:46 阅读更多 →
深入排查npm报错:Cannot read properties of null (reading ‘matches‘)的完整指南

深入排查npm报错:Cannot read properties of null (reading ‘matches‘)的完整指南

先别急着清缓存重装,这个报错我前后折腾过好几次,每次原因都不一样。先花两分钟把错误本身看明白,后面能省一大堆时间。1. 报错拆解:这行错误到底在说什么1.1 错误信息的语法结构这行报错是典型的 JavaScript TypeError&#xff0…

2026/10/11 19:51:46 阅读更多 →

日新闻

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

简介:基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码,面向计算机相关专业课程设计与期末大作业学生,以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程,…

2026/10/11 0:00:27 阅读更多 →
影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化,十个新手有八个栽在"往输入框里填东西"这件事上:要么填不进去,要么填了一半,要么直接把原来内容追加在后面。这背后的根因&…

2026/10/11 0:00:27 阅读更多 →
影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀:什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面,跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/11 0:00:27 阅读更多 →

周新闻

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

简介:基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码,面向计算机相关专业课程设计与期末大作业学生,以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程,…

2026/10/11 0:00:27 阅读更多 →
影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化,十个新手有八个栽在"往输入框里填东西"这件事上:要么填不进去,要么填了一半,要么直接把原来内容追加在后面。这背后的根因&…

2026/10/11 0:00:27 阅读更多 →
影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀:什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面,跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/11 0:00:27 阅读更多 →

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/11 10:45:37 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/11 14:36:53 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/11 14:36:54 阅读更多 →