React Native
使用 React 和原生平台组件构建 Android、iOS 及更多平台应用的开源框架。
项目概述
React Native 将 React 组件模型映射到真正的原生 View,通过 New Architecture、Hermes 和丰富生态共享业务代码,同时保留 Swift、Kotlin、C++ 与平台专属界面的扩展能力。
React Native 是 Meta 维护的跨平台原生应用框架,开发者使用 React、TypeScript 和 JSX 描述界面,View、Text、Image、TextInput 等组件最终由 Android 与 iOS 的原生视图系统渲染,而不是运行在浏览器 WebView 中。业务逻辑和多数界面可以跨平台共享,Platform API、.ios/.android 文件和原生模块则用于适配系统差异。React Native 0.86 以 New Architecture 为默认基础:Fabric Renderer 支持同步布局和并发 React,TurboModules 与 JSI 取代旧异步 Bridge 的序列化边界,Codegen 从类型规范生成 JavaScript 与原生接口。Hermes 是默认且随版本绑定的 JavaScript 引擎,Metro 提供打包与 Fast Refresh,React Native DevTools 用于检查组件、网络和性能。官方建议大多数新应用从 Expo 这类 React Native Framework 开始;只有在框架不满足特殊原生约束或团队希望自行组合路由、构建和发布工具时,才直接使用 Community CLI。
主要特点
React Native 以 React 组件和跨平台 TypeScript 为开发入口,同时保留直接调用与扩展 Android、iOS 原生能力的路径。
真正的原生组件
View、Text、Image 和 Pressable 等 React 组件映射到平台视图与控件,能够使用原生布局、输入、无障碍和交互行为。
跨平台代码共享
React 组件、Hooks、状态、网络与业务逻辑可在 Android 和 iOS 复用,并通过 Platform API 或文件后缀处理差异。
Fabric Renderer
New Architecture 的渲染器支持同步布局读取、并发 React 与更一致的线程模型,为高质量原生交互提供基础。
TurboModules、JSI 与 Codegen
类型规范生成原生接口,JavaScript 可通过 JSI 直接连接 Kotlin、Swift、Objective-C 或 C++,避免旧 Bridge 的 JSON 序列化。
Hermes JavaScript 引擎
Hermes 针对 React Native 的启动、内存与包体进行优化,并与每个 React Native 版本一起构建和测试。
Metro 与 Fast Refresh
Metro 负责解析、转换和打包原生应用 JavaScript,Fast Refresh 在开发时尽可能保留组件状态并快速反馈修改。
React Native DevTools
内置调试体验覆盖 Console、Sources、Network、Components 和 Profiler,同时原生问题仍可使用 Android Studio 与 Xcode。
可扩展原生平台
当社区库不足时,可编写 Turbo Native Module、Fabric Native Component 或跨平台 C++ Module,并与现有原生工程集成。
适用场景
适合需要真正原生控件和设备能力,希望在 iOS 与 Android 共享产品代码,并拥有 React 或原生开发经验的团队。
消费级移动应用
适合电商、社交、内容、金融和生活服务产品,在 iOS 与 Android 共享主要业务和组件。
已有 React 团队的移动端
Web 团队可以复用 React、TypeScript、状态管理和测试经验,同时学习移动导航、布局与设备生命周期。
多端 SaaS 产品
API Client、领域类型、校验和部分设计系统可与 Web 共用,移动端使用原生控件构建独立体验。
需要设备能力的应用
可通过社区或自定义原生模块使用相机、定位、通知、蓝牙、音视频、生物识别与后台任务。
渐进迁移原生应用
React Native 可以作为单个 Screen 或 Feature 嵌入现有 Android/iOS 应用,逐步引入共享界面与业务代码。
多原生平台产品
除 Android 和 iOS 外,社区与合作方还维护 Windows、macOS、TV、VisionOS 等平台实现,但需单独评估成熟度。
优点与注意事项
技术选型不仅要看能力,也要理解它带来的团队成本。
主要优点
React Native 擅长的地方
- 使用成熟的 React 组件模型和 TypeScript 构建真正的原生界面
- Android 与 iOS 可共享大部分业务逻辑、数据层和组件结构
- New Architecture 支持并发 React、同步布局和更高效的原生互操作
- Hermes、Metro 与 DevTools 由核心项目协调并随版本持续改进
- 社区规模大,导航、动画、手势、存储和设备 API 方案丰富
- 既能通过 Expo 快速建立完整工具链,也能直接控制 Android/iOS 工程
- 遇到平台限制时可以使用 Swift、Kotlin、Objective-C 或 C++ 扩展,不受 WebView 能力约束
需要注意
采用前应考虑的问题
React Native 核心不包含路由、签名发布和完整原生模块集合,大多数新项目使用 Expo 会比自行拼装工具链更稳妥。
导航、权限、后台任务、键盘、安全区域、生命周期、推送和商店规则都需要移动端知识与真机测试。
Android 与 iOS 在控件、字体、手势、系统版本和无障碍行为上存在差异,部分界面应使用平台专属实现。
React Native 通常每两个月发布一个 Minor,支持窗口较短;项目需要持续升级并在 CI 中验证原生依赖。
旧库可通过互操作层运行,但关键依赖应优先采用支持 Fabric、TurboModules 和当前 React Native 版本的发行版。
Gradle、CocoaPods、Xcode、Android SDK、签名和 CI 环境可能出现平台特定问题,框架不会完全消除这些成本。
大列表、图片、动画、启动和高频 JS/Native 交互需要针对 Release Build 使用 Profiler 与原生工具定位瓶颈。
要覆盖浏览器通常需要 Expo 或 React Native Web,并处理 DOM、SEO、键鼠交互和响应式布局差异。
敏感存储、证书、权限说明、网络策略和数据采集需同时检查 JavaScript、Android、iOS 和商店清单。
快速开始
先了解官方推荐的 Expo Framework 路径,再使用 React Native 0.86 Community CLI 创建可直接维护 Android 与 iOS 工程的项目。
bashnpx create-expo-app@latest native-catalog
cd native-catalog
npx expo startbashnpx @react-native-community/cli@latest init NativeCatalog --version 0.86.0
cd NativeCatalog
# Android
npm run android
# iOS(需要 macOS 与 Xcode)
npm run iostsximport {
FlatList,
Pressable,
SafeAreaView,
StyleSheet,
Text,
} from "react-native";
const projects = [
{ id: "react-native", name: "React Native" },
{ id: "expo", name: "Expo" },
];
export default function App() {
return (
<SafeAreaView style={styles.container}>
<Text style={styles.title}>开源项目</Text>
<FlatList
data={projects}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<Pressable
accessibilityRole="button"
style={styles.card}
onPress={() => console.log(item.id)}
>
<Text>{item.name}</Text>
</Pressable>
)}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
title: {
marginBottom: 16,
fontSize: 28,
fontWeight: "700",
},
card: {
marginBottom: 12,
borderRadius: 12,
backgroundColor: "#e8f8ff",
padding: 16,
},
});typescriptimport { Platform, StyleSheet } from "react-native";
export const styles = StyleSheet.create({
card: {
padding: 16,
...Platform.select({
ios: {
shadowColor: "#000",
shadowOpacity: 0.12,
shadowRadius: 12,
},
android: {
elevation: 4,
},
default: {
borderWidth: 1,
borderColor: "#d4d4d8",
},
}),
},
});bashnpm test
npm run lint
# Android Release
npm run android -- --mode=release
# iOS Release
npm run ios -- --mode=Release下一步:大多数新项目优先选择 Expo 与 Development Build;只有明确需要直接控制原生工程、定制构建系统或采用框架尚未覆盖的能力时,再从 Community CLI 起步。
类似项目
这些方案同样用于跨平台移动应用,但在渲染引擎、开发语言、原生工程管理和工具链完整度方面不同。
React
用于构建 Web 和原生用户界面的组件化 JavaScript 库。
查看项目Expo
基于 React Native 的通用应用框架与工具平台,覆盖 Android、iOS 和 Web。
查看项目Flutter
使用 Dart 和自有渲染引擎构建移动、Web 与桌面应用的跨平台 UI 工具包。
查看项目Lucide
由社区维护的统一线性 SVG 图标库,提供 1,600 多个图标、Tree Shaking 和多框架组件包。
查看项目Kotlin Multiplatform
JetBrains 推动的跨平台技术,可共享 Kotlin 业务逻辑,并按需保留原生 UI 或采用 Compose Multiplatform。
访问官网React Native vs Expo
React Native 是构建原生 UI 的核心框架,Expo 则在其上提供 SDK、Router、CNG、Development Build 和发布服务。两者并不是互斥技术:Expo 应用就是 React Native 应用,也能使用自定义原生代码。
| 比较维度 | React Native | Expo |
|---|---|---|
| 定位 | 跨平台原生 UI 核心框架 | React Native 应用框架、SDK 与工具平台 |
| 创建项目 | 官方建议优先使用 Framework;CLI 可直接创建原生工程 | create-expo-app 提供协调好的默认模板 |
| 导航 | 核心不内置,通常自行选择社区方案 | 新项目默认 Expo Router 文件路由 |
| 原生能力 | 社区库、TurboModule、Fabric Component 与原生代码 | Expo SDK、社区库、Expo Module 和原生代码 |
| 原生工程 | Community CLI 默认直接维护 android/ios | 可用 CNG 生成,也可提交并直接维护 |
| 构建发布 | 自行使用 Xcode、Gradle、Fastlane 或 CI | 可用 EAS Build/Submit,也可完全本地构建 |
| Web | 需要额外集成 React Native Web 等工具 | Expo Router 与 Web 工具链提供统一入口 |
| 更适合 | 需要深度原生控制和自建工具链的团队 | 大多数希望更快建立完整生产流程的新应用 |
对于绝大多数新项目,优先使用 Expo 和 Development Build,因为它保留 React Native 的原生扩展能力,同时提供更完整的路由、SDK 和发布流程;如果已有成熟 Android/iOS 工程、需要长期直接维护原生构建系统,或明确遇到 Expo/CNG 无法覆盖的约束,再使用 Community CLI 自行组合工具链。选择应基于关键原生依赖、CI、签名和真机性能验证。
资料核验
版本、维护信息与本页采用的官方资料来源。
本次核验覆盖 React Native 的核心定位、主要能力、官方入口与开源许可。项目版本持续更新,具体补丁版本、兼容性和迁移要求请在采用前继续核对官方发布记录。
官方仓库未归档,核验时最近可见的代码活动日期为 2026 年 7 月 25 日。该状态表示项目近期仍有公开维护活动,不代表固定发布频率或长期支持承诺。