React Native 源码分析（四）—— TurboModules JSI通信机制

已于 2024-04-10 18:38:03 修改
阅读量1.6k 收藏
点赞数 5
分类专栏： ReactNative 文章标签： react native react.js javascript
于 2023-11-14 17:33:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xx326664162/article/details/134371373
版权
本文深入探讨React Native的TurboModules，基于JSI的通信方式，分析JS调用Java代码的过程，包括JSI原理、TurboModules加载、模块创建与注册等关键步骤，旨在提供最详尽的源码分析。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本文会详细分析React Native 新架构的TurboModules的通信过程，基于JSI的通信方式，除不会涉及Hemers引擎部分，其余代码都会详细分析，但比较简单的，不会很啰嗦，可以说是网上最完整详细的分析文章，代码通过断点截图，可以更方便查看运行的过程

1、React Native 源码分析（一）—— 启动流程
2、React Native 源码分析（二）—— Native Modules桥通信机制
3、React Native 源码分析（三）—— Native View创建流程(桥通信)
4、React Native 源码分析（四）—— TurboModules JSI通信机制

了解本专栏 订阅专栏 解锁全文 超级会员免费看
React Native 源码分析（三）——Native View创建流程(跨桥通信)
薛瑄的博客
05-17 2690
可以说是全网关于React Native 原生层View的创建流程 最详细的文章
React Native 源码分析（一）——启动流程
薛瑄的博客
08-23 4199
本系列文章，是分析Android 的 React Native 的源码，主要包括以下文章，和以往的源码系列一样，分析主流程的代码，不会细致到每一行（但是比Gradle源码分析，要细致很多），会涉及到java、C++、js等源码。 RN版本是0.64.0 1、React Native 源码分析（一）—— 启动流程 2、React Native 源码分析（二）—— 通信机制 3、React Native 源码分析（三）—— UI渲染流程 4、React Native 源码分析（四）—— 任务调度 5、React
React Native 0.79发布 - 更快的工具及更多改进
最新发布
wayne214的博客
04-09 1241
React Native 0.79版本带来多项更新，涵盖性能提升、功能改进和重大变更。亮点功能Metro优化：Metro 0.82利用延迟哈希技术，使启动速度提升3倍以上，还稳定支持的exports和imports字段解析，增强与现代npm依赖的兼容性。JSC迁移：JavaScriptCore（JSC）引擎转移至社区维护的包，社区版JSC更新更频繁，React Native核心提供的JSC版本后续将被移除，但不影响使用Hermes的用户。iOS模块注册改进：在iOS中，可通过修改的。
ReactNative iOS源码解析（一）
majiakun1的专栏
10-20 1902
相关系列文章 ReactNative iOS源码解析（一）ReactNative iOS源码解析（二）Talk about ReactNative Image Component 本篇前两部分内容简单介绍一下ReactNative，后面的章节会把整个RN框架的iOS部分，进行代码层面的一一梳理 全文是不是有点太长了，我要不要分拆成几篇文章 函数栈代码流程图，由于
React Native Android 源码框架浅析（主流程及 Java 与 JS 双边通信），写给程序员的Flutter详细教程
2401_84121789的博客
04-11 1066
实质就是 Java 与 JS 端都准备好一个 Module 映射表，然后当 Java 端调用 JS 代码时 Java 端通过查表动态代理创建一个与 JS 对应的 Module 对象，当调用这个 Module 的方法时 Java 端通过动态代理的 invoke 方法触发 C++ 层，层层调用后通过 JSCExecutor 执行 JS 端队列中的映射查表找到 JS 端方法进行调用；创建的，所以当JS调用NativeModules时实质为JSCExecutor::getNativeModule()方法。
ReactNative源码解析-初识源码
weixin_34234721的博客
05-12 242
在开始《ReactNative源码解析》系列文章之前，我们先不对源码做深入的分析，我们先对源码的结构和ReactNative的框架做个简要的分析和了解，我们将围绕它的核心进行展开。 1. ReactNative框架是怎样的？ 2. ReactNative框架的核心是什么，如何去分析？ 复制代码好，我们先来看第一个问题。 一、ReactNative框架总览 ReactNative源码结构如下： -...
5000字的React-native源码解析
petertanjinjie的博客
06-22 1175
写在开头近期公众号主攻下React-native,顺便我也复习下React-native,后续写作计划应该是主攻Node.js和跨平台方向、架构、Debug为主如果你感兴趣，建议关注下公...
React Native 源码分析（二）—— Native Modules跨桥通信机制
薛瑄的博客
09-03 1809
本篇来分析一下，RN js和java的通信机制，在上一篇启动流程 看完后，通信的过程，你应该也能猜出个大概。具体过程，也是很简单 1、React Native 源码分析（一）—— 启动流程 2、React Native 源码分析（二）—— 通信机制 3、React Native 源码分析（三）—— UI渲染流程 4、React Native 源码分析（四）—— 任务调度 5、React Native 源码分析（五）—— 事件分发 一、 Java->JS 通信 先来一张图，看一下通信的整体过程 图片来源
在 Android 上启用 TurboModule
m0_56144365的博客
07-31 606
然后，您可以将您创建的类提供给您的ReactNativeHost.您可以ReactNativeHost通过搜索找到您的getReactNativeHost().ReactNativeHost通常位于您的班级Application内。此设置将在您的项目上运行本机构建，并将编译由codegen生成的C++文件。如果您仔细查看MyApplicationTurboModuleManagerDelegate您之前创建的类，您会注意到其中一些方法是怎样的native。...
React Native Android 源码框架浅析（主流程及 Java 与 JS 双边通信）
2301_77595001的博客
04-11 1234
外链图片转存中…(img-jk6yfBw5-1712792633049)][外链图片转存中…(img-IyPp1Vl2-1712792633049)][外链图片转存中…(img-9sAejzmh-1712792633050)][外链图片转存中…(img-I6Fayg6U-1712792633050)][外链图片转存中…(img-cRufH5Ka-1712792633050)]
React Native从源码解析它的实现原理及JavaScriptCore详解
田风有的博客
05-16 833
一、React Native背景 有没有朋友想过一个问题，为什么取名React Native?React是什么，Native又是什么？ React React 是由Facebook推出的一个JavaScript框架，主要用于前段开发。 React 采用组件化方式简化Web开发 DOM:每个HTML界面可以看做一个DOM 原生的web开发方式，HT...
ReactNative源码分析之UI事件分发
01-03
ReactNative用的版本: 0.61.5 原生层事件的触发入口主要有两个类： 1. ReactRootView 2. 自定义的ViewManager对应的viewGroup 今天我们主要梳理ReactRootView事件传递 一、ReactRootView JavaScript中加载的View最终会依附在ReactRootView上，而该类正是 Activity创建后，加载的ContentView, 我们看下源码 public class ReactRootView extends FrameLayout implements RootView, ReactRoot { } 我
进击ReactNative-徐如林-React源码解析
11-15 1517
目录定目标传道（攻坚方法论）授业（懂算法）解惑（考考你）组件生命周期数据结构Virtual DOMDiff算法原理追过程学习运行（Playground）源码迷航微光大海航术用户态（浅水区）组件API生命周期内核态（深水区）初始渲染时间线用户点击渲染时间线小结简约伪代码方法调用图拿结果QA高性能实践问题定位利器方法钩子长歌结语参考 有的人可能会不理解，大前端平台化的战火为谁而燃，吾辈何以为战？专注于移动互联网大前端致富，一直是我们最崇高的理想，而ReactNative是横亘在中间的桥头堡。纵观行业风向，有作
探索未来移动开发：React Native Turbo Modules 使用 TypeScript 的超凡体验 —— react-native-tscodegen
gitblog_00080的博客
05-21 460
探索未来移动开发：React Native Turbo Modules 使用 TypeScript 的超凡体验 —— react-native-tscodegen 去发现同类优质开源项目:https://gitcode.com/ 在当今的移动应用开发中，React Native以其跨平台能力和高效的性能深受开发者喜爱。现在，一个创新的开源项目——react-native-tscodegen，为Re...
【React Native】从源码一步一步解析它的实现原理
Java_MaPulong的博客
03-14 2533
前言公司近期正在使用React Native，看了些相关文档，大概的实现逻辑基本捋顺，希望对想了解React Native实现原理的同学有所帮助，其实只要看懂文章的四幅图就明白它的原理了。一、React Native背景有没有朋友想过一个问题，为什么取名React Native?React是什么，Native又是什么？ReactReact 是由Facebook推出的一个JavaScript框架，主...
React Native新架构系列-自定义Turbo Native Module扩展API
写代码的林克
08-07 1781
今天我们介绍在React Native新架构中如何自定义Turbo Native Module扩展API。
跨语言通信——rn TurboModule
pouloghost的专栏
11-19 2430
这是rn新架构下的通信方式，基于0.64代码梳理。 整体看，仍然是基于跨语言interop能力额外搭建了一套通信方式。 方法定义和绑定 信道建立 由于用到了jsi，信道建立过程是跨语言统一的。 仍然是+method和TurboModuleRegistry turboModuleProxy->（jsi）TurboModuleBinding.cpp#jsProxy->TurboModuleBinding#getModule->TurboModuleManager#installJSIBind
React-Native-源码分析
让创意的火花散落到屏幕的每一个dp
09-13 2621
用React-Native也有1个月了，好多疑惑一直挂在心头，没有得到很好的答案，有道是： 纸上得来终觉浅,绝知此事要躬行 今天来源码中一探究竟,博主使用的环境是 “react”: “15.3.1”, “react-native”: “^0.33.0”, 先看第一个问题一切的开始-startReactApplication想要搞清楚这个问题，那首先要知道在start一个React
React Native Autolinking 源码深入分析
薛瑄的博客
03-16 4205
ReactNative autolink 源码深入分析，理解脚手架工作原理
鸿蒙开发嵌套RN
03-14
### 如何在 HarmonyOS 中嵌套 React Native #### 背景介绍 HarmonyOS 是华为推出的一款分布式操作系统，支持多种设备形态。而 React Native 则是一种用于构建跨平台移动应用的技术框架。要实现 HarmonyOS 和 React Native 的集成，需要解决两者之间的通信以及组件渲染问题。 --- #### 技术挑战与解决方案 1. **JavaScript 与原生平台的通信** React Native 使用 JavaScript 作为主要编程语言，并通过 TurboModules 实现 JS 层与原生层的高效通信[^2]。然而，HarmonyOS 并未直接提供对 TurboModules 的支持，因此需要自定义适配器以完成两者的桥接功能。 2. **UI 渲染机制** React Native 将 `<View>` 组件映射到不同平台上的本地视图（如 iOS 的 `UIView` 或 Android 的 `android.view.View`）。对于 HarmonyOS 来说，则需将其映射至对应的 UI 控件体系[^1]。 3. **项目结构调整** 在传统的 React Native 项目中，默认会生成 Android 和 iOS 子模块目录[^3]。而在 HarmonyOS 场景下，这些默认配置不再适用，开发者需要重新设计工程结构并引入必要的依赖库。 --- #### 集成步骤概述 以下是将 React Native 嵌入 HarmonyOS 应用的一个可行方案： #### 一、初始化环境准备 确保已安装 Node.js 及 npm/yarn 工具链，并下载最新版本的 React Native CLI 客户端工具包。 ```bash npm install -g react-native-cli ``` 接着克隆官方示例仓库或者新建空白 RN 工程： ```bash react-native init MyHybridApp ``` #### 二、定制化编译流程 由于 HarmonyOS 不兼容标准 Gradle 构建脚本，所以必须调整 build.gradle 文件内容使其适应新的 SDK 版本号及其他参数设置需求。 例如编辑 android/app/build.gradle 添加如下片段： ```groovy defaultConfig { ... ndk { abiFilters 'armeabi-v7a', 'arm64-v8a' } } dependencies { implementation project(':harmonyos-sdk') } ``` 同时记得同步更新 settings.gradle 加载额外插件路径： ```gradle include ':app', ':harmonyos-sdk' project(':harmonyos-sdk').projectDir = new File(rootProject.projectDir, '../path/to/sdk') ``` #### 三、扩展核心能力接口 针对特定业务逻辑场景下的数据交换操作，可通过注册全局事件监听器方式建立双向消息传递渠道: ```javascript import {NativeEventEmitter} from 'react-native'; const emitter = new NativeEventEmitter(RNInstance); emitter.addListener('onMessageFromHarmonyOs', (eventData) => { console.log(`Received message: ${JSON.stringify(eventData)}`); }); ``` 与此同时，在 Java/Kotlin 端也需要暴露相应 API 方法供调用方发起请求: ```java public class MessageBridge extends ReactContextBaseJavaModule implements LifecycleEventListener { private final String MODULE_NAME = "MessageBridge"; public MessageBridge(ReactApplicationContext reactContext){ super(reactContext); this.getReactApplicationContext().addLifecycleEventListener(this); } @Override public String getName(){ return MODULE_NAME; } @ReactMethod public void sendMessageToJs(String payload){ WritableMap params = Arguments.createMap(); params.putString("data",payload); getReactApplicationContext() .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) .emit("onMessageFromHarmonyOs",params); } } ``` 最后别忘了声明该类为可用服务清单项之一以便动态加载实例对象: ```xml <service android:name=".MessageBridge"/> ``` --- #### 总结说明 尽管目前尚无成熟完善的开源案例可供参考学习，但从理论角度出发完全可以借助现有技术手段达成预期目标效果。不过实际开发过程中难免遇到各种未知难题阻碍进度推进速度，建议多查阅相关资料积累经验教训逐步优化完善整体设计方案。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

薛瑄

文章不错，请博主吃包辣条

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值