【大前端】React Native（RN）跨端的原理

1. RN 的设计目标

React Native 的核心思想是：

• 一次编写，跨平台运行（Write once, run anywhere-ish）。

• 使用 JavaScript/TypeScript + React 语法 编写业务逻辑和 UI 描述。

• 最终渲染为 原生控件（Android View / iOS UIView），而不是 WebView。

2. RN 跨端架构

RN 的跨端原理可以理解为 三层架构：

（1）JavaScript 层（前端逻辑层）

• 开发者写的 JS/TS 代码。

• 包含 React 组件、业务逻辑、状态管理。

• 在运行时通过 JS 引擎（Hermes、JSC、V8 等） 执行。

• 通过 Bridge 与原生层通信。

（2）Bridge（通信层）

RN 的跨端核心：

• JS 和原生语言（Java/Kotlin/ObjC/Swift）之间的桥梁。

• 负责 序列化 / 反序列化 / 异步通信。

• 不同版本的 RN 使用了不同的通信机制：

  1. 早期（传统 RN）：基于 JSON 序列化的 异步消息队列（Bridge）。JS → 原生 → 渲染 UI。

  2. Fabric + JSI（新架构）：取消 JSON/异步限制，使用 C++ JSI（JavaScript Interface）实现 同步通信，提升性能（解决掉大部分 Bridge 性能瓶颈）。

（3）Native 层（原生渲染层）

• iOS → UIKit（UIView）

• Android → View（TextView, ImageView, RecyclerView 等）

• RN 的核心库将 React 组件映射为对应的原生组件。

  • <Text> → iOS UILabel / Android TextView

  • <Image> → UIImageView / ImageView

  • <ScrollView> → UIScrollView / RecyclerView

• 这就是 RN 的跨端能力：

  • 同一份 JS 代码

  • 渲染不同平台的原生控件

  • UI 效果贴近原生

3. RN 跨端的运行过程（简化流程）

1. JS 层执行

   • 你写的 React 组件在 JS 引擎里运行。

2. 生成 Virtual DOM

   • React 算法（Fiber）计算出需要更新的 UI 树。

3. 通过 Bridge/JSI 传递指令

   • 将 UI 更新描述（比如创建一个 <Text>，设置内容为 “Hello”）传给原生层。

4. Native 渲染

   • 原生层创建对应的 TextView 或 UILabel 并渲染到屏幕上。

5. 事件回传

   • 用户点击/滑动 → 原生层捕获事件 → 通过 Bridge/JSI 回传到 JS → React 处理逻辑 → 再次触发 UI 更新。

4. 跨端效果实现的关键点

• 统一业务逻辑：JS/TS 层代码基本一致。

• 原生组件映射：同一个 React 组件，对应不同平台的原生控件。

• 差异化处理：RN 提供 Platform 模块（如 Platform.OS === 'ios' ? ... : ...）来做少量差异化代码。

• 扩展能力：如果 RN 自带组件不够用，可以写 Native Module（Java/Kotlin/Swift/ObjC）并导出给 JS 调用。

5. RN 跨端的优缺点

✅ 优点：

• 跨平台开发（Android + iOS）

• 接近原生的性能（比 WebView/Hybrid 更好）

• JS + 原生扩展灵活

❌ 缺点：

• Bridge 通信性能瓶颈（老架构）

• 调试环境复杂

• 部分复杂 UI/动画性能不如纯原生

• 需要懂 JS + 原生双端

6. 总结一句话

RN 跨端的原理 = JS 层逻辑（React） + Bridge/JSI 通信 + 原生组件渲染。
它本质是用 JS 写逻辑，但最终渲染的是真正的原生 UI，从而实现跨平台。