create-expo-app:5 分钟跑起来

脚手架

npx create-expo-app@latest my-app
# 选模板: Default(带 Expo Router + TypeScript)

cd my-app
npx expo start
# 按 i 开 iOS 模拟器,按 a 开 Android,按 w 开 Web

首次启动会装 Metro bundler,下载 JS bundle。iOS 默认开 Xcode 模拟器,Android 开 Android Studio emulator 或 USB 真机。Web 开 http://localhost:8081。

目录结构

my-app/
├── app/                      ← 路由目录(核心)
│   ├── _layout.tsx           ← Root Layout(相当于 App.tsx)
│   ├── index.tsx             ← /
│   ├── +not-found.tsx        ← 404
│   └── (tabs)/               ← 分组路由
│       ├── _layout.tsx       ← Tabs 布局
│       ├── index.tsx         ← /(tabs)
│       └── explore.tsx       ← /explore
├── assets/                   ← 图片、字体、音频
│   ├── fonts/
│   └── images/
├── components/               ← 可复用组件(约定,可自定义)
├── constants/                ← 颜色、配置
├── hooks/                    ← 自定义 hooks
├── app.json                  ← Expo 配置(bundleId、icon、permission)
├── package.json
└── tsconfig.json

app.json:单一配置源

{
  "expo": {
    "name": "my-app",
    "slug": "my-app",
    "scheme": "myapp",
    "version": "1.0.0",
    "ios": { "bundleIdentifier": "com.gufa.myapp" },
    "android": { "package": "com.gufa.myapp" },
    "plugins": ["expo-router"],
    "experiments": { "typedRoutes": true }
  }
}

bundleId / package / scheme(Deep Link 协议)都写在这里。改完跑 npx expo prebuild 重新生成 ios/android 目录(EAS Build 会自动做)。

app/_layout.tsx 根布局

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack screenOptions={{ headerShown: true }}>
      <Stack.Screen name="index" options={{ title: '首页' }} />
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

app/index.tsx:首屏

import { View, Text, StyleSheet } from 'react-native';
import { Link } from 'expo-router';

export default function Home() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello Expo Router!</Text>
      <Link href="/settings">去设置</Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  title: { fontSize: 24, fontWeight: '600' },
});

添加一个页面

# 新建 app/settings.tsx,保存,热重载会立刻出现 /settings 路由

// app/settings.tsx
import { View, Text, Switch } from 'react-native';
import { useState } from 'react';

export default function Settings() {
  const [on, setOn] = useState(true);
  return (
    <View style={{ padding: 16 }}>
      <Text>深色模式</Text>
      <Switch value={on} onValueChange={setOn} />
    </View>
  );
}

导航 API 三兄弟

热重载与 Fast Refresh

• 保存文件 → Metro 检测 → 秒级热替换,保持组件状态
• 改 _layout 或路由结构,需要完整重载一次
• 改 app.json 要重新 npx expo start -c 清缓存
• Native 代码(config plugin / 新增包)要 npx expo prebuild --clean 重建

开发工具

常见坑

本章小结