下面从整体架构、核心模块、通信机制、性能优化、工程实践几个层面，系统讲解 React Native（RN）跨平台 App 架构，适合中大型项目参考。

---

一、React Native 整体架构概览

React Native 的核心思想是：

用 JavaScript 编写业务逻辑，通过桥接（Bridge / JSI）调用原生能力

架构分层（经典架构）

┌──────────────────────────┐
│       JS 业务层           │  React + Redux/Zustand
├──────────────────────────┤
│     JS Engine (Hermes)   │
├──────────────────────────┤
│        Bridge / JSI       │  通信层
├──────────────────────────┤
│      Native UI / API      │  Android / iOS
└──────────────────────────┘

新架构（Fabric + TurboModule）

React Native 正在全面迁移到 新架构：

• ✅ JSI（JavaScript Interface）：直接内存访问，无序列化

• ✅ Fabric：同步 UI 渲染

• ✅ TurboModule：按需加载原生模块

• ✅ Codegen：类型安全的原生接口

---

二、核心架构模块详解

1️⃣ JS 层（应用层）

技术组成

模块	说明
React	UI 构建
Navigation	路由（React Navigation / RNN）
State	Redux / Zustand / MobX
API	Axios / React Query
i18n	国际化
Theme	主题 & 响应式

✅ 建议

• 页面只负责 UI

• 业务逻辑下沉到 services / domain

• 避免 Bridge 频繁调用

---

2️⃣ JS Engine（执行环境）

引擎	特点
Hermes	⭐推荐，启动快、内存小
JSC	老架构默认
V8	Android 可替换

✅ 生产环境 强制开启 Hermes

---

3️⃣ Bridge（旧架构通信）

异步、JSON 序列化、性能瓶颈

JS → JSON → Bridge → Native
Native → JSON → Bridge → JS

❌ 问题：

• 高频调用卡顿

• 动画不跟手

• 调试困难

---

4️⃣ JSI（新架构核心）

JS 直接持有 C++ 对象指针

JS ──► Native (同步)

✅ 优势：

• 无序列化

• 同步调用

• 高性能

• 更好的多线程支持

---

5️⃣ Fabric（UI 渲染层）

项目	旧架构	Fabric
渲染	异步	同步
优先级	无	支持
动画	延迟	流畅

✅ 解决：

• 白屏

• 列表卡顿

• 手势冲突

---

6️⃣ TurboModule（原生模块）

✅ 特点：

• 按需加载

• 强类型（TypeScript）

• 更快初始化

export interface Spec extends TurboModule {
  getDeviceId(): string;
}

---

三、典型 RN 项目目录架构（推荐）

app/
├── src/
│   ├── app/              # 应用入口
│   ├── screens/          # 页面
│   ├── components/       # 通用组件
│   ├── modules/          # 业务模块
│   ├── services/         # API & 业务
│   ├── store/            # 状态管理
│   ├── hooks/
│   ├── utils/
│   └── native/           # 原生桥接封装
├── ios/
├── android/
├── common/               # 双端共享代码
└── packages/             # Monorepo 子包

---

四、原生与 JS 通信方式对比

场景	方案
UI 渲染	Fabric
业务调用原生	TurboModule
事件通知	EventEmitter
高频数据	JSI 直接调用
离线缓存	SQLite / MMKV
推送	原生实现

---

五、性能架构设计要点

✅ 必须做的

• 启用 Hermes

• 启用 New Architecture

• 使用 FlatList/ FlashList

• 图片缓存（react-native-fast-image）

• 避免 Bridge 高频调用

❌ 常见错误

• JS 中做重计算

• 页面嵌套过深

• 同步阻塞任务

• 滥用 useEffect

---

六、混合架构（Hybrid）

常见模式

App
├── Native 壳
├── RN 业务模块
└── WebView 活动页

✅ 适用：

• 已有原生 App

• 热更新需求

• 高频运营页

---

七、工程化与发布架构

领域	工具
构建	Metro
包管理	Yarn / pnpm
Monorepo	Nx / Turborepo
CI/CD	GitHub Actions
热更新	CodePush
监控	Sentry / Firebase

---

八、RN 架构选型建议

场景	建议
创业 MVP	Expo + RN
中大型 App	Bare RN + New Arch
超高性能	RN + Native 混合
金融/直播	原生主导

---

九、总结一句话

React Native 不是“写一次跑两端”，而是“用 JS 控制业务，用原生控制体验”。