React Native

欢迎来到 React Native 开发知识库！

⚛️ React Native 简介

React Native 是 Facebook（Meta）开源的跨平台移动应用框架，使用 JavaScript/TypeScript 和 React 开发，一套代码可以同时构建 iOS 和 Android 应用。对于熟悉 Web 开发的工程师来说，React Native 是进入移动开发的最佳选择。

🎯 学习路线

第一阶段：基础入门 (1-2个月)

前置要求：

JavaScript ES6+ 基础
React 基础（Hooks）
Node.js 和 npm

React Native 基础
- 组件系统
- JSX 语法
- Props 和 State
- Hooks 使用
核心组件
- View、Text、Image
- TextInput、Button
- ScrollView、FlatList
样式与布局
- StyleSheet
- Flexbox 布局
- 响应式设计

第二阶段：进阶学习 (2-3个月)

导航
- React Navigation
- Stack、Tab、Drawer 导航
- 路由配置
状态管理
- Context API
- Redux Toolkit
- Zustand
网络与数据
- Fetch API / Axios
- AsyncStorage
- REST API 集成

第三阶段：高级应用 (3-6个月)

原生模块
- 原生模块开发
- 原生 UI 组件
- 第三方库集成
性能优化
- FlatList 优化
- 内存管理
- 启动速度优化
发布部署
- iOS App Store 发布
- Google Play 发布
- CodePush 热更新

🛠️ 开发工具

必备工具

Node.js - JavaScript 运行环境
React Native CLI - 官方脚手架
Expo CLI - 快速开发工具（可选）
VS Code - 推荐编辑器

开发环境

Xcode - iOS 开发（Mac）
Android Studio - Android 开发
Watchman - 文件监听（Mac）

调试工具

React Native Debugger - 调试工具
Flipper - 移动应用调试平台
Metro Bundler - JS 打包工具

⚖️ Expo vs React Native CLI

特性	Expo	React Native CLI
上手难度	🟢 简单	🟡 中等
环境配置	🟢 简单	🔴 复杂
原生模块	⚠️ 受限	✅ 完全支持
打包大小	📦 较大	📦 较小
适用场景	快速原型、学习	生产项目

建议：

学习阶段：使用 Expo，快速上手
生产项目：使用 React Native CLI，灵活性更高

✨ React Native 特点

✅ 核心优势

Web 开发者友好 - 使用熟悉的 React 和 JavaScript
跨平台 - 一套代码，iOS 和 Android 共享
热重载 - 快速开发迭代
庞大生态 - npm 上有丰富的第三方库
成熟稳定 - Facebook、Airbnb、Tesla 等大厂使用

⚠️ 注意事项

性能略低于原生（但足够用）
某些复杂功能需要原生代码
版本升级可能有兼容性问题

📊 与其他框架对比

特性	React Native	Flutter	Uni-app
语言	JS/TS	Dart	Vue.js
性能	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
学习成本	🟢 低	🟡 中	🟢 低
社区生态	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
就业需求	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
适合人群	Web 开发者	追求性能	快速开发

🏗️ 项目结构

my-app/
├── android/              # Android 原生代码
├── ios/                  # iOS 原生代码
├── node_modules/         # 依赖包
├── src/                  # 源代码
│   ├── screens/         # 页面
│   │   ├── HomeScreen.tsx
│   │   └── ProfileScreen.tsx
│   ├── components/      # 组件
│   │   ├── Button.tsx
│   │   └── Card.tsx
│   ├── navigation/      # 导航配置
│   ├── store/           # 状态管理
│   ├── services/        # API 服务
│   ├── utils/           # 工具函数
│   └── types/           # TypeScript 类型
├── App.tsx              # 应用入口
├── package.json         # 依赖配置
└── tsconfig.json        # TS 配置

📖 学习资源

官方资源

中文资源

常用库

React Navigation - 导航
React Native Paper - Material Design
Axios - 网络请求
Redux Toolkit - 状态管理

🎯 开始学习

选择一个方向开始深入学习：

👉 React 基础 - 掌握 React Hooks
👉 核心组件 - 常用组件使用
👉 导航 - React Navigation

💡 学习建议

先学 React - React Native 基于 React
TypeScript 优先 - 提高代码质量
从 Expo 开始 - 降低入门门槛
动手做项目 - 做一个完整的 App
阅读文档 - React Native 文档写得很好
加入社区 - Discord、Stack Overflow

🚀 第一个 React Native App

使用 Expo 快速创建：

bash

npx create-expo-app my-app
cd my-app
npm start

或者手动创建：

tsx

import React, { useState } from 'react';
import {
  SafeAreaView,
  View,
  Text,
  Button,
  StyleSheet,
} from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.title}>
          你好，React Native！
        </Text>
        
        <Text style={styles.counter}>
          计数：{count}
        </Text>
        
        <Button
          title="点击 +1"
          onPress={() => setCount(count + 1)}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  counter: {
    fontSize: 20,
    marginBottom: 20,
  },
});

运行应用，你的第一个 React Native App 就完成了！🎉

React Native ​

⚛️ React Native 简介 ​

🎯 学习路线 ​

第一阶段：基础入门 (1-2个月) ​

第二阶段：进阶学习 (2-3个月) ​

第三阶段：高级应用 (3-6个月) ​

🛠️ 开发工具 ​

必备工具 ​

开发环境 ​

调试工具 ​

⚖️ Expo vs React Native CLI ​

✨ React Native 特点 ​

✅ 核心优势 ​

⚠️ 注意事项 ​

📊 与其他框架对比 ​

🏗️ 项目结构 ​

📖 学习资源 ​

官方资源 ​

推荐课程 ​

中文资源 ​

常用库 ​

🎯 开始学习 ​

💡 学习建议 ​

🚀 第一个 React Native App ​