React Native #
React Native 是由 Facebook 开发并开源的跨平台移动应用开发框架。它允许开发者使用 JavaScript 和 React 来构建原生移动应用，一套代码可以同时运行在 iOS 和 Android 平台上。
什么是React Native？ #
React Native 是一个用于构建原生移动应用的框架，它使用 React 的声明式编程模型和 JavaScript 语言。与传统的混合应用不同，React Native 生成的是真正的原生应用，具有原生应用的性能和用户体验。
React Native的优势 #
| 优势 | 说明 |
|---|---|
| 跨平台开发 | 一套代码同时运行在 iOS 和 Android 平台 |
| 原生性能 | 生成真正的原生应用，性能接近原生开发 |
| 热重载 | 代码修改即时预览，开发效率高 |
| 社区活跃 | 大量开源组件和工具，问题容易解决 |
| 学习成本低 | 熟悉 React 的开发者可以快速上手 |
| 动态更新 | 支持热更新，无需重新发布应用 |
文档结构 #
本指南按以下结构组织，适合初学者按顺序学习：
1. 基础入门 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| React Native简介 | 了解 React Native 的特点和应用场景 | intro.md |
| 环境搭建 | 配置开发环境和工具链 | environment-setup.md |
| 第一个应用 | 创建并运行你的第一个 React Native 应用 | first-app.md |
| 核心概念 | 理解 React Native 的核心概念 | core-concepts.md |
2. 组件基础 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 基础组件 | View、Text、Image 等核心组件 | basic-components.md |
| 样式系统 | StyleSheet 样式定义与管理 | styling.md |
| 布局与Flexbox | Flexbox 弹性布局详解 | flexbox-layout.md |
| 事件处理 | 触摸事件与手势处理 | event-handling.md |
3. 导航 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| React Navigation基础 | 导航库配置与基本使用 | navigation-basics.md |
| 导航进阶 | 导航参数、深层链接等高级功能 | navigation-advanced.md |
4. 数据管理 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 状态管理基础 | useState、Context、Redux 等方案 | state-management.md |
| AsyncStorage | 本地数据持久化存储 | async-storage.md |
| 网络请求 | API 调用与数据处理 | networking.md |
5. 设备功能 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 相机与相册 | 图片拍摄与选择 | camera-gallery.md |
| 定位服务 | 获取设备地理位置 | geolocation.md |
| 推送通知 | 本地与远程推送通知 | push-notification.md |
6. 高级特性 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 原生模块 | 与原生代码交互 | native-modules.md |
| 性能优化 | 应用性能调优技巧 | performance.md |
| 动画系统 | Animated 动画库使用 | animations.md |
7. 发布部署 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 打包发布 | 应用打包与上架流程 | build-release.md |
| 热更新 | CodePush 热更新集成 | code-push.md |
学习路线 #
初学者路线 #
text
基础入门 → 组件基础 → 导航 → 数据管理
进阶路线 #
text
设备功能 → 高级特性 → 发布部署
专家路线 #
text
原生模块开发 → 性能深度优化 → 架构设计
技术栈概览 #
text
React Native 技术栈
├── React Native 0.73+ 核心框架
├── React 18 基础库
├── React Navigation 6 导航库
├── Redux Toolkit 状态管理
├── AsyncStorage 本地存储
├── Axios 网络请求
└── TypeScript 类型支持（推荐）
前置知识 #
学习本指南前，建议具备以下基础：
- JavaScript ES6+：箭头函数、解构、Promise、async/await
- React 基础：组件、Props、State、Hooks
- CSS 基础：Flexbox 布局概念
- 命令行操作：基本的终端命令
- Node.js：包管理工具 npm/yarn
开发环境要求 #
iOS 开发 #
- macOS 操作系统
- Xcode 14.0 或更高版本
- CocoaPods
- iOS 模拟器或真机
Android 开发 #
- Android Studio
- Android SDK (API 21+)
- Android 模拟器或真机
- JDK 11 或更高版本
学习建议 #
- 循序渐进：按照章节顺序学习，打好基础
- 动手实践：每学完一章，动手编写代码
- 真机调试：使用真机测试，体验真实效果
- 阅读文档：养成查阅官方文档的习惯
- 社区参与：遇到问题多在社区交流
版本说明 #
本指南基于 React Native 0.73 编写，推荐使用最新稳定版本。
| 版本 | 状态 | 说明 |
|---|---|---|
| React Native 0.73.x | 推荐 | 最新稳定版，支持新架构 |
| React Native 0.72.x | 维护 | 稳定版本 |
| React Native 0.71.x | 维护 | 旧项目维护使用 |
常见问题 #
React Native 和 React 有什么区别？ #
React 用于构建 Web 应用，使用 HTML DOM 元素；React Native 用于构建移动应用，使用原生组件如 View、Text、Image 等。
React Native 性能如何？ #
React Native 生成真正的原生应用，性能接近原生开发。对于大多数应用场景，性能完全满足需求。
需要学习原生开发吗？ #
基本的 React Native 开发不需要原生开发经验。但了解原生开发有助于解决复杂问题和进行性能优化。
开始学习 #
准备好了吗？让我们从 React Native简介 开始你的跨平台移动开发之旅！
最后更新：2026-03-28