返回项目目录
前端框架精选项目

React Native

使用 React 和原生平台组件构建 Android、iOS 及更多平台应用的开源框架。

主要语言TypeScript
开源许可MIT
项目类型前端框架
维护状态活跃维护
OVERVIEW

项目概述

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 0.86
默认架构Fabric + TurboModules
默认引擎Hermes
FEATURES

主要特点

React Native 以 React 组件和跨平台 TypeScript 为开发入口,同时保留直接调用与扩展 Android、iOS 原生能力的路径。

01

真正的原生组件

View、Text、Image 和 Pressable 等 React 组件映射到平台视图与控件,能够使用原生布局、输入、无障碍和交互行为。

02

跨平台代码共享

React 组件、Hooks、状态、网络与业务逻辑可在 Android 和 iOS 复用,并通过 Platform API 或文件后缀处理差异。

03

Fabric Renderer

New Architecture 的渲染器支持同步布局读取、并发 React 与更一致的线程模型,为高质量原生交互提供基础。

04

TurboModules、JSI 与 Codegen

类型规范生成原生接口,JavaScript 可通过 JSI 直接连接 Kotlin、Swift、Objective-C 或 C++,避免旧 Bridge 的 JSON 序列化。

05

Hermes JavaScript 引擎

Hermes 针对 React Native 的启动、内存与包体进行优化,并与每个 React Native 版本一起构建和测试。

06

Metro 与 Fast Refresh

Metro 负责解析、转换和打包原生应用 JavaScript,Fast Refresh 在开发时尽可能保留组件状态并快速反馈修改。

07

React Native DevTools

内置调试体验覆盖 Console、Sources、Network、Components 和 Profiler,同时原生问题仍可使用 Android Studio 与 Xcode。

08

可扩展原生平台

当社区库不足时,可编写 Turbo Native Module、Fabric Native Component 或跨平台 C++ Module,并与现有原生工程集成。

USE CASES

适用场景

适合需要真正原生控件和设备能力,希望在 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 等平台实现,但需单独评估成熟度。

EVALUATION

优点与注意事项

技术选型不仅要看能力,也要理解它带来的团队成本。

主要优点

React Native 擅长的地方

  • 使用成熟的 React 组件模型和 TypeScript 构建真正的原生界面
  • Android 与 iOS 可共享大部分业务逻辑、数据层和组件结构
  • New Architecture 支持并发 React、同步布局和更高效的原生互操作
  • Hermes、Metro 与 DevTools 由核心项目协调并随版本持续改进
  • 社区规模大,导航、动画、手势、存储和设备 API 方案丰富
  • 既能通过 Expo 快速建立完整工具链,也能直接控制 Android/iOS 工程
  • 遇到平台限制时可以使用 Swift、Kotlin、Objective-C 或 C++ 扩展,不受 WebView 能力约束

需要注意

采用前应考虑的问题

官方推荐使用 Framework

React Native 核心不包含路由、签名发布和完整原生模块集合,大多数新项目使用 Expo 会比自行拼装工具链更稳妥。

仍需掌握移动平台

导航、权限、后台任务、键盘、安全区域、生命周期、推送和商店规则都需要移动端知识与真机测试。

跨平台不是完全一致

Android 与 iOS 在控件、字体、手势、系统版本和无障碍行为上存在差异,部分界面应使用平台专属实现。

版本节奏较快

React Native 通常每两个月发布一个 Minor,支持窗口较短;项目需要持续升级并在 CI 中验证原生依赖。

检查 New Architecture 兼容性

旧库可通过互操作层运行,但关键依赖应优先采用支持 Fabric、TurboModules 和当前 React Native 版本的发行版。

原生构建复杂度仍然存在

Gradle、CocoaPods、Xcode、Android SDK、签名和 CI 环境可能出现平台特定问题,框架不会完全消除这些成本。

性能需要基于真机分析

大列表、图片、动画、启动和高频 JS/Native 交互需要针对 Release Build 使用 Profiler 与原生工具定位瓶颈。

Web 不是核心默认目标

要覆盖浏览器通常需要 Expo 或 React Native Web,并处理 DOM、SEO、键鼠交互和响应式布局差异。

安全与隐私涉及原生配置

敏感存储、证书、权限说明、网络策略和数据采集需同时检查 JavaScript、Android、iOS 和商店清单。

QUICK START

快速开始

先了解官方推荐的 Expo Framework 路径,再使用 React Native 0.86 Community CLI 创建可直接维护 Android 与 iOS 工程的项目。

1官方推荐:使用 React Native Framework
bash
npx create-expo-app@latest native-catalog
cd native-catalog
npx expo start
2不使用 Framework 创建 0.86 项目
bash
npx @react-native-community/cli@latest init NativeCatalog --version 0.86.0
cd NativeCatalog

# Android
npm run android

# iOS(需要 macOS 与 Xcode)
npm run ios
3编写第一个原生列表
tsx
import {
  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,
  },
});
4按平台调整实现
typescript
import { 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",
      },
    }),
  },
});
5运行质量检查与 Release Build
bash
npm test
npm run lint

# Android Release
npm run android -- --mode=release

# iOS Release
npm run ios -- --mode=Release

下一步:大多数新项目优先选择 Expo 与 Development Build;只有明确需要直接控制原生工程、定制构建系统或采用框架尚未覆盖的能力时,再从 Community CLI 起步。

ALTERNATIVES

类似项目

这些方案同样用于跨平台移动应用,但在渲染引擎、开发语言、原生工程管理和工具链完整度方面不同。

COMPARISON

React Native vs Expo

React Native 是构建原生 UI 的核心框架,Expo 则在其上提供 SDK、Router、CNG、Development Build 和发布服务。两者并不是互斥技术:Expo 应用就是 React Native 应用,也能使用自定义原生代码。

比较维度React NativeExpo
定位跨平台原生 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、签名和真机性能验证。

VERIFICATION

资料核验

版本、维护信息与本页采用的官方资料来源。

最后核验2026 年 7 月 26 日
核验版本官方当前稳定版与文档主线
内容维护Docs100 编辑整理
项目维护状态活跃维护

本次核验覆盖 React Native 的核心定位、主要能力、官方入口与开源许可。项目版本持续更新,具体补丁版本、兼容性和迁移要求请在采用前继续核对官方发布记录。

维护状态核验2026 年 7 月 26 日 · 最近可见代码活动:2026 年 7 月 25 日

官方仓库未归档,核验时最近可见的代码活动日期为 2026 年 7 月 25 日。该状态表示项目近期仍有公开维护活动,不代表固定发布频率或长期支持承诺。

查看官方仓库