【大前端】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 使用了不同的通信机制：
早期（传统 RN）：基于 JSON 序列化的 异步消息队列（Bridge）。JS → 原生 → 渲染 UI。
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 跨端的运行过程（简化流程）
JS 层执行
你写的 React 组件在 JS 引擎里运行。
生成 Virtual DOM
React 算法（Fiber）计算出需要更新的 UI 树。
通过 Bridge/JSI 传递指令
将 UI 更新描述（比如创建一个
<Text>，设置内容为 “Hello”）传给原生层。
Native 渲染
原生层创建对应的
TextView或UILabel并渲染到屏幕上。
事件回传
用户点击/滑动 → 原生层捕获事件 → 通过 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，从而实现跨平台。