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

React Native Module 注册流程

相关推荐

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

ADIC电源设计--为800V应用选择合适的半导体技术--Plecs仿真实现

TOFSense-F激光测距模块：1000Hz高刷新率原理、驱动与STM32/Arduino实战

更多资讯

MATLAB P文件逆向工程与加密技术解析

技术管理者必读：从财务报表到SaaS指标的商业思维课

树莓派 Docker 化网页服务器：从系统镜像到容器化部署

PSCAD仿真合空线切空线过电压：合闸电阻抑制与差动保护定制

SpringBoot+Vue少儿编程管理系统开发实践

大模型技术入门：从核心架构到实战部署

今日更新

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？