RN 基础与环境搭建

什么是 React Native

React Native 由 Facebook（现 Meta）于 2015 年开源，是目前最主流的跨平台移动开发框架之一。它的核心理念是 Learn Once, Write Anywhere——不同于 Cordova/Ionic 的"Write Once, Run Anywhere"，React Native 允许开发者用同一套 React 知识体系开发 iOS 和 Android 应用，但每个平台可以根据需要做定制化适配。

React Native 最关键的特性是：它渲染的是真正的原生组件，而不是 WebView 包裹的 HTML。当你写 <View> 时，iOS 上会渲染为 UIView，Android 上渲染为 android.view.View。这意味着 React Native 应用的 UI 性能和原生开发相差无几，而不是 Hybrid 应用那种"差一截"的体验。

核心名词解释

RN vs Flutter vs 原生开发

选择跨平台框架还是原生开发，是每个移动项目必须面对的决策。下表从多个维度对比主流方案：

RN 渲染架构（新旧对比）

理解 React Native 的架构是写出高性能应用的基础。以下是新旧两种架构的线程通信模型：

Expo 是什么，为什么推荐

很多初学者会困惑：React Native 官方文档说要配置 Xcode 和 Android Studio，光是环境搭建就要花几个小时甚至几天。Expo 解决了这个痛点。

使用 Expo，你不需要安装 Xcode（如果用 Expo Go 调试）或配置 Android SDK，只需要 Node.js 和一部手机。Expo 提供：

• Expo Go：手机 App，扫描二维码即可预览你的代码
• Expo SDK：封装了几十个原生模块（相机、定位、推送等），开箱即用
• EAS Build：云端构建服务，不需要本地 Xcode 就能生成 .ipa 和 .apk
• EAS Submit：自动提交到 App Store / Google Play
• Expo Router：基于文件系统的路由（类似 Next.js），是目前最推荐的导航方案

环境搭建与创建第一个项目

以下是使用 Expo 快速创建项目的步骤：

1. 安装 Node.js 18+（推荐 LTS 版本），前往 nodejs.org 下载
2. 运行 npx create-expo-app@latest MyApp --template blank-typescript
3. 进入目录：cd MyApp
4. 启动开发服务器：npx expo start
5. 手机安装 Expo Go App，扫描终端显示的二维码

项目结构说明

# Expo Router 项目结构（推荐方案）
MyApp/
├── app/                    # 路由目录（基于文件系统）
│   ├── (tabs)/             # Tab 导航组 （括号=布局文件夹）
│   │   ├── index.tsx       # 首页 /
│   │   └── profile.tsx     # 个人页 /profile
│   ├── _layout.tsx         # 根布局（NavigationContainer）
│   └── post/[id].tsx       # 动态路由 /post/123
├── components/             # 可复用组件
├── hooks/                  # 自定义 Hook
├── constants/              # 颜色、配置常量
├── assets/                 # 图片、字体资源
├── app.json                # Expo 配置（图标、权限等）
└── tsconfig.json

第一个 App：Hello World

// app/index.tsx — 最简单的 React Native 组件
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { useState } from 'react';

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native 入门</Text>
      <Text style={styles.counter}>点击次数：{count}</Text>
      <TouchableOpacity
        style={styles.button}
        onPress={() => setCount(c => c + 1)}
      >
        <Text style={styles.buttonText}>点击我</Text>
      </TouchableOpacity>
    </View>
  );
}

// StyleSheet.create 会在运行时优化样式对象，
// 并提供 TypeScript 类型检查，推荐始终使用
const styles = StyleSheet.create({
  container: {
    flex: 1,                    // 撑满整个屏幕
    alignItems: 'center',      // 横轴居中
    justifyContent: 'center',  // 主轴居中
    backgroundColor: '#020d18',
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
    color: '#38bdf8',
    marginBottom: 16,
  },
  counter: {
    fontSize: 18,
    color: '#94cfe8',
    marginBottom: 24,
  },
  button: {
    backgroundColor: '#38bdf8',
    paddingHorizontal: 28,
    paddingVertical: 12,
    borderRadius: 10,
  },
  buttonText: {
    color: '#020d18',
    fontWeight: '700',
    fontSize: 16,
  },
});

调试工具

React Native 提供多种调试手段，合理使用可以大幅提升开发效率：

# 常用调试命令
npx expo start                 # 启动开发服务器
npx expo start --clear         # 清除 Metro 缓存重启（遇到奇怪问题时）
npx expo start --tunnel        # 通过 Tunnel 模式（网络不在同一 WiFi 时）

# 清除模拟器缓存
npx expo start --reset-cache

# 查看 Android 日志
npx react-native log-android   # 等效于 adb logcat

# 查看 iOS 日志
npx react-native log-ios       # 等效于 Console.app