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 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 日。该状态表示项目近期仍有公开维护活动,不代表固定发布频率或长期支持承诺。