React Native 跨平台移动框架技术调研

React Native 是 Meta 开源的跨平台移动框架，使用 React 组件模型与 JavaScript/TypeScript 编写 UI，通过新架构（Fabric + TurboModules + JSI）映射到原生控件。2026 年，新架构已成为默认推荐路径，与 React 19、Expo 深度集成，是 React 技术栈移动化的标准选择。

一、 基本信息

二、 技术定位与简介

React Native 让 React 开发者用熟悉的组件、Hooks 和生态构建原生移动应用：

• 旧架构：Bridge 异步通信 JS ↔ Native。
• 新架构（2026 默认）：JSI 直接调用 C++；Fabric 同步布局；TurboModules 懒加载原生模块。

与 Flutter 自绘不同，RN 使用真实原生 View（UIView / android.view），系统观感更「原生」，但跨端像素一致性弱于 Flutter。

适合：已有 React/Web 团队、需要原生混合、复杂原生 SDK 集成、Expo 快速交付。

三、 快速上手安装说明

1. 官方推荐：Expo

pnpm create expo-app@latest my-app
cd my-app
pnpm start

2. 裸 RN（React Native CLI）

npx @react-native-community/cli init MyApp
cd MyApp
pnpm start
pnpm run ios   # 需 macOS + Xcode
pnpm run android

3. 组件示例

import { View, Text, Pressable, StyleSheet } from 'react-native'
 
export function Welcome() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello RN</Text>
      <Pressable onPress={() => console.log('pressed')}>
        <Text>Click</Text>
      </Pressable>
    </View>
  )
}
 
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24 },
})

四、 核心特性

1. React 编程模型

函数组件、Hooks、Context 与 Web React 高度一致。

2. 新架构（Fabric + TurboModules + JSI）

更低延迟、更好并发支持、与 React 18+ 特性对齐。

3. Metro Bundler

专为 RN 优化的打包器；Fast Refresh 热更新。

4. 原生模块扩展

Swift/Kotlin/ObjC/Java 编写 TurboModule，暴露给 JS。

5. 导航生态

React Navigation、Expo Router 主导。

6. 样式系统

Flexbox 子集 + StyleSheet；无 CSS，布局心智接近 Web。

7. OTA 更新

CodePush、EAS Update 等（需遵守商店政策）。

8. brownfield 集成

可嵌入现有原生 App 的 RN 屏幕。

五、 适用场景

1. 黄金适用场景

• React/Next.js 团队扩展移动端。
• 需要原生 UI 观感与无障碍行为。
• 复杂第三方原生 SDK（地图、直播、支付）。
• Expo 管理的 SaaS、消费级 App。
• 与 Web 共享类型、工具函数、状态逻辑（非 UI）。

2. 局限适用场景

• 极致跨端像素一致（Flutter 更合适）。
• 小程序为主（Taro/uni-app）。
• 团队零 React 经验且不愿学习。
• 重度 2D/3D 游戏（选 Unity/Godot）。

六、 技术亮点

1. React 生态复用

Zustand、TanStack Query、表单库等可迁移。

2. 新架构性能跃升

缓解旧 Bridge 瓶颈，列表与动画更流畅。

3. Expo 降低门槛

构建、签名、OTA、推送一体化。

4. 大规模生产验证

Facebook、Microsoft、Shopify 等案例。

5. 原生混合灵活

单屏 RN 或单屏原生可组合。

七、 核心概念与架构

digraph RN_Arch {
  rankdir=TB
  node [shape=box, style="rounded,filled", fillcolor="#f0f9ff"]
  JS [label="JS Thread\n(React)", fillcolor="#bae6fd"]
  JSI [label="JSI"]
  Fabric [label="Fabric Renderer"]
  Turbo [label="TurboModules"]
  Native [label="Native Views\n(iOS/Android)"]
 
  JS -> JSI
  JSI -> Fabric
  JSI -> Turbo
  Fabric -> Native
  Turbo -> Native
}

八、 技术局限与边界

1. 平台差异：iOS/Android 样式与行为仍需 Platform.OS 分支。
2. 升级成本：RN 大版本 + 新架构迁移需投入。
3. 调试复杂度：JS + Native 双栈排障。
4. 包体积与启动：重于纯原生，轻于 Flutter 因引擎差异视场景而异。
5. Web 同源：RN Web 非主路径，Web 应独立 Next.js 等。
6. 依赖原生环境：Xcode/Android Studio 构建链必备。

九、 生态地图

十、 生态集成

十一、 开发与工程化

1. 新架构启用

newArchEnabled=true（Gradle/Podfile）；验证三方库兼容性。

2. 目录建议

src/
  app/
  features/
  components/
  native/     # 自定义 TurboModule

3. CI

EAS Build 或 gradle/xcodebuild；Maestro E2E 关键路径。

十二、 性能与安全

• 列表用 FlashList；Reanimated 在 UI 线程运行动画。
• 避免 Bridge 时代的大对象频繁跨线程传递（新架构已改善）。
• Secure Storage、Keychain/Keystore 存 Token。
• OTA 勿违反 App Store 审核指南。

十三、 技术对比

十四、 最佳实践

1. 新项目默认 Expo + 新架构。
2. 选型库前查 reactnative.directory 新架构兼容。
3. 原生模块薄封装，业务逻辑保持 JS 可测。
4. 使用 FlashList + Reanimated 优化列表与手势。
5. 与 Web 共享 packages/ 类型与 API 客户端。
6. 定期 npx react-native upgrade 跟进安全补丁。

十五、 学习与社区资源

• 官方文档：https://reactnative.dev/docs/getting-started
• 新架构：https://reactnative.dev/architecture/landing-page
• Expo：https://docs.expo.dev/
• React Native Directory：https://reactnative.directory/