React Native（RN）跨平台 App 架构

下面从整体架构、核心模块、通信机制、性能优化、工程实践 几个层面，系统讲解 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 控制业务，用原生控制体验"。