# expo-demo

**Repository Path**: chenbool/expo-demo

## Basic Information

- **Project Name**: expo-demo
- **Description**: expo 学习案例
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-06
- **Last Updated**: 2026-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Expo React Native 应用项目

## 项目介绍

这是一个基于 Expo 和 React Native 的移动应用项目，使用了 Expo Router 实现导航和路由管理。项目采用 Tab 导航作为主要导航结构，并支持模态页面、参数传递等高级导航功能。

本项目旨在展示 Expo 和 React Native 的核心功能，包括导航、路由、组件构建、状态管理等，为开发者提供一个完整的参考示例。

## 技术栈

- **React Native**: 用于构建跨平台移动应用的框架
- **Expo**: React Native 的开发平台，提供丰富的原生功能
- **Expo Router**: 基于文件系统的导航库，简化路由配置
- **React**: JavaScript 库，用于构建用户界面
- **expo-image**: 高性能图片组件
- **@expo/vector-icons**: 图标库
- **react-native-safe-area-context**: 安全区域上下文处理
- **react-native-screens**: 原生屏幕组件优化

## 项目结构

```
.
├── app/                           # 应用页面和路由目录
│   ├── (tabs)/                    # Tab 导航页面
│   │   ├── _layout.js             # Tab 导航布局配置
│   │   ├── index.js               # 首页（发现页面）
│   │   ├── users.js               # 用户中心页面
│   │   └── videos.js              # 视频课程页面
│   ├── articles/                  # 通知相关页面
│   │   └── index.js               # 通知列表页面
│   ├── courses/                   # 课程相关页面
│   │   └── [id].js                # 课程详情页面（动态路由）
│   ├── search/                    # 搜索相关页面
│   │   └── index.js               # 搜索页面
│   ├── settings/                  # 设置相关页面
│   │   └── index.js               # 设置页面
│   ├── teachers/                  # 教师相关页面
│   │   └── [id].js                # 教师详情页面（模态展示）
│   ├── _layout.js                 # 应用根布局配置
│   └── details.js                 # 详情页面
├── assets/                        # 静态资源目录
│   ├── adaptive-icon.png          # Android 自适应图标
│   ├── favicon.png                # 网页 favicon 图标
│   ├── icon.png                   # 应用图标
│   ├── logo.png                   # 应用 Logo
│   └── splash-icon.png            # 启动页图标
├── app.json                       # Expo 应用配置文件
├── package.json                   # 项目依赖和脚本配置
└── README.md                      # 项目说明文档
```

## 核心功能详解

### 1. 导航结构

#### Tab 导航
- **底部标签导航**: 包含"发现"、"视频课程"、"我的"三个主要功能模块
- **自定义导航栏**: 使用 Logo 作为标题，左右两侧分别放置通知、搜索和设置按钮
- **图标支持**: 使用 SimpleLineIcons 图标库为每个 Tab 提供视觉标识

#### 堆栈导航
- **页面堆栈管理**: 支持页面间的前进和后退操作
- **自定义转场动画**: 不同页面间使用不同的页面切换动画效果
- **标题配置**: 支持为每个页面单独配置标题和样式

#### 模态导航
- **模态页面展示**: 支持从底部滑入的模态页面展示（如教师详情页）
- **自定义关闭按钮**: 在模态页面中提供关闭按钮，提升用户体验

### 2. 页面功能详解

#### 首页 (app/(tabs)/index.js)
- **多种导航示例**: 展示了 Link 组件导航、编程式导航、带参数导航等多种方式
- **交互组件**: 使用 TouchableOpacity 提供点击反馈
- **参数传递**: 演示了 URL 参数和 params 对象两种传参方式

#### 视频课程页 (app/(tabs)/videos.js)
- **内容展示**: 展示视频课程相关内容

#### 用户中心页 (app/(tabs)/users.js)
- **个人中心**: 展示用户相关信息

#### 通知列表页 (app/articles/index.js)
- **信息展示**: 展示系统通知列表

#### 搜索页 (app/search/index.js)
- **搜索功能**: 提供搜索功能入口

#### 设置页 (app/settings/index.js)
- **应用设置**: 提供应用设置功能

#### 详情页 (app/details.js)
- **通用详情**: 通用详情页面，包含返回功能

#### 课程详情页 (app/courses/[id].js)
- **动态路由**: 根据 ID 展示特定课程信息
- **参数解析**: 使用 useLocalSearchParams 获取路由参数

#### 教师详情页 (app/teachers/[id].js)
- **模态展示**: 以模态形式展示教师详细信息

### 3. 导航示例详解

#### Link 组件导航
```jsx
<Link href="/details" style={styles.link}>
  跳转到 详情页 (Link)
</Link>
```

#### Link 组件与自定义组件结合
```jsx
<Link href="/details" asChild>
  <TouchableOpacity>
    <Text style={styles.buttonText}>
      跳转到 详情页（Link + asChild）
    </Text>
  </TouchableOpacity>
</Link>
```

#### 编程式导航
```jsx
<TouchableOpacity onPress={() => router.navigate('/details')}>
  <Text style={styles.buttonText}>
    跳转（navigate）
  </Text>
</TouchableOpacity>
```

#### 带参数导航
```jsx
// URL 参数方式
<Link style={styles.link} href="/courses/1?title=Node.js">
  跳转传参(Link)
</Link>

// params 对象方式
<Link
  style={styles.link}
  href={{
    pathname: '/courses/[id]',
    params: { id: 2 }
  }}
>
  跳转传参（Link 使用 params）
</Link>
```

## 项目配置详解

### app.json 配置说明
```json
{
  "expo": {
    "name": "test", // 应用名称
    "slug": "test", // 应用唯一标识符
    "version": "1.0.0", // 应用版本号
    "scheme": "test", // 应用自定义 URL scheme
    "orientation": "portrait", // 屏幕方向，设置为竖屏
    "icon": "./assets/icon.png", // 应用图标路径
    "userInterfaceStyle": "light", // 用户界面样式，设置为浅色模式
    "newArchEnabled": true, // 启用新架构
    "splash": {
      "image": "./assets/splash-icon.png", // 启动页图片路径
      "resizeMode": "contain", // 图片缩放模式
      "backgroundColor": "#ffffff" // 启动页背景色
    },
    "ios": {
      "supportsTablet": true // iOS 平台是否支持平板
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png", // Android 自适应图标前景图
        "backgroundColor": "#ffffff" // Android 自适应图标背景色
      },
      "edgeToEdgeEnabled": true // Android 是否启用边缘到边缘显示
    },
    "web": {
      "favicon": "./assets/favicon.png" // 网页 favicon 图标路径
    },
    "plugins": [
      "expo-router" // 使用的 Expo 插件，这里使用了 expo-router
    ]
  }
}
```

### package.json 配置说明
```json
{
  "name": "test", // 项目名称
  "version": "1.0.0", // 项目版本
  "main": "expo-router/entry", // 应用入口文件
  "scripts": {
    "start": "expo start", // 启动开发服务器
    "android": "expo start --android", // 在 Android 设备上启动
    "ios": "expo start --ios", // 在 iOS 设备上启动
    "web": "expo start --web" // 在网页浏览器中启动
  },
  "dependencies": {
    "expo": "~53.0.22", // Expo 核心库
    "expo-status-bar": "~2.2.3", // 状态栏组件
    "react": "19.0.0", // React 核心库
    "react-native": "0.79.6", // React Native 核心库
    "expo-router": "~5.1.5", // Expo 路由库
    "react-native-safe-area-context": "5.4.0", // 安全区域上下文
    "react-native-screens": "~4.11.1", // 原生屏幕组件
    "expo-linking": "~7.1.7", // 链接处理
    "expo-constants": "~17.1.7", // 常量访问
    "expo-image": "~2.4.0" // 高性能图片组件
  },
  "devDependencies": {
    "@babel/core": "^7.20.0" // Babel 核心编译器
  },
  "private": true // 私有包，不会被发布到 npm
}
```

## 安装和运行

### 环境要求
- Node.js (推荐 LTS 版本)
- npm 或 yarn 包管理器
- Expo CLI (可选，Expo Go 应用也可用于开发)

### 安装步骤
1. 克隆项目到本地
2. 进入项目目录
3. 安装依赖：
   ```bash
   npm install
   # 或
   yarn install
   ```

### 运行项目
```bash
# 启动开发服务器
npm start
# 或
yarn start

# 在 Android 设备上运行
npm run android
# 或
yarn android

# 在 iOS 设备上运行
npm run ios
# 或
yarn ios

# 在网页浏览器中运行
npm run web
# 或
yarn web
```

### 开发工具推荐
- **Expo Go**: 在真实设备上预览应用
- **Android Studio**: Android 模拟器
- **Xcode**: iOS 模拟器 (仅限 macOS)
- **VS Code**: 代码编辑器，推荐安装 React Native 扩展包

## 项目架构设计

### 文件系统路由
本项目使用 Expo Router 的文件系统路由功能，路由结构与文件结构一一对应：
- `app/index.js` 对应根路径 `/`
- `app/details.js` 对应路径 `/details`
- `app/courses/[id].js` 对应动态路径 `/courses/:id`

### 布局系统
- **根布局** (`app/_layout.js`): 定义应用的整体导航结构
- **Tab 布局** (`app/(tabs)/_layout.js`): 定义底部标签导航

### 组件设计
- **函数组件**: 使用 React 函数组件和 Hooks
- **样式系统**: 使用 React Native StyleSheet
- **图标系统**: 使用 @expo/vector-icons 提供的图标库

## 开发指南

### 添加新页面
1. 在 `app/` 目录下创建新的页面文件
2. 文件名即为路由路径（如 `about.js` 对应 `/about` 路由）
3. 动态路由使用方括号命名（如 `[id].js` 对应 `/xxx/123` 路由）

### 导航配置
1. 根布局 `_layout.js` 配置全局页面选项
2. Tab 布局 `(tabs)/_layout.js` 配置 Tab 导航选项
3. 每个页面可通过 `Stack.Screen` 组件配置页面特定选项

### 样式规范
- 使用 React Native StyleSheet 创建样式对象
- 颜色值采用十六进制格式
- 尺寸单位使用 dp（自动适配不同屏幕密度）
- 样式命名采用 BEM 规范（块-元素-修饰符）

### 组件复用
- **自定义组件**: 将可复用的 UI 元素封装为组件
- **布局组件**: 创建通用布局组件提高开发效率
- **工具函数**: 将通用逻辑封装为工具函数

## 最佳实践

### 性能优化
- **图片优化**: 使用 expo-image 组件提升图片加载性能
- **列表优化**: 使用 FlatList 或 SectionList 渲染长列表
- **内存管理**: 及时清理定时器和事件监听器

### 代码质量
- **代码注释**: 为复杂逻辑添加详细注释
- **类型检查**: 使用 PropTypes 或 TypeScript 进行类型检查
- **代码格式化**: 使用 Prettier 统一代码风格

### 错误处理
- **异常捕获**: 使用 try/catch 处理异步操作异常
- **边界处理**: 使用 ErrorBoundary 处理组件渲染错误
- **用户提示**: 为用户提供友好的错误提示

## 贡献指南

1. Fork 本仓库
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 常见问题

### 1. 启动时报错
确保所有依赖已正确安装：
```bash
npm install
```

### 2. 图标不显示
检查 @expo/vector-icons 是否正确安装，并确认图标名称是否正确。

### 3. 页面跳转异常
检查路由路径是否正确，确保目标页面文件存在。

## 许可证

本项目仅供学习和参考使用。

## 联系方式

如有问题，请提交 Issue 或联系项目维护者。