feat: new project
This commit is contained in:
11
.env.example
Normal file
11
.env.example
Normal file
@@ -0,0 +1,11 @@
|
||||
# API 配置
|
||||
EXPO_PUBLIC_API_URL=https://api.example.com
|
||||
|
||||
# 应用信息
|
||||
EXPO_PUBLIC_APP_NAME=RN Demo
|
||||
EXPO_PUBLIC_APP_VERSION=1.0.0
|
||||
|
||||
# 其他配置
|
||||
# EXPO_PUBLIC_SENTRY_DSN=
|
||||
# EXPO_PUBLIC_ANALYTICS_ID=
|
||||
|
||||
83
.gitignore
vendored
Normal file
83
.gitignore
vendored
Normal file
@@ -0,0 +1,83 @@
|
||||
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
.pnp
|
||||
.pnp.js
|
||||
|
||||
# Expo
|
||||
.expo/
|
||||
dist/
|
||||
web-build/
|
||||
expo-env.d.ts
|
||||
|
||||
# Native
|
||||
.kotlin/
|
||||
*.orig.*
|
||||
*.jks
|
||||
*.p8
|
||||
*.p12
|
||||
*.key
|
||||
*.mobileprovision
|
||||
|
||||
# Metro
|
||||
.metro-health-check*
|
||||
|
||||
# debug
|
||||
npm-debug.*
|
||||
yarn-debug.*
|
||||
yarn-error.*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# macOS
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# local env files
|
||||
.env
|
||||
.env*.local
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
*.lcov
|
||||
.nyc_output
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
.project
|
||||
.settings
|
||||
.classpath
|
||||
|
||||
# logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# OS
|
||||
Thumbs.db
|
||||
|
||||
# Package manager lock files (keep pnpm-lock.yaml, ignore others)
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
|
||||
# EAS
|
||||
.eas/
|
||||
|
||||
# generated native folders
|
||||
/ios
|
||||
/android
|
||||
667
README.md
Normal file
667
README.md
Normal file
@@ -0,0 +1,667 @@
|
||||
# React Native Expo 热更新项目
|
||||
|
||||
> 基于 Expo Router 和 EAS Update 的完整 React Native 项目，支持热更新（OTA）功能
|
||||
|
||||
[](https://expo.dev/)
|
||||
[](https://reactnative.dev/)
|
||||
[](https://www.typescriptlang.org/)
|
||||
[](https://pnpm.io/)
|
||||
|
||||
## 📖 目录
|
||||
|
||||
- [项目特性](#-项目特性)
|
||||
- [快速开始](#-快速开始)
|
||||
- [项目结构](#-项目结构)
|
||||
- [热更新使用指南](#-热更新使用指南)
|
||||
- [开发指南](#-开发指南)
|
||||
- [配置说明](#-配置说明)
|
||||
- [常见问题](#-常见问题)
|
||||
- [相关资源](#-相关资源)
|
||||
|
||||
## ✨ 项目特性
|
||||
|
||||
- 🎯 **Expo Router** - 文件路由系统，类似 Next.js，支持类型安全的导航
|
||||
- 📘 **TypeScript** - 完整的类型支持，提升代码质量
|
||||
- 🔥 **EAS Update** - 热更新支持（CodePush 的官方替代方案）
|
||||
- ⚡ **React Native 新架构** - 启用 Fabric 渲染器和 TurboModules
|
||||
- 📦 **pnpm** - 快速、节省磁盘空间的包管理器
|
||||
- 🧭 **标签导航** - 开箱即用的导航示例
|
||||
- 🎨 **主题支持** - 内置深色/浅色主题切换
|
||||
- 📱 **跨平台** - 支持 iOS、Android 和 Web
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 前置要求
|
||||
|
||||
- **Node.js** 18+ ([下载](https://nodejs.org/))
|
||||
- **pnpm** ([安装指南](https://pnpm.io/installation))
|
||||
- **Expo Go** App（可选，用于快速预览）
|
||||
- [iOS App Store](https://apps.apple.com/app/expo-go/id982107779)
|
||||
- [Android Play Store](https://play.google.com/store/apps/details?id=host.exp.exponent)
|
||||
|
||||
### 第一步：安装依赖
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### 第二步：启动开发服务器
|
||||
|
||||
```bash
|
||||
pnpm start
|
||||
```
|
||||
|
||||
启动后，你会看到一个二维码和几个选项：
|
||||
|
||||
- 按 **`a`** - 在 Android 模拟器/设备上运行
|
||||
- 按 **`i`** - 在 iOS 模拟器上运行（仅 macOS）
|
||||
- 按 **`w`** - 在浏览器中运行
|
||||
- **扫描二维码** - 在 Expo Go App 中运行
|
||||
|
||||
### 第三步：在设备上查看
|
||||
|
||||
#### 方法 1：使用 Expo Go（推荐用于快速预览）
|
||||
|
||||
1. 在手机上安装 Expo Go
|
||||
2. 扫描终端中显示的二维码
|
||||
3. 应用会自动加载并运行
|
||||
|
||||
#### 方法 2：使用模拟器
|
||||
|
||||
**Android 模拟器：**
|
||||
```bash
|
||||
pnpm android
|
||||
```
|
||||
|
||||
**iOS 模拟器（仅 macOS）：**
|
||||
```bash
|
||||
pnpm ios
|
||||
```
|
||||
|
||||
**Web 浏览器：**
|
||||
```bash
|
||||
pnpm web
|
||||
```
|
||||
|
||||
## 📁 项目结构
|
||||
|
||||
```
|
||||
rn-demo/
|
||||
├── 📱 app/ # Expo Router 路由文件
|
||||
│ ├── (tabs)/ # 标签导航组
|
||||
│ │ ├── index.tsx # 首页 - 热更新演示 ⭐
|
||||
│ │ ├── two.tsx # 第二个标签页
|
||||
│ │ ├── demo.tsx # 完整示例页面
|
||||
│ │ └── _layout.tsx # 标签布局
|
||||
│ ├── _layout.tsx # 根布局 - 自动检查更新 ⭐
|
||||
│ ├── modal.tsx # 模态页面示例
|
||||
│ ├── +html.tsx # Web HTML 模板
|
||||
│ └── +not-found.tsx # 404 页面
|
||||
│
|
||||
├── 💻 src/ # 源代码目录
|
||||
│ ├── utils/ # 工具函数
|
||||
│ │ ├── api.ts # Axios API 配置
|
||||
│ │ ├── storage.ts # AsyncStorage 封装
|
||||
│ │ └── date.ts # Day.js 日期工具
|
||||
│ ├── stores/ # Zustand 状态管理
|
||||
│ │ ├── userStore.ts # 用户状态
|
||||
│ │ └── settingsStore.ts # 应用设置
|
||||
│ ├── schemas/ # Zod 验证规则
|
||||
│ │ ├── auth.ts # 认证验证
|
||||
│ │ └── user.ts # 用户验证
|
||||
│ ├── services/ # API 服务层
|
||||
│ │ ├── authService.ts # 认证服务
|
||||
│ │ └── userService.ts # 用户服务
|
||||
│ ├── hooks/ # 自定义 Hooks
|
||||
│ │ ├── useDebounce.ts # 防抖 Hook
|
||||
│ │ ├── useThrottle.ts # 节流 Hook
|
||||
│ │ └── useHaptics.ts # 触觉反馈 Hook
|
||||
│ ├── types/ # TypeScript 类型
|
||||
│ │ └── index.ts # 全局类型定义
|
||||
│ └── index.ts # 统一导出 ⭐
|
||||
│
|
||||
├── 🧩 components/ # 可复用组件
|
||||
│ ├── Themed.tsx # 主题化组件
|
||||
│ ├── ExternalLink.tsx # 外部链接组件
|
||||
│ └── useColorScheme.ts # 主题 Hook
|
||||
│
|
||||
├── 🎯 constants/ # 常量配置
|
||||
│ └── Colors.ts # 颜色主题
|
||||
│
|
||||
├── 🎨 assets/ # 静态资源
|
||||
│ ├── images/ # 图片资源
|
||||
│ └── fonts/ # 字体文件
|
||||
│
|
||||
├── 📚 docs/ # 项目文档
|
||||
│ ├── USAGE_EXAMPLES.md # 使用示例
|
||||
│ └── LIBRARIES.md # 工具库使用指南
|
||||
│
|
||||
├── ⚙️ 配置文件
|
||||
│ ├── .env.example # 环境变量示例 🎯 NEW!
|
||||
│ ├── app.json # Expo 配置 ⭐
|
||||
│ ├── eas.json # EAS 构建和更新配置 ⭐
|
||||
│ ├── package.json # 项目依赖
|
||||
│ ├── pnpm-lock.yaml # pnpm 锁文件
|
||||
│ ├── tsconfig.json # TypeScript 配置
|
||||
│ └── .gitignore # Git 忽略文件
|
||||
│
|
||||
└── 📄 文档文件
|
||||
├── README.md # 项目主文档（本文件）
|
||||
└── CHANGELOG.md # 更新日志
|
||||
|
||||
⭐ = 热更新相关的关键文件
|
||||
🎯 = 新增的文件/目录
|
||||
```
|
||||
|
||||
### 关键目录说明
|
||||
|
||||
#### 📱 `app/` - 路由和页面
|
||||
- **`app/_layout.tsx`** - 应用启动时自动检查更新
|
||||
- **`app/(tabs)/index.tsx`** - 热更新演示页面
|
||||
- **`app/(tabs)/demo.tsx`** - 完整示例页面，展示所有工具的使用 🎯
|
||||
|
||||
#### 💻 `src/` - 源代码目录 🎯
|
||||
项目的核心业务逻辑代码，包含：
|
||||
- **`utils/`** - 工具函数（API、存储、日期）
|
||||
- **`stores/`** - 状态管理（用户、设置）
|
||||
- **`schemas/`** - 数据验证（认证、用户）
|
||||
- **`services/`** - API 服务层
|
||||
- **`hooks/`** - 自定义 Hooks
|
||||
- **`types/`** - TypeScript 类型定义
|
||||
- **`index.ts`** - 统一导出所有模块
|
||||
|
||||
#### 📚 `docs/` - 项目文档 🎯
|
||||
完善的项目文档，包含：
|
||||
- **使用指南** - 如何使用各个工具
|
||||
- **代码示例** - 实际的代码示例
|
||||
- **配置说明** - 项目配置详解
|
||||
|
||||
### 核心文件说明
|
||||
|
||||
#### 热更新相关 ⭐
|
||||
- **`app.json`** - Expo 配置，包含热更新设置
|
||||
- **`eas.json`** - EAS 构建和更新通道配置
|
||||
- **`app/_layout.tsx`** - 自动检查更新逻辑
|
||||
- **`app/(tabs)/index.tsx`** - 手动检查更新功能
|
||||
|
||||
#### 工具配置 🎯
|
||||
- **`src/index.ts`** - 统一导出，从这里导入所有工具
|
||||
- **`.env.example`** - 环境变量配置示例
|
||||
- **`tsconfig.json`** - 配置了路径别名 `@/*`
|
||||
|
||||
### 已安装的工具库
|
||||
|
||||
项目已安装并配置好以下工具库：
|
||||
|
||||
| 类别 | 工具库 | 用途 |
|
||||
|------|--------|------|
|
||||
| **工具类** | lodash-es | JavaScript 工具函数 |
|
||||
| | dayjs | 日期处理 |
|
||||
| | axios | HTTP 请求 |
|
||||
| **状态管理** | zustand | 轻量级状态管理 |
|
||||
| **表单处理** | react-hook-form | 表单管理 |
|
||||
| | zod | 数据验证 |
|
||||
| **原生功能** | @react-native-async-storage/async-storage | 本地存储 |
|
||||
| | expo-image | 优化的图片组件 |
|
||||
| | expo-haptics | 触觉反馈 |
|
||||
|
||||
### 快速开始
|
||||
|
||||
1. **查看完整示例** - 运行应用，点击 "完整示例" tab 🎯
|
||||
2. **阅读文档** - 查看 [docs/](./docs/) 目录中的文档
|
||||
3. **使用工具** - 从 `@/src` 导入所需的工具
|
||||
|
||||
```typescript
|
||||
// 示例：导入工具
|
||||
import {
|
||||
api,
|
||||
Storage,
|
||||
formatDate,
|
||||
useUserStore,
|
||||
authService,
|
||||
useDebounce,
|
||||
useHaptics,
|
||||
} from '@/src';
|
||||
```
|
||||
|
||||
## 🔥 热更新使用指南
|
||||
|
||||
> **重要提示**：热更新功能需要在真实构建（Development Build 或 Production Build）中测试，Expo Go 不支持自定义热更新配置。
|
||||
|
||||
### 步骤 1：登录 EAS
|
||||
|
||||
```bash
|
||||
eas login
|
||||
```
|
||||
|
||||
如果没有账号，访问 [expo.dev](https://expo.dev) 注册一个免费账号。
|
||||
|
||||
### 步骤 2：初始化 EAS 项目
|
||||
|
||||
```bash
|
||||
eas init
|
||||
```
|
||||
|
||||
这会：
|
||||
- 创建一个唯一的项目 ID
|
||||
- 自动更新 `app.json` 中的 `extra.eas.projectId`
|
||||
|
||||
### 步骤 3：构建开发版本
|
||||
|
||||
**Android 开发构建：**
|
||||
```bash
|
||||
eas build --profile development --platform android
|
||||
```
|
||||
|
||||
**iOS 开发构建（需要 macOS 和 Apple 开发者账号）：**
|
||||
```bash
|
||||
eas build --profile development --platform ios
|
||||
```
|
||||
|
||||
构建过程需要 **10-20 分钟**。完成后：
|
||||
1. 在 [expo.dev](https://expo.dev) 控制台下载构建的 APK/IPA 文件
|
||||
2. 安装到你的设备上
|
||||
|
||||
### 步骤 4：发布热更新
|
||||
|
||||
1. **修改代码**（例如修改 `app/(tabs)/index.tsx` 中的文本）
|
||||
|
||||
2. **发布更新到指定通道：**
|
||||
|
||||
```bash
|
||||
# 发布到开发通道
|
||||
eas update --channel development --message "测试热更新功能"
|
||||
|
||||
# 发布到预览通道
|
||||
eas update --channel preview --message "修复了某个 bug"
|
||||
|
||||
# 发布到生产通道
|
||||
eas update --channel production --message "v1.0.1: 添加了新功能"
|
||||
```
|
||||
|
||||
### 步骤 5：测试更新
|
||||
|
||||
1. 打开已安装的应用
|
||||
2. 点击首页的 **"检查更新"** 按钮
|
||||
3. 应用会自动下载更新
|
||||
4. 点击 **"立即重启"** 应用更新
|
||||
5. 重启后即可看到更新内容 🎉
|
||||
|
||||
### 更新通道说明
|
||||
|
||||
项目配置了三个更新通道（在 `eas.json` 中定义）：
|
||||
|
||||
| 通道 | 用途 | 适用场景 |
|
||||
|------|------|----------|
|
||||
| **development** | 开发环境 | 日常开发和测试 |
|
||||
| **preview** | 预览环境 | 内部测试和 QA |
|
||||
| **production** | 生产环境 | 正式发布给用户 |
|
||||
|
||||
不同的构建配置会订阅不同的更新通道：
|
||||
|
||||
```bash
|
||||
# 构建订阅 development 通道的版本
|
||||
eas build --profile development --platform android
|
||||
|
||||
# 构建订阅 preview 通道的版本
|
||||
eas build --profile preview --platform android
|
||||
|
||||
# 构建订阅 production 通道的版本
|
||||
eas build --profile production --platform android
|
||||
```
|
||||
|
||||
### 推荐的发布流程
|
||||
|
||||
```bash
|
||||
# 1. 开发和本地测试
|
||||
pnpm start
|
||||
|
||||
# 2. 发布到 preview 通道进行内部测试
|
||||
eas update --channel preview --message "测试新功能"
|
||||
|
||||
# 3. 测试通过后，发布到 production 通道
|
||||
eas update --channel production --message "v1.0.1: 修复了登录问题"
|
||||
|
||||
# 4. 如果需要回滚
|
||||
eas update --channel production --branch main --message "回滚到稳定版本"
|
||||
```
|
||||
|
||||
### 监控和管理更新
|
||||
|
||||
```bash
|
||||
# 查看所有更新历史
|
||||
eas update:list
|
||||
|
||||
# 查看特定通道的更新
|
||||
eas update:list --channel production
|
||||
|
||||
# 查看更新详情
|
||||
eas update:view [update-id]
|
||||
```
|
||||
|
||||
## 💻 开发指南
|
||||
|
||||
### 常用命令
|
||||
|
||||
```bash
|
||||
# 开发相关
|
||||
pnpm start # 启动开发服务器
|
||||
pnpm android # 在 Android 上运行
|
||||
pnpm ios # 在 iOS 上运行（仅 macOS）
|
||||
pnpm web # 在浏览器中运行
|
||||
|
||||
# 热更新相关
|
||||
eas login # 登录 EAS
|
||||
eas init # 初始化 EAS 项目
|
||||
eas build --profile development --platform android # 构建开发版本
|
||||
eas update --channel development --message "更新说明" # 发布热更新
|
||||
eas update:list # 查看更新历史
|
||||
|
||||
# 构建相关
|
||||
eas build --profile preview --platform android # 构建预览版本
|
||||
eas build --profile production --platform android # 构建生产版本
|
||||
```
|
||||
|
||||
### 修改代码示例
|
||||
|
||||
尝试修改以下内容来测试热更新：
|
||||
|
||||
#### 示例 1：修改首页标题
|
||||
|
||||
打开 `app/(tabs)/index.tsx`，找到：
|
||||
|
||||
```tsx
|
||||
<Text style={styles.title}>🚀 热更新演示</Text>
|
||||
```
|
||||
|
||||
改为：
|
||||
|
||||
```tsx
|
||||
<Text style={styles.title}>🎉 热更新测试成功！</Text>
|
||||
```
|
||||
|
||||
#### 示例 2：修改按钮样式
|
||||
|
||||
在 `app/(tabs)/index.tsx` 的 `styles` 中修改：
|
||||
|
||||
```tsx
|
||||
button: {
|
||||
backgroundColor: '#FF6B6B', // 改为红色
|
||||
paddingHorizontal: 30,
|
||||
paddingVertical: 15,
|
||||
borderRadius: 10,
|
||||
marginBottom: 20,
|
||||
minWidth: 200,
|
||||
alignItems: 'center',
|
||||
},
|
||||
```
|
||||
|
||||
#### 示例 3：添加新功能
|
||||
|
||||
在首页添加一个计数器：
|
||||
|
||||
```tsx
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
// 在 JSX 中添加
|
||||
<TouchableOpacity
|
||||
style={styles.button}
|
||||
onPress={() => setCount(count + 1)}
|
||||
>
|
||||
<Text style={styles.buttonText}>点击次数: {count}</Text>
|
||||
</TouchableOpacity>
|
||||
```
|
||||
|
||||
修改后，运行 `eas update` 发布更新，然后在应用中检查更新即可看到变化。
|
||||
|
||||
### 自定义更新行为
|
||||
|
||||
#### 自动静默更新
|
||||
|
||||
修改 `app/_layout.tsx` 中的更新逻辑，移除 Alert 提示：
|
||||
|
||||
```tsx
|
||||
if (update.isAvailable) {
|
||||
await Updates.fetchUpdateAsync();
|
||||
await Updates.reloadAsync(); // 直接重启，不提示
|
||||
}
|
||||
```
|
||||
|
||||
#### 强制更新
|
||||
|
||||
不提供"稍后"选项：
|
||||
|
||||
```tsx
|
||||
Alert.alert(
|
||||
'发现新版本',
|
||||
'请更新到最新版本',
|
||||
[
|
||||
{
|
||||
text: '立即更新',
|
||||
onPress: async () => {
|
||||
await Updates.reloadAsync();
|
||||
},
|
||||
},
|
||||
],
|
||||
{ cancelable: false } // 不可取消
|
||||
);
|
||||
```
|
||||
|
||||
## ⚙️ 配置说明
|
||||
|
||||
### app.json 配置
|
||||
|
||||
关键配置项：
|
||||
|
||||
```json
|
||||
{
|
||||
"expo": {
|
||||
"name": "rn-demo",
|
||||
"slug": "rn-demo",
|
||||
"version": "1.0.0",
|
||||
"newArchEnabled": true, // 启用 React Native 新架构
|
||||
"updates": {
|
||||
"url": "https://u.expo.dev/your-project-id" // EAS Update 服务器
|
||||
},
|
||||
"runtimeVersion": {
|
||||
"policy": "appVersion" // 运行时版本策略
|
||||
},
|
||||
"plugins": [
|
||||
"expo-router", // Expo Router 插件
|
||||
"expo-updates" // 热更新插件
|
||||
],
|
||||
"ios": {
|
||||
"bundleIdentifier": "com.rndemo.app"
|
||||
},
|
||||
"android": {
|
||||
"package": "com.rndemo.app"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**配置说明：**
|
||||
- `updates.url` - EAS Update 服务器地址（运行 `eas init` 后自动生成）
|
||||
- `runtimeVersion.policy` - 运行时版本策略，确保更新兼容性
|
||||
- `appVersion` - 基于 `version` 字段（当前使用）
|
||||
- `nativeVersion` - 基于原生构建号
|
||||
- `plugins` - 启用的 Expo 插件
|
||||
- `newArchEnabled` - 启用 React Native 新架构（Fabric + TurboModules）
|
||||
|
||||
### eas.json 配置
|
||||
|
||||
构建和更新配置：
|
||||
|
||||
```json
|
||||
{
|
||||
"build": {
|
||||
"development": {
|
||||
"developmentClient": true, // 开发客户端
|
||||
"distribution": "internal", // 内部分发
|
||||
"channel": "development" // 订阅 development 更新通道
|
||||
},
|
||||
"preview": {
|
||||
"distribution": "internal",
|
||||
"channel": "preview" // 订阅 preview 更新通道
|
||||
},
|
||||
"production": {
|
||||
"channel": "production" // 订阅 production 更新通道
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**配置说明：**
|
||||
- `developmentClient` - 是否为开发客户端（包含开发工具）
|
||||
- `distribution` - 分发方式（`internal` 或 `store`）
|
||||
- `channel` - 更新通道，决定应用接收哪个通道的更新
|
||||
|
||||
## 📋 热更新最佳实践
|
||||
|
||||
### 何时使用热更新
|
||||
|
||||
✅ **适合热更新的场景：**
|
||||
- ✅ 修复 JavaScript/TypeScript 代码 bug
|
||||
- ✅ 更新 UI 样式和布局
|
||||
- ✅ 修改业务逻辑
|
||||
- ✅ 更新文本内容和翻译
|
||||
- ✅ 调整配置参数
|
||||
- ✅ 添加新的 JS 功能
|
||||
|
||||
❌ **不适合热更新的场景（需要重新构建）：**
|
||||
- ❌ 添加/删除原生依赖（如 `react-native-camera`）
|
||||
- ❌ 修改原生代码（iOS/Android）
|
||||
- ❌ 更改应用权限（如相机、位置权限）
|
||||
- ❌ 修改 `app.json` 中的原生配置
|
||||
- ❌ 升级 React Native 或 Expo SDK 版本
|
||||
- ❌ 修改应用图标或启动屏幕
|
||||
|
||||
### 版本管理策略
|
||||
|
||||
**appVersion 策略**（当前使用）：
|
||||
- 基于 `app.json` 中的 `version` 字段
|
||||
- ✅ 优点：简单直观，易于理解
|
||||
- ⚠️ 注意：每次原生构建需要手动更新版本号
|
||||
|
||||
**nativeVersion 策略**：
|
||||
- 基于原生构建号（iOS 的 `buildNumber`，Android 的 `versionCode`）
|
||||
- ✅ 优点：自动管理，无需手动更新
|
||||
- ⚠️ 注意：需要配置原生构建号
|
||||
|
||||
### 更新策略建议
|
||||
|
||||
1. **开发阶段**：频繁发布到 `development` 通道
|
||||
2. **测试阶段**：发布到 `preview` 通道，进行 QA 测试
|
||||
3. **生产发布**：测试通过后发布到 `production` 通道
|
||||
4. **紧急修复**：直接发布到 `production` 通道，快速修复线上问题
|
||||
|
||||
## ❓ 常见问题
|
||||
|
||||
### Q: 为什么在 Expo Go 中看不到热更新功能？
|
||||
|
||||
**A:** Expo Go 是开发工具，不支持自定义热更新。需要使用 `eas build` 构建真实应用。
|
||||
|
||||
### Q: 更新后没有生效？
|
||||
|
||||
**A:** 检查以下几点：
|
||||
1. 确保应用完全关闭后重新打开（不是后台切换）
|
||||
2. 检查更新通道是否匹配（development/preview/production）
|
||||
3. 确保 `runtimeVersion` 匹配
|
||||
4. 查看控制台是否有错误信息
|
||||
5. 检查网络连接
|
||||
|
||||
### Q: 如何回滚到之前的版本？
|
||||
|
||||
**A:**
|
||||
```bash
|
||||
# 查看更新历史
|
||||
eas update:list --channel production
|
||||
|
||||
# 重新发布之前的更新
|
||||
eas update --channel production --branch main --message "回滚到稳定版本"
|
||||
```
|
||||
|
||||
### Q: 热更新的大小限制是多少？
|
||||
|
||||
**A:** EAS Update 没有严格的大小限制，但建议：
|
||||
- 保持更新包 < 10MB 以确保良好的用户体验
|
||||
- 避免在更新中包含大量图片或资源文件
|
||||
- 使用 CDN 托管大型资源
|
||||
|
||||
### Q: 如何强制用户更新？
|
||||
|
||||
**A:** 修改 `app/_layout.tsx` 中的更新逻辑：
|
||||
|
||||
```tsx
|
||||
if (update.isAvailable) {
|
||||
await Updates.fetchUpdateAsync();
|
||||
Alert.alert(
|
||||
'发现新版本',
|
||||
'请更新到最新版本',
|
||||
[{ text: '立即更新', onPress: async () => await Updates.reloadAsync() }],
|
||||
{ cancelable: false } // 不可取消
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Q: 更新检查的频率是多少？
|
||||
|
||||
**A:**
|
||||
- **应用启动时**：自动检查（在 `app/_layout.tsx` 中配置）
|
||||
- **手动检查**：用户点击"检查更新"按钮
|
||||
- **后台检查**：可以配置定时检查（需要自己实现）
|
||||
|
||||
### Q: 如何在开发时测试热更新？
|
||||
|
||||
**A:**
|
||||
1. 构建 Development Build：`eas build --profile development --platform android`
|
||||
2. 安装到设备
|
||||
3. 修改代码
|
||||
4. 发布更新：`eas update --channel development --message "测试"`
|
||||
5. 在应用中点击"检查更新"
|
||||
|
||||
### Q: Web 平台的警告信息怎么处理？
|
||||
|
||||
**A:** 运行 `pnpm web` 时可能会看到 `pointerEvents` 的弃用警告，这是 `react-native-web` 库的内部问题，不影响功能，可以安全忽略。详见 [docs/KNOWN_ISSUES.md](./docs/KNOWN_ISSUES.md)。
|
||||
|
||||
## 💡 开发提示
|
||||
|
||||
- 开发时使用 `pnpm start` 即可，支持快速刷新（Fast Refresh）
|
||||
- 只有在测试热更新功能时才需要构建真实应用
|
||||
- 热更新只能更新 JavaScript/TypeScript 代码，不能更新原生代码
|
||||
- 建议使用 Git 管理代码版本，方便回滚
|
||||
- 每次发布更新时添加清晰的 `--message` 说明，便于追踪
|
||||
|
||||
## 📚 相关资源
|
||||
|
||||
### 官方文档
|
||||
- [Expo 官方文档](https://docs.expo.dev/)
|
||||
- [Expo Router 文档](https://docs.expo.dev/router/introduction/)
|
||||
- [EAS Update 文档](https://docs.expo.dev/eas-update/introduction/)
|
||||
- [EAS Build 文档](https://docs.expo.dev/build/introduction/)
|
||||
- [React Native 文档](https://reactnative.dev/)
|
||||
|
||||
### 学习资源
|
||||
- [Expo Router 最佳实践](https://docs.expo.dev/router/best-practices/)
|
||||
- [EAS Update 最佳实践](https://docs.expo.dev/eas-update/best-practices/)
|
||||
- [React Native 新架构](https://reactnative.dev/docs/the-new-architecture/landing-page)
|
||||
|
||||
### 社区
|
||||
- [Expo Discord](https://chat.expo.dev/)
|
||||
- [Expo Forums](https://forums.expo.dev/)
|
||||
- [React Native Community](https://reactnative.dev/community/overview)
|
||||
|
||||
## 📚 项目文档
|
||||
|
||||
更多详细文档请查看 [docs](./docs/) 目录：
|
||||
|
||||
- **[使用示例](./docs/USAGE_EXAMPLES.md)** - 实际代码示例
|
||||
- **[工具库使用指南](./docs/LIBRARIES.md)** - 详细的工具库使用方法和示例
|
||||
|
||||
|
||||
|
||||
---
|
||||
**祝你开发愉快！** 🎉
|
||||
|
||||
如有问题，请查看 [常见问题](#-常见问题) 或访问 [Expo 官方文档](https://docs.expo.dev/)。
|
||||
|
||||
53
app.json
Normal file
53
app.json
Normal file
@@ -0,0 +1,53 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "rn-demo",
|
||||
"slug": "rn-demo",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/images/icon.png",
|
||||
"scheme": "rndemo",
|
||||
"userInterfaceStyle": "automatic",
|
||||
"newArchEnabled": true,
|
||||
"splash": {
|
||||
"image": "./assets/images/splash-icon.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"ios": {
|
||||
"supportsTablet": true,
|
||||
"bundleIdentifier": "com.rndemo.app"
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/images/adaptive-icon.png",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"edgeToEdgeEnabled": true,
|
||||
"predictiveBackGestureEnabled": false,
|
||||
"package": "com.rndemo.app"
|
||||
},
|
||||
"web": {
|
||||
"bundler": "metro",
|
||||
"output": "static",
|
||||
"favicon": "./assets/images/favicon.png"
|
||||
},
|
||||
"plugins": [
|
||||
"expo-router",
|
||||
"expo-updates"
|
||||
],
|
||||
"experiments": {
|
||||
"typedRoutes": true
|
||||
},
|
||||
"updates": {
|
||||
"url": "https://u.expo.dev/your-project-id"
|
||||
},
|
||||
"runtimeVersion": {
|
||||
"policy": "appVersion"
|
||||
},
|
||||
"extra": {
|
||||
"eas": {
|
||||
"projectId": "your-project-id"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
66
app/(tabs)/_layout.tsx
Normal file
66
app/(tabs)/_layout.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import React from 'react';
|
||||
import FontAwesome from '@expo/vector-icons/FontAwesome';
|
||||
import { Link, Tabs } from 'expo-router';
|
||||
import { Pressable } from 'react-native';
|
||||
|
||||
import Colors from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/components/useColorScheme';
|
||||
import { useClientOnlyValue } from '@/components/useClientOnlyValue';
|
||||
|
||||
// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
|
||||
function TabBarIcon(props: {
|
||||
name: React.ComponentProps<typeof FontAwesome>['name'];
|
||||
color: string;
|
||||
}) {
|
||||
return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
|
||||
}
|
||||
|
||||
export default function TabLayout() {
|
||||
const colorScheme = useColorScheme();
|
||||
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
|
||||
// Disable the static render of the header on web
|
||||
// to prevent a hydration error in React Navigation v6.
|
||||
headerShown: useClientOnlyValue(false, true),
|
||||
}}>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: 'Tab One',
|
||||
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
|
||||
headerRight: () => (
|
||||
<Link href="/modal" asChild>
|
||||
<Pressable>
|
||||
{({ pressed }) => (
|
||||
<FontAwesome
|
||||
name="info-circle"
|
||||
size={25}
|
||||
color={Colors[colorScheme ?? 'light'].text}
|
||||
style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
|
||||
/>
|
||||
)}
|
||||
</Pressable>
|
||||
</Link>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="two"
|
||||
options={{
|
||||
title: 'Tab Two',
|
||||
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="demo"
|
||||
options={{
|
||||
title: '完整示例',
|
||||
tabBarIcon: ({ color }) => <TabBarIcon name="rocket" color={color} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
686
app/(tabs)/demo.tsx
Normal file
686
app/(tabs)/demo.tsx
Normal file
@@ -0,0 +1,686 @@
|
||||
/**
|
||||
* 完整示例页面
|
||||
* 展示所有工具的使用方法
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
StyleSheet,
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
ScrollView,
|
||||
Switch,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { Image } from 'expo-image';
|
||||
|
||||
// 导入所有工具
|
||||
import {
|
||||
// 工具函数
|
||||
Storage,
|
||||
STORAGE_KEYS,
|
||||
formatDate,
|
||||
formatRelativeTime,
|
||||
formatChatTime,
|
||||
|
||||
// 状态管理
|
||||
useUserStore,
|
||||
useUser,
|
||||
useIsLoggedIn,
|
||||
useSettingsStore,
|
||||
useTheme,
|
||||
useLanguage,
|
||||
useHapticsEnabled,
|
||||
|
||||
// 验证规则
|
||||
loginSchema,
|
||||
type LoginFormData,
|
||||
|
||||
// API 服务
|
||||
authService,
|
||||
|
||||
// 自定义 Hooks
|
||||
useDebounce,
|
||||
useThrottle,
|
||||
useHaptics,
|
||||
} from '@/src';
|
||||
|
||||
export default function DemoScreen() {
|
||||
const haptics = useHaptics();
|
||||
|
||||
// 状态管理示例
|
||||
const user = useUser();
|
||||
const isLoggedIn = useIsLoggedIn();
|
||||
const login = useUserStore((state) => state.login);
|
||||
const logout = useUserStore((state) => state.logout);
|
||||
|
||||
// 设置状态
|
||||
const theme = useTheme();
|
||||
const language = useLanguage();
|
||||
const hapticsEnabled = useHapticsEnabled();
|
||||
const setTheme = useSettingsStore((state) => state.setTheme);
|
||||
const setLanguage = useSettingsStore((state) => state.setLanguage);
|
||||
const setHapticsEnabled = useSettingsStore((state) => state.setHapticsEnabled);
|
||||
|
||||
// 本地状态
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [searchResults, setSearchResults] = useState<string[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [counter, setCounter] = useState(0);
|
||||
const [storageValue, setStorageValue] = useState('');
|
||||
|
||||
// 表单配置
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<LoginFormData>({
|
||||
resolver: zodResolver(loginSchema),
|
||||
defaultValues: {
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
});
|
||||
|
||||
// 防抖搜索示例
|
||||
const debouncedSearch = useDebounce(async (text: string) => {
|
||||
if (!text.trim()) {
|
||||
setSearchResults([]);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('执行搜索:', text);
|
||||
// 模拟 API 调用
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
setSearchResults([
|
||||
`结果 1: ${text}`,
|
||||
`结果 2: ${text}`,
|
||||
`结果 3: ${text}`,
|
||||
]);
|
||||
}, 500);
|
||||
|
||||
// 监听搜索文本变化
|
||||
useEffect(() => {
|
||||
debouncedSearch(searchText);
|
||||
}, [searchText]);
|
||||
|
||||
// 节流点击示例
|
||||
const throttledClick = useThrottle(() => {
|
||||
haptics.light();
|
||||
setCounter((prev) => prev + 1);
|
||||
console.log('节流点击:', counter + 1);
|
||||
}, 1000);
|
||||
|
||||
// 登录处理
|
||||
const onLogin = async (data: LoginFormData) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
haptics.light();
|
||||
|
||||
// 模拟登录 API 调用
|
||||
console.log('登录数据:', data);
|
||||
|
||||
// 实际项目中使用：
|
||||
// const { user, token } = await authService.login(data);
|
||||
// login(user, token);
|
||||
|
||||
// 模拟登录成功
|
||||
const mockUser = {
|
||||
id: '1',
|
||||
username: data.email.split('@')[0],
|
||||
email: data.email,
|
||||
avatar: 'https://i.pravatar.cc/150?img=1',
|
||||
nickname: '演示用户',
|
||||
createdAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
login(mockUser, 'mock-token-123456');
|
||||
haptics.success();
|
||||
Alert.alert('成功', '登录成功！');
|
||||
} catch (error: any) {
|
||||
haptics.error();
|
||||
Alert.alert('失败', error.message || '登录失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 登出处理
|
||||
const handleLogout = () => {
|
||||
haptics.warning();
|
||||
Alert.alert(
|
||||
'确认',
|
||||
'确定要退出登录吗？',
|
||||
[
|
||||
{ text: '取消', style: 'cancel' },
|
||||
{
|
||||
text: '确定',
|
||||
onPress: () => {
|
||||
logout();
|
||||
haptics.success();
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
// 存储示例
|
||||
const handleSaveToStorage = async () => {
|
||||
try {
|
||||
haptics.light();
|
||||
const testData = {
|
||||
message: 'Hello from AsyncStorage!',
|
||||
timestamp: new Date().toISOString(),
|
||||
counter,
|
||||
};
|
||||
|
||||
await Storage.setObject(STORAGE_KEYS.USER_PREFERENCES, testData);
|
||||
haptics.success();
|
||||
Alert.alert('成功', '数据已保存到本地存储');
|
||||
} catch (error) {
|
||||
haptics.error();
|
||||
Alert.alert('失败', '保存失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleLoadFromStorage = async () => {
|
||||
try {
|
||||
haptics.light();
|
||||
const data = await Storage.getObject<any>(STORAGE_KEYS.USER_PREFERENCES);
|
||||
|
||||
if (data) {
|
||||
setStorageValue(JSON.stringify(data, null, 2));
|
||||
haptics.success();
|
||||
} else {
|
||||
setStorageValue('暂无数据');
|
||||
haptics.warning();
|
||||
}
|
||||
} catch (error) {
|
||||
haptics.error();
|
||||
Alert.alert('失败', '读取失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 主题切换
|
||||
const handleThemeChange = () => {
|
||||
haptics.selection();
|
||||
const themes: Array<'light' | 'dark' | 'auto'> = ['light', 'dark', 'auto'];
|
||||
const currentIndex = themes.indexOf(theme);
|
||||
const nextTheme = themes[(currentIndex + 1) % themes.length];
|
||||
setTheme(nextTheme);
|
||||
};
|
||||
|
||||
// 语言切换
|
||||
const handleLanguageChange = () => {
|
||||
haptics.selection();
|
||||
setLanguage(language === 'zh-CN' ? 'en-US' : 'zh-CN');
|
||||
};
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.container}>
|
||||
<View style={styles.content}>
|
||||
{/* 标题 */}
|
||||
<Text style={styles.title}>🎯 完整功能演示</Text>
|
||||
<Text style={styles.subtitle}>展示所有工具的使用方法</Text>
|
||||
|
||||
{/* 用户状态显示 */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>👤 用户状态 (Zustand)</Text>
|
||||
{isLoggedIn ? (
|
||||
<View style={styles.userInfo}>
|
||||
{user?.avatar && (
|
||||
<Image
|
||||
source={{ uri: user.avatar }}
|
||||
style={styles.avatar}
|
||||
contentFit="cover"
|
||||
/>
|
||||
)}
|
||||
<View style={styles.userDetails}>
|
||||
<Text style={styles.userName}>{user?.nickname}</Text>
|
||||
<Text style={styles.userEmail}>{user?.email}</Text>
|
||||
<Text style={styles.userDate}>
|
||||
注册时间: {formatRelativeTime(user?.createdAt || '')}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.logoutButton]}
|
||||
onPress={handleLogout}
|
||||
>
|
||||
<Text style={styles.buttonText}>退出</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : (
|
||||
<Text style={styles.infoText}>未登录</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 登录表单 */}
|
||||
{!isLoggedIn && (
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>🔐 登录表单 (React Hook Form + Zod)</Text>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>邮箱</Text>
|
||||
<TextInput
|
||||
value={value}
|
||||
onChangeText={onChange}
|
||||
placeholder="请输入邮箱"
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
style={[
|
||||
styles.input,
|
||||
errors.email && styles.inputError,
|
||||
]}
|
||||
/>
|
||||
{errors.email && (
|
||||
<Text style={styles.errorText}>{errors.email.message}</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="password"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>密码</Text>
|
||||
<TextInput
|
||||
value={value}
|
||||
onChangeText={onChange}
|
||||
placeholder="请输入密码"
|
||||
secureTextEntry
|
||||
style={[
|
||||
styles.input,
|
||||
errors.password && styles.inputError,
|
||||
]}
|
||||
/>
|
||||
{errors.password && (
|
||||
<Text style={styles.errorText}>{errors.password.message}</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.loginButton]}
|
||||
onPress={handleSubmit(onLogin)}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text style={styles.buttonText}>登录</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 搜索示例 */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>🔍 防抖搜索 (useDebounce)</Text>
|
||||
<TextInput
|
||||
value={searchText}
|
||||
onChangeText={setSearchText}
|
||||
placeholder="输入搜索内容..."
|
||||
style={styles.input}
|
||||
/>
|
||||
{searchResults.length > 0 && (
|
||||
<View style={styles.searchResults}>
|
||||
{searchResults.map((result, index) => (
|
||||
<Text key={index} style={styles.searchResult}>
|
||||
{result}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 节流点击示例 */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>⏱️ 节流点击 (useThrottle)</Text>
|
||||
<Text style={styles.infoText}>点击次数: {counter}</Text>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.primaryButton]}
|
||||
onPress={throttledClick}
|
||||
>
|
||||
<Text style={styles.buttonText}>快速点击测试（1秒节流）</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* 本地存储示例 */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>💾 本地存储 (AsyncStorage)</Text>
|
||||
<View style={styles.buttonRow}>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.primaryButton, styles.halfButton]}
|
||||
onPress={handleSaveToStorage}
|
||||
>
|
||||
<Text style={styles.buttonText}>保存数据</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.secondaryButton, styles.halfButton]}
|
||||
onPress={handleLoadFromStorage}
|
||||
>
|
||||
<Text style={styles.buttonText}>读取数据</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{storageValue && (
|
||||
<View style={styles.codeBlock}>
|
||||
<Text style={styles.codeText}>{storageValue}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 日期格式化示例 */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>📅 日期格式化 (Day.js)</Text>
|
||||
<Text style={styles.infoText}>
|
||||
当前时间: {formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')}
|
||||
</Text>
|
||||
<Text style={styles.infoText}>
|
||||
相对时间: {formatRelativeTime(new Date())}
|
||||
</Text>
|
||||
<Text style={styles.infoText}>
|
||||
聊天时间: {formatChatTime(Date.now())}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 设置示例 */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>⚙️ 应用设置</Text>
|
||||
|
||||
<View style={styles.settingRow}>
|
||||
<Text style={styles.settingLabel}>主题: {theme}</Text>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.smallButton]}
|
||||
onPress={handleThemeChange}
|
||||
>
|
||||
<Text style={styles.buttonText}>切换</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.settingRow}>
|
||||
<Text style={styles.settingLabel}>语言: {language}</Text>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.smallButton]}
|
||||
onPress={handleLanguageChange}
|
||||
>
|
||||
<Text style={styles.buttonText}>切换</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.settingRow}>
|
||||
<Text style={styles.settingLabel}>触觉反馈</Text>
|
||||
<Switch
|
||||
value={hapticsEnabled}
|
||||
onValueChange={(value) => {
|
||||
haptics.selection();
|
||||
setHapticsEnabled(value);
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 触觉反馈示例 */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>📳 触觉反馈 (Expo Haptics)</Text>
|
||||
<View style={styles.buttonGrid}>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.hapticsButton]}
|
||||
onPress={() => haptics.light()}
|
||||
>
|
||||
<Text style={styles.buttonText}>Light</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.hapticsButton]}
|
||||
onPress={() => haptics.medium()}
|
||||
>
|
||||
<Text style={styles.buttonText}>Medium</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.hapticsButton]}
|
||||
onPress={() => haptics.heavy()}
|
||||
>
|
||||
<Text style={styles.buttonText}>Heavy</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.successButton]}
|
||||
onPress={() => haptics.success()}
|
||||
>
|
||||
<Text style={styles.buttonText}>Success</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.warningButton]}
|
||||
onPress={() => haptics.warning()}
|
||||
>
|
||||
<Text style={styles.buttonText}>Warning</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.errorButton]}
|
||||
onPress={() => haptics.error()}
|
||||
>
|
||||
<Text style={styles.buttonText}>Error</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<Text style={styles.footerText}>
|
||||
查看代码了解更多使用方法 📖
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
content: {
|
||||
padding: 16,
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 8,
|
||||
color: '#333',
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
color: '#666',
|
||||
marginBottom: 24,
|
||||
},
|
||||
section: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
marginBottom: 12,
|
||||
color: '#333',
|
||||
},
|
||||
userInfo: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
avatar: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
marginRight: 12,
|
||||
},
|
||||
userDetails: {
|
||||
flex: 1,
|
||||
},
|
||||
userName: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#333',
|
||||
},
|
||||
userEmail: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
marginTop: 2,
|
||||
},
|
||||
userDate: {
|
||||
fontSize: 12,
|
||||
color: '#999',
|
||||
marginTop: 4,
|
||||
},
|
||||
inputGroup: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
marginBottom: 6,
|
||||
color: '#333',
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#ddd',
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
fontSize: 16,
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
inputError: {
|
||||
borderColor: '#ff3b30',
|
||||
},
|
||||
errorText: {
|
||||
color: '#ff3b30',
|
||||
fontSize: 12,
|
||||
marginTop: 4,
|
||||
},
|
||||
button: {
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
buttonText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
loginButton: {
|
||||
backgroundColor: '#007AFF',
|
||||
marginTop: 8,
|
||||
},
|
||||
logoutButton: {
|
||||
backgroundColor: '#ff3b30',
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
primaryButton: {
|
||||
backgroundColor: '#007AFF',
|
||||
},
|
||||
secondaryButton: {
|
||||
backgroundColor: '#5856D6',
|
||||
},
|
||||
smallButton: {
|
||||
backgroundColor: '#007AFF',
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
buttonRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
halfButton: {
|
||||
flex: 1,
|
||||
},
|
||||
searchResults: {
|
||||
marginTop: 12,
|
||||
},
|
||||
searchResult: {
|
||||
padding: 12,
|
||||
backgroundColor: '#f9f9f9',
|
||||
borderRadius: 8,
|
||||
marginBottom: 8,
|
||||
color: '#333',
|
||||
},
|
||||
infoText: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
marginBottom: 8,
|
||||
},
|
||||
codeBlock: {
|
||||
backgroundColor: '#f9f9f9',
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
marginTop: 12,
|
||||
},
|
||||
codeText: {
|
||||
fontFamily: 'monospace',
|
||||
fontSize: 12,
|
||||
color: '#333',
|
||||
},
|
||||
settingRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
settingLabel: {
|
||||
fontSize: 16,
|
||||
color: '#333',
|
||||
},
|
||||
buttonGrid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 8,
|
||||
},
|
||||
hapticsButton: {
|
||||
backgroundColor: '#5856D6',
|
||||
flex: 1,
|
||||
minWidth: '30%',
|
||||
},
|
||||
successButton: {
|
||||
backgroundColor: '#34C759',
|
||||
flex: 1,
|
||||
minWidth: '30%',
|
||||
},
|
||||
warningButton: {
|
||||
backgroundColor: '#FF9500',
|
||||
flex: 1,
|
||||
minWidth: '30%',
|
||||
},
|
||||
errorButton: {
|
||||
backgroundColor: '#FF3B30',
|
||||
flex: 1,
|
||||
minWidth: '30%',
|
||||
},
|
||||
footer: {
|
||||
marginTop: 24,
|
||||
marginBottom: 40,
|
||||
alignItems: 'center',
|
||||
},
|
||||
footerText: {
|
||||
fontSize: 14,
|
||||
color: '#999',
|
||||
},
|
||||
});
|
||||
|
||||
192
app/(tabs)/index.tsx
Normal file
192
app/(tabs)/index.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import { useState } from 'react';
|
||||
import { StyleSheet, TouchableOpacity, Alert, ActivityIndicator } from 'react-native';
|
||||
import * as Updates from 'expo-updates';
|
||||
|
||||
import { Text, View } from '@/components/Themed';
|
||||
|
||||
export default function TabOneScreen() {
|
||||
const [isChecking, setIsChecking] = useState(false);
|
||||
const [updateInfo, setUpdateInfo] = useState<string>('');
|
||||
|
||||
const checkForUpdates = async () => {
|
||||
if (__DEV__) {
|
||||
Alert.alert('提示', '开发模式下无法检查更新，请使用生产构建测试热更新功能');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsChecking(true);
|
||||
setUpdateInfo('正在检查更新...');
|
||||
|
||||
try {
|
||||
const update = await Updates.checkForUpdateAsync();
|
||||
|
||||
if (update.isAvailable) {
|
||||
setUpdateInfo('发现新版本，正在下载...');
|
||||
await Updates.fetchUpdateAsync();
|
||||
|
||||
Alert.alert(
|
||||
'更新完成',
|
||||
'新版本已下载完成，是否立即重启应用？',
|
||||
[
|
||||
{
|
||||
text: '稍后',
|
||||
style: 'cancel',
|
||||
onPress: () => setUpdateInfo('更新已下载，稍后重启应用即可应用'),
|
||||
},
|
||||
{
|
||||
text: '立即重启',
|
||||
onPress: async () => {
|
||||
await Updates.reloadAsync();
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
} else {
|
||||
setUpdateInfo('当前已是最新版本');
|
||||
}
|
||||
} catch (error) {
|
||||
setUpdateInfo('检查更新失败: ' + (error as Error).message);
|
||||
Alert.alert('错误', '检查更新失败，请稍后重试');
|
||||
} finally {
|
||||
setIsChecking(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getUpdateInfo = () => {
|
||||
const {
|
||||
isEmbeddedLaunch,
|
||||
isEmergencyLaunch,
|
||||
updateId,
|
||||
channel,
|
||||
runtimeVersion,
|
||||
} = Updates.useUpdates();
|
||||
|
||||
return `
|
||||
运行模式: ${__DEV__ ? '开发模式' : '生产模式'}
|
||||
是否为内嵌启动: ${isEmbeddedLaunch ? '是' : '否'}
|
||||
是否为紧急启动: ${isEmergencyLaunch ? '是' : '否'}
|
||||
更新 ID: ${updateId || '无'}
|
||||
更新通道: ${channel || '无'}
|
||||
运行时版本: ${runtimeVersion || '无'}
|
||||
`.trim();
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>🚀 热更新演示</Text>
|
||||
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
|
||||
|
||||
<View style={styles.infoContainer}>
|
||||
<Text style={styles.infoTitle}>当前版本信息：</Text>
|
||||
<Text style={styles.infoText}>{getUpdateInfo()}</Text>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.button, isChecking && styles.buttonDisabled]}
|
||||
onPress={checkForUpdates}
|
||||
disabled={isChecking}
|
||||
>
|
||||
{isChecking ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text style={styles.buttonText}>检查更新</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{updateInfo ? (
|
||||
<View style={styles.updateInfoContainer}>
|
||||
<Text style={styles.updateInfoText}>{updateInfo}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<View style={styles.instructionsContainer}>
|
||||
<Text style={styles.instructionsTitle}>📝 使用说明：</Text>
|
||||
<Text style={styles.instructionsText}>
|
||||
1. 使用 EAS Build 构建生产版本{'\n'}
|
||||
2. 修改代码后运行 eas update 发布更新{'\n'}
|
||||
3. 打开应用点击"检查更新"按钮{'\n'}
|
||||
4. 应用会自动下载并提示重启
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 10,
|
||||
},
|
||||
separator: {
|
||||
marginVertical: 20,
|
||||
height: 1,
|
||||
width: '80%',
|
||||
},
|
||||
infoContainer: {
|
||||
backgroundColor: 'rgba(0, 122, 255, 0.1)',
|
||||
padding: 15,
|
||||
borderRadius: 10,
|
||||
marginBottom: 20,
|
||||
width: '100%',
|
||||
},
|
||||
infoTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 10,
|
||||
},
|
||||
infoText: {
|
||||
fontSize: 12,
|
||||
fontFamily: 'monospace',
|
||||
lineHeight: 18,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: '#007AFF',
|
||||
paddingHorizontal: 30,
|
||||
paddingVertical: 15,
|
||||
borderRadius: 10,
|
||||
marginBottom: 20,
|
||||
minWidth: 200,
|
||||
alignItems: 'center',
|
||||
},
|
||||
buttonDisabled: {
|
||||
backgroundColor: '#999',
|
||||
},
|
||||
buttonText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
updateInfoContainer: {
|
||||
backgroundColor: 'rgba(52, 199, 89, 0.1)',
|
||||
padding: 15,
|
||||
borderRadius: 10,
|
||||
marginBottom: 20,
|
||||
width: '100%',
|
||||
},
|
||||
updateInfoText: {
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
},
|
||||
instructionsContainer: {
|
||||
backgroundColor: 'rgba(255, 149, 0, 0.1)',
|
||||
padding: 15,
|
||||
borderRadius: 10,
|
||||
width: '100%',
|
||||
},
|
||||
instructionsTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 10,
|
||||
},
|
||||
instructionsText: {
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
});
|
||||
31
app/(tabs)/two.tsx
Normal file
31
app/(tabs)/two.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import EditScreenInfo from '@/components/EditScreenInfo';
|
||||
import { Text, View } from '@/components/Themed';
|
||||
|
||||
export default function TabTwoScreen() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Tab Two</Text>
|
||||
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
|
||||
<EditScreenInfo path="app/(tabs)/two.tsx" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
separator: {
|
||||
marginVertical: 30,
|
||||
height: 1,
|
||||
width: '80%',
|
||||
},
|
||||
});
|
||||
38
app/+html.tsx
Normal file
38
app/+html.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { ScrollViewStyleReset } from 'expo-router/html';
|
||||
|
||||
// This file is web-only and used to configure the root HTML for every
|
||||
// web page during static rendering.
|
||||
// The contents of this function only run in Node.js environments and
|
||||
// do not have access to the DOM or browser APIs.
|
||||
export default function Root({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
|
||||
{/*
|
||||
Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
|
||||
However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
|
||||
*/}
|
||||
<ScrollViewStyleReset />
|
||||
|
||||
{/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
|
||||
<style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
|
||||
{/* Add any additional <head> elements that you want globally available on web... */}
|
||||
</head>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
const responsiveBackground = `
|
||||
body {
|
||||
background-color: #fff;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #000;
|
||||
}
|
||||
}`;
|
||||
40
app/+not-found.tsx
Normal file
40
app/+not-found.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import { Link, Stack } from 'expo-router';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { Text, View } from '@/components/Themed';
|
||||
|
||||
export default function NotFoundScreen() {
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen options={{ title: 'Oops!' }} />
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>This screen doesn't exist.</Text>
|
||||
|
||||
<Link href="/" style={styles.link}>
|
||||
<Text style={styles.linkText}>Go to home screen!</Text>
|
||||
</Link>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
link: {
|
||||
marginTop: 15,
|
||||
paddingVertical: 15,
|
||||
},
|
||||
linkText: {
|
||||
fontSize: 14,
|
||||
color: '#2e78b7',
|
||||
},
|
||||
});
|
||||
102
app/_layout.tsx
Normal file
102
app/_layout.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import FontAwesome from '@expo/vector-icons/FontAwesome';
|
||||
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
|
||||
import { useFonts } from 'expo-font';
|
||||
import { Stack } from 'expo-router';
|
||||
import * as SplashScreen from 'expo-splash-screen';
|
||||
import * as Updates from 'expo-updates';
|
||||
import { useEffect } from 'react';
|
||||
import { Alert, Platform } from 'react-native';
|
||||
import 'react-native-reanimated';
|
||||
|
||||
import { useColorScheme } from '@/components/useColorScheme';
|
||||
|
||||
export {
|
||||
// Catch any errors thrown by the Layout component.
|
||||
ErrorBoundary,
|
||||
} from 'expo-router';
|
||||
|
||||
export const unstable_settings = {
|
||||
// Ensure that reloading on `/modal` keeps a back button present.
|
||||
initialRouteName: '(tabs)',
|
||||
};
|
||||
|
||||
// Prevent the splash screen from auto-hiding before asset loading is complete.
|
||||
SplashScreen.preventAutoHideAsync();
|
||||
|
||||
export default function RootLayout() {
|
||||
const [loaded, error] = useFonts({
|
||||
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
|
||||
...FontAwesome.font,
|
||||
});
|
||||
|
||||
// Expo Router uses Error Boundaries to catch errors in the navigation tree.
|
||||
useEffect(() => {
|
||||
if (error) throw error;
|
||||
}, [error]);
|
||||
|
||||
useEffect(() => {
|
||||
if (loaded) {
|
||||
SplashScreen.hideAsync();
|
||||
}
|
||||
}, [loaded]);
|
||||
|
||||
// 检查热更新
|
||||
useEffect(() => {
|
||||
async function checkForUpdates() {
|
||||
if (__DEV__) {
|
||||
// 开发模式下不检查更新
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const update = await Updates.checkForUpdateAsync();
|
||||
|
||||
if (update.isAvailable) {
|
||||
await Updates.fetchUpdateAsync();
|
||||
|
||||
// 提示用户重启应用以应用更新
|
||||
Alert.alert(
|
||||
'更新可用',
|
||||
'发现新版本，是否立即重启应用？',
|
||||
[
|
||||
{
|
||||
text: '稍后',
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: '立即重启',
|
||||
onPress: async () => {
|
||||
await Updates.reloadAsync();
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
// 处理更新检查错误
|
||||
console.error('检查更新失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
checkForUpdates();
|
||||
}, []);
|
||||
|
||||
if (!loaded) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <RootLayoutNav />;
|
||||
}
|
||||
|
||||
function RootLayoutNav() {
|
||||
const colorScheme = useColorScheme();
|
||||
|
||||
return (
|
||||
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
|
||||
<Stack>
|
||||
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="modal" options={{ presentation: 'modal' }} />
|
||||
</Stack>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
35
app/modal.tsx
Normal file
35
app/modal.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { Platform, StyleSheet } from 'react-native';
|
||||
|
||||
import EditScreenInfo from '@/components/EditScreenInfo';
|
||||
import { Text, View } from '@/components/Themed';
|
||||
|
||||
export default function ModalScreen() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Modal</Text>
|
||||
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
|
||||
<EditScreenInfo path="app/modal.tsx" />
|
||||
|
||||
{/* Use a light status bar on iOS to account for the black space above the modal */}
|
||||
<StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
separator: {
|
||||
marginVertical: 30,
|
||||
height: 1,
|
||||
width: '80%',
|
||||
},
|
||||
});
|
||||
BIN
assets/fonts/SpaceMono-Regular.ttf
Normal file
BIN
assets/fonts/SpaceMono-Regular.ttf
Normal file
Binary file not shown.
BIN
assets/images/adaptive-icon.png
Normal file
BIN
assets/images/adaptive-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
assets/images/favicon.png
Normal file
BIN
assets/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
assets/images/icon.png
Normal file
BIN
assets/images/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
assets/images/splash-icon.png
Normal file
BIN
assets/images/splash-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
77
components/EditScreenInfo.tsx
Normal file
77
components/EditScreenInfo.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExternalLink } from './ExternalLink';
|
||||
import { MonoText } from './StyledText';
|
||||
import { Text, View } from './Themed';
|
||||
|
||||
import Colors from '@/constants/Colors';
|
||||
|
||||
export default function EditScreenInfo({ path }: { path: string }) {
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.getStartedContainer}>
|
||||
<Text
|
||||
style={styles.getStartedText}
|
||||
lightColor="rgba(0,0,0,0.8)"
|
||||
darkColor="rgba(255,255,255,0.8)">
|
||||
Open up the code for this screen:
|
||||
</Text>
|
||||
|
||||
<View
|
||||
style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
|
||||
darkColor="rgba(255,255,255,0.05)"
|
||||
lightColor="rgba(0,0,0,0.05)">
|
||||
<MonoText>{path}</MonoText>
|
||||
</View>
|
||||
|
||||
<Text
|
||||
style={styles.getStartedText}
|
||||
lightColor="rgba(0,0,0,0.8)"
|
||||
darkColor="rgba(255,255,255,0.8)">
|
||||
Change any of the text, save the file, and your app will automatically update.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.helpContainer}>
|
||||
<ExternalLink
|
||||
style={styles.helpLink}
|
||||
href="https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet">
|
||||
<Text style={styles.helpLinkText} lightColor={Colors.light.tint}>
|
||||
Tap here if your app doesn't automatically update after making changes
|
||||
</Text>
|
||||
</ExternalLink>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
getStartedContainer: {
|
||||
alignItems: 'center',
|
||||
marginHorizontal: 50,
|
||||
},
|
||||
homeScreenFilename: {
|
||||
marginVertical: 7,
|
||||
},
|
||||
codeHighlightContainer: {
|
||||
borderRadius: 3,
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
getStartedText: {
|
||||
fontSize: 17,
|
||||
lineHeight: 24,
|
||||
textAlign: 'center',
|
||||
},
|
||||
helpContainer: {
|
||||
marginTop: 15,
|
||||
marginHorizontal: 20,
|
||||
alignItems: 'center',
|
||||
},
|
||||
helpLink: {
|
||||
paddingVertical: 15,
|
||||
},
|
||||
helpLinkText: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
25
components/ExternalLink.tsx
Normal file
25
components/ExternalLink.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import { Link } from 'expo-router';
|
||||
import * as WebBrowser from 'expo-web-browser';
|
||||
import React from 'react';
|
||||
import { Platform } from 'react-native';
|
||||
|
||||
export function ExternalLink(
|
||||
props: Omit<React.ComponentProps<typeof Link>, 'href'> & { href: string }
|
||||
) {
|
||||
return (
|
||||
<Link
|
||||
target="_blank"
|
||||
{...props}
|
||||
// @ts-expect-error: External URLs are not typed.
|
||||
href={props.href}
|
||||
onPress={(e) => {
|
||||
if (Platform.OS !== 'web') {
|
||||
// Prevent the default behavior of linking to the default browser on native.
|
||||
e.preventDefault();
|
||||
// Open the link in an in-app browser.
|
||||
WebBrowser.openBrowserAsync(props.href as string);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
5
components/StyledText.tsx
Normal file
5
components/StyledText.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { Text, TextProps } from './Themed';
|
||||
|
||||
export function MonoText(props: TextProps) {
|
||||
return <Text {...props} style={[props.style, { fontFamily: 'SpaceMono' }]} />;
|
||||
}
|
||||
45
components/Themed.tsx
Normal file
45
components/Themed.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
/**
|
||||
* Learn more about Light and Dark modes:
|
||||
* https://docs.expo.io/guides/color-schemes/
|
||||
*/
|
||||
|
||||
import { Text as DefaultText, View as DefaultView } from 'react-native';
|
||||
|
||||
import Colors from '@/constants/Colors';
|
||||
import { useColorScheme } from './useColorScheme';
|
||||
|
||||
type ThemeProps = {
|
||||
lightColor?: string;
|
||||
darkColor?: string;
|
||||
};
|
||||
|
||||
export type TextProps = ThemeProps & DefaultText['props'];
|
||||
export type ViewProps = ThemeProps & DefaultView['props'];
|
||||
|
||||
export function useThemeColor(
|
||||
props: { light?: string; dark?: string },
|
||||
colorName: keyof typeof Colors.light & keyof typeof Colors.dark
|
||||
) {
|
||||
const theme = useColorScheme() ?? 'light';
|
||||
const colorFromProps = props[theme];
|
||||
|
||||
if (colorFromProps) {
|
||||
return colorFromProps;
|
||||
} else {
|
||||
return Colors[theme][colorName];
|
||||
}
|
||||
}
|
||||
|
||||
export function Text(props: TextProps) {
|
||||
const { style, lightColor, darkColor, ...otherProps } = props;
|
||||
const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
|
||||
|
||||
return <DefaultText style={[{ color }, style]} {...otherProps} />;
|
||||
}
|
||||
|
||||
export function View(props: ViewProps) {
|
||||
const { style, lightColor, darkColor, ...otherProps } = props;
|
||||
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
|
||||
|
||||
return <DefaultView style={[{ backgroundColor }, style]} {...otherProps} />;
|
||||
}
|
||||
10
components/__tests__/StyledText-test.js
Normal file
10
components/__tests__/StyledText-test.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import * as React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
import { MonoText } from '../StyledText';
|
||||
|
||||
it(`renders correctly`, () => {
|
||||
const tree = renderer.create(<MonoText>Snapshot test!</MonoText>).toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
4
components/useClientOnlyValue.ts
Normal file
4
components/useClientOnlyValue.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
// This function is web-only as native doesn't currently support server (or build-time) rendering.
|
||||
export function useClientOnlyValue<S, C>(server: S, client: C): S | C {
|
||||
return client;
|
||||
}
|
||||
12
components/useClientOnlyValue.web.ts
Normal file
12
components/useClientOnlyValue.web.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
// `useEffect` is not invoked during server rendering, meaning
|
||||
// we can use this to determine if we're on the server or not.
|
||||
export function useClientOnlyValue<S, C>(server: S, client: C): S | C {
|
||||
const [value, setValue] = React.useState<S | C>(server);
|
||||
React.useEffect(() => {
|
||||
setValue(client);
|
||||
}, [client]);
|
||||
|
||||
return value;
|
||||
}
|
||||
1
components/useColorScheme.ts
Normal file
1
components/useColorScheme.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { useColorScheme } from 'react-native';
|
||||
8
components/useColorScheme.web.ts
Normal file
8
components/useColorScheme.web.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
// NOTE: The default React Native styling doesn't support server rendering.
|
||||
// Server rendered styles should not change between the first render of the HTML
|
||||
// and the first render on the client. Typically, web developers will use CSS media queries
|
||||
// to render different styles on the client and server, these aren't directly supported in React Native
|
||||
// but can be achieved using a styling library like Nativewind.
|
||||
export function useColorScheme() {
|
||||
return 'light';
|
||||
}
|
||||
19
constants/Colors.ts
Normal file
19
constants/Colors.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
const tintColorLight = '#2f95dc';
|
||||
const tintColorDark = '#fff';
|
||||
|
||||
export default {
|
||||
light: {
|
||||
text: '#000',
|
||||
background: '#fff',
|
||||
tint: tintColorLight,
|
||||
tabIconDefault: '#ccc',
|
||||
tabIconSelected: tintColorLight,
|
||||
},
|
||||
dark: {
|
||||
text: '#fff',
|
||||
background: '#000',
|
||||
tint: tintColorDark,
|
||||
tabIconDefault: '#ccc',
|
||||
tabIconSelected: tintColorDark,
|
||||
},
|
||||
};
|
||||
283
docs/INSTALLED_PACKAGES.md
Normal file
283
docs/INSTALLED_PACKAGES.md
Normal file
@@ -0,0 +1,283 @@
|
||||
# 📦 已安装的工具库总结
|
||||
|
||||
本文档列出了项目中新安装的所有工具库及其用途。
|
||||
|
||||
## ✅ 安装完成的库
|
||||
|
||||
### 🛠️ 工具类库
|
||||
|
||||
#### 1. **Lodash-ES** `^4.17.21`
|
||||
- **用途**: 强大的 JavaScript 工具函数库（ES modules 版本）
|
||||
- **功能**: 数组、对象、字符串操作，防抖、节流等
|
||||
- **优势**: 支持 tree-shaking，按需导入，减小包体积
|
||||
- **文档**: https://lodash.com/docs/
|
||||
- **示例**:
|
||||
```typescript
|
||||
import { debounce, uniq } from 'lodash-es';
|
||||
debounce(fn, 300); // 防抖
|
||||
uniq([1, 2, 2, 3]); // 去重
|
||||
```
|
||||
|
||||
#### 2. **Day.js** `^1.11.19`
|
||||
- **用途**: 轻量级日期处理库（仅 2KB）
|
||||
- **功能**: 日期格式化、相对时间、日期计算
|
||||
- **文档**: https://day.js.org/
|
||||
- **示例**:
|
||||
```typescript
|
||||
import dayjs from 'dayjs';
|
||||
dayjs().format('YYYY-MM-DD');
|
||||
dayjs().fromNow(); // '几秒前'
|
||||
```
|
||||
|
||||
#### 3. **Axios** `^1.13.1`
|
||||
- **用途**: HTTP 请求库
|
||||
- **功能**: Promise API、请求/响应拦截器、取消请求
|
||||
- **文档**: https://axios-http.com/
|
||||
- **示例**:
|
||||
```typescript
|
||||
import axios from 'axios';
|
||||
const data = await axios.get('/api/users');
|
||||
```
|
||||
|
||||
#### 4. **Zustand** `^5.0.8`
|
||||
- **用途**: 轻量级状态管理库
|
||||
- **功能**: 简单的全局状态管理，比 Redux 简单得多
|
||||
- **文档**: https://zustand-demo.pmnd.rs/
|
||||
- **示例**:
|
||||
```typescript
|
||||
import { create } from 'zustand';
|
||||
const useStore = create((set) => ({
|
||||
count: 0,
|
||||
increment: () => set((state) => ({ count: state.count + 1 })),
|
||||
}));
|
||||
```
|
||||
|
||||
#### 5. **React Hook Form** `^7.66.0`
|
||||
- **用途**: 高性能表单处理库
|
||||
- **功能**: 表单验证、错误处理、性能优化
|
||||
- **文档**: https://react-hook-form.com/
|
||||
- **示例**:
|
||||
```typescript
|
||||
import { useForm } from 'react-hook-form';
|
||||
const { register, handleSubmit } = useForm();
|
||||
```
|
||||
|
||||
#### 6. **Zod** `^4.1.12`
|
||||
- **用途**: TypeScript 优先的数据验证库
|
||||
- **功能**: 数据验证、类型推断、错误处理
|
||||
- **文档**: https://zod.dev/
|
||||
- **示例**:
|
||||
```typescript
|
||||
import { z } from 'zod';
|
||||
const schema = z.object({
|
||||
email: z.string().email(),
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 📱 Expo 原生模块
|
||||
|
||||
#### 7. **AsyncStorage** `^2.2.0`
|
||||
- **包名**: @react-native-async-storage/async-storage
|
||||
- **用途**: React Native 本地持久化存储
|
||||
- **功能**: 键值对存储、异步 API
|
||||
- **文档**: https://react-native-async-storage.github.io/async-storage/
|
||||
- **示例**:
|
||||
```typescript
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
await AsyncStorage.setItem('key', 'value');
|
||||
```
|
||||
|
||||
#### 8. **Expo Image** `^3.0.10`
|
||||
- **用途**: 性能优化的图片组件
|
||||
- **功能**: 占位符、缓存、渐进加载
|
||||
- **文档**: https://docs.expo.dev/versions/latest/sdk/image/
|
||||
- **示例**:
|
||||
```typescript
|
||||
import { Image } from 'expo-image';
|
||||
<Image source={{ uri: 'https://...' }} />
|
||||
```
|
||||
|
||||
#### 9. **Expo Haptics** `^15.0.7`
|
||||
- **用途**: 触觉反馈功能
|
||||
- **功能**: 震动反馈、成功/错误/警告反馈
|
||||
- **文档**: https://docs.expo.dev/versions/latest/sdk/haptics/
|
||||
- **示例**:
|
||||
```typescript
|
||||
import * as Haptics from 'expo-haptics';
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 🔧 开发工具
|
||||
|
||||
#### 10. **@types/lodash-es** `^4.17.12`
|
||||
- **用途**: Lodash-ES 的 TypeScript 类型定义
|
||||
- **功能**: 提供完整的类型提示和类型检查
|
||||
- **安装类型**: devDependencies
|
||||
|
||||
---
|
||||
|
||||
## 📊 安装统计
|
||||
|
||||
- **总计**: 10 个包
|
||||
- **生产依赖**: 9 个
|
||||
- **开发依赖**: 1 个
|
||||
- **总大小**: 约 15MB（node_modules）
|
||||
|
||||
---
|
||||
|
||||
## 🎯 使用场景
|
||||
|
||||
### 数据处理
|
||||
- **Lodash**: 数组、对象操作
|
||||
- **Day.js**: 日期时间处理
|
||||
|
||||
### 网络请求
|
||||
- **Axios**: HTTP 请求
|
||||
- **Zod**: API 响应验证
|
||||
|
||||
### 状态管理
|
||||
- **Zustand**: 全局状态
|
||||
- **AsyncStorage**: 本地持久化
|
||||
|
||||
### 表单处理
|
||||
- **React Hook Form**: 表单管理
|
||||
- **Zod**: 表单验证
|
||||
|
||||
### 用户体验
|
||||
- **Expo Image**: 图片优化
|
||||
- **Expo Haptics**: 触觉反馈
|
||||
|
||||
---
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 1. 查看使用指南
|
||||
详细的使用方法请查看 [LIBRARIES.md](./LIBRARIES.md)
|
||||
|
||||
### 2. 推荐的项目结构
|
||||
```
|
||||
src/
|
||||
├── utils/
|
||||
│ ├── api.ts # Axios 配置
|
||||
│ ├── storage.ts # AsyncStorage 封装
|
||||
│ └── date.ts # Day.js 工具函数
|
||||
├── stores/
|
||||
│ ├── userStore.ts # 用户状态（Zustand）
|
||||
│ └── settingsStore.ts
|
||||
├── schemas/
|
||||
│ ├── auth.ts # 认证相关的 Zod schema
|
||||
│ └── user.ts
|
||||
└── hooks/
|
||||
├── useDebounce.ts # Lodash debounce 封装
|
||||
└── useThrottle.ts
|
||||
```
|
||||
|
||||
### 3. 创建基础工具文件
|
||||
|
||||
**utils/api.ts** - Axios 配置
|
||||
```typescript
|
||||
import axios from 'axios';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: 'https://api.example.com',
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
api.interceptors.request.use(async (config) => {
|
||||
const token = await AsyncStorage.getItem('token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
export default api;
|
||||
```
|
||||
|
||||
**utils/storage.ts** - 存储工具
|
||||
```typescript
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
class Storage {
|
||||
static async setObject<T>(key: string, value: T) {
|
||||
await AsyncStorage.setItem(key, JSON.stringify(value));
|
||||
}
|
||||
|
||||
static async getObject<T>(key: string): Promise<T | null> {
|
||||
const value = await AsyncStorage.getItem(key);
|
||||
return value ? JSON.parse(value) : null;
|
||||
}
|
||||
}
|
||||
|
||||
export default Storage;
|
||||
```
|
||||
|
||||
**stores/userStore.ts** - 用户状态
|
||||
```typescript
|
||||
import { create } from 'zustand';
|
||||
|
||||
interface UserState {
|
||||
user: any | null;
|
||||
setUser: (user: any) => void;
|
||||
}
|
||||
|
||||
export const useUserStore = create<UserState>((set) => ({
|
||||
user: null,
|
||||
setUser: (user) => set({ user }),
|
||||
}));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💡 最佳实践
|
||||
|
||||
### 1. 性能优化
|
||||
- ✅ 使用 Lodash-ES 的按需导入，减小包体积
|
||||
- ✅ 使用 `debounce` 和 `throttle` 优化频繁触发的事件
|
||||
- ✅ 使用 Zustand 的选择器避免不必要的重渲染
|
||||
- ✅ 使用 Expo Image 的缓存策略优化图片加载
|
||||
|
||||
### 2. 类型安全
|
||||
- ✅ 使用 Zod 定义数据结构并自动生成 TypeScript 类型
|
||||
- ✅ 为 Zustand store 定义完整的类型接口
|
||||
- ✅ 使用 `@types/lodash-es` 获得完整的类型提示
|
||||
|
||||
### 3. 代码组织
|
||||
- ✅ 将 API 配置集中在 `utils/api.ts`
|
||||
- ✅ 将存储操作封装在 `utils/storage.ts`
|
||||
- ✅ 将状态管理放在 `stores/` 目录
|
||||
- ✅ 将验证规则放在 `schemas/` 目录
|
||||
|
||||
### 4. 错误处理
|
||||
- ✅ 在 Axios 拦截器中统一处理错误
|
||||
- ✅ 使用 try-catch 包裹异步操作
|
||||
- ✅ 提供用户友好的错误提示
|
||||
|
||||
---
|
||||
|
||||
## 📚 相关文档
|
||||
|
||||
- [LIBRARIES.md](./LIBRARIES.md) - 详细的使用指南和示例
|
||||
- [README.md](./README.md) - 项目总体说明
|
||||
- [KNOWN_ISSUES.md](./KNOWN_ISSUES.md) - 已知问题和解决方案
|
||||
|
||||
---
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
所有工具库已成功安装并可以直接使用！这些库涵盖了：
|
||||
|
||||
- ✅ **数据处理** - Lodash-ES（支持 tree-shaking）, Day.js
|
||||
- ✅ **网络请求** - Axios
|
||||
- ✅ **状态管理** - Zustand
|
||||
- ✅ **表单处理** - React Hook Form, Zod
|
||||
- ✅ **本地存储** - AsyncStorage
|
||||
- ✅ **用户体验** - Expo Image, Expo Haptics
|
||||
|
||||
开始使用这些强大的工具来构建你的应用吧！🚀
|
||||
|
||||
113
docs/KNOWN_ISSUES.md
Normal file
113
docs/KNOWN_ISSUES.md
Normal file
@@ -0,0 +1,113 @@
|
||||
# 已知问题和警告说明
|
||||
|
||||
## ⚠️ Web 平台警告
|
||||
|
||||
### 警告信息
|
||||
```
|
||||
λ WARN props.pointerEvents is deprecated. Use style.pointerEvents
|
||||
```
|
||||
|
||||
### 原因
|
||||
这个警告来自 `react-native-web@0.21.2` 库内部，是该库在处理某些 React Native 组件时产生的弃用警告。具体来说：
|
||||
|
||||
- React Native Web 正在从使用 `props.pointerEvents` 迁移到 `style.pointerEvents`
|
||||
- 这是库内部的实现细节，不是我们应用代码的问题
|
||||
- 警告来自 `View` 组件在 Web 平台上的渲染过程
|
||||
|
||||
### 影响
|
||||
- ✅ **不影响应用功能** - 应用在 Web 平台上完全正常运行
|
||||
- ✅ **不影响性能** - 只是一个弃用提示
|
||||
- ✅ **不影响移动端** - 只在 Web 平台出现
|
||||
|
||||
### 解决方案
|
||||
|
||||
#### 方案 1：忽略警告（推荐）
|
||||
这个警告是无害的，可以安全忽略。等待 `react-native-web` 库更新到新版本后会自动解决。
|
||||
|
||||
#### 方案 2：抑制警告
|
||||
如果你想在开发时隐藏这个警告，可以在 `app.json` 中添加配置：
|
||||
|
||||
```json
|
||||
{
|
||||
"expo": {
|
||||
"web": {
|
||||
"bundler": "metro",
|
||||
"output": "static",
|
||||
"favicon": "./assets/images/favicon.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
或者在代码中添加警告过滤（不推荐）：
|
||||
|
||||
```typescript
|
||||
// 在 app/_layout.tsx 顶部添加
|
||||
if (typeof window !== 'undefined') {
|
||||
const originalWarn = console.warn;
|
||||
console.warn = (...args) => {
|
||||
if (args[0]?.includes?.('pointerEvents is deprecated')) {
|
||||
return;
|
||||
}
|
||||
originalWarn(...args);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
#### 方案 3：等待库更新
|
||||
`react-native-web` 团队正在积极维护这个库，未来版本会解决这个警告。你可以：
|
||||
|
||||
1. 关注 [react-native-web 更新日志](https://github.com/necolas/react-native-web/releases)
|
||||
2. 定期运行 `pnpm update react-native-web` 更新到最新版本
|
||||
|
||||
### 相关信息
|
||||
|
||||
- **库版本**: react-native-web@0.21.2
|
||||
- **Expo 版本**: ~54.0.22
|
||||
- **React Native 版本**: 0.81.5
|
||||
- **问题追踪**: 这是 react-native-web 库的已知问题，正在逐步迁移中
|
||||
|
||||
### 验证
|
||||
你可以通过以下方式验证应用功能正常：
|
||||
|
||||
```bash
|
||||
# 启动 Web 版本
|
||||
pnpm web
|
||||
|
||||
# 在浏览器中打开 http://localhost:8081
|
||||
# 检查所有功能是否正常工作
|
||||
```
|
||||
|
||||
## 📝 其他注意事项
|
||||
|
||||
### 开发模式下的其他常见警告
|
||||
|
||||
#### 1. Metro Bundler 警告
|
||||
某些依赖可能会产生 Metro 打包警告，这些通常可以安全忽略。
|
||||
|
||||
#### 2. React 19 新特性警告
|
||||
由于使用了 React 19.1.0，某些旧的 API 可能会有弃用警告。
|
||||
|
||||
#### 3. Expo Router 类型警告
|
||||
TypeScript 可能会对某些 Expo Router 的动态路由产生类型警告，这是正常的。
|
||||
|
||||
### 生产构建
|
||||
在生产构建中，这些警告不会出现，因为：
|
||||
- 生产构建会移除所有开发时的警告
|
||||
- 代码会被优化和压缩
|
||||
- 只有关键错误会被记录
|
||||
|
||||
### 如何报告问题
|
||||
如果你遇到其他问题：
|
||||
|
||||
1. 检查是否是已知问题（查看本文档）
|
||||
2. 查看 [Expo 文档](https://docs.expo.dev/)
|
||||
3. 搜索 [Expo GitHub Issues](https://github.com/expo/expo/issues)
|
||||
4. 在项目中创建 issue 或联系开发团队
|
||||
|
||||
## ✅ 总结
|
||||
|
||||
**当前的 `pointerEvents` 警告是安全的，可以忽略。** 应用在所有平台（iOS、Android、Web）上都能正常运行。这只是一个库内部的迁移提示，不影响你的开发和生产使用。
|
||||
|
||||
如果你想要一个完全没有警告的开发体验，可以等待 `react-native-web` 的下一个主要版本更新，或者使用上述方案 2 临时抑制警告。
|
||||
|
||||
387
docs/LIBRARIES.md
Normal file
387
docs/LIBRARIES.md
Normal file
@@ -0,0 +1,387 @@
|
||||
# 📚 常用工具库使用指南
|
||||
|
||||
本文档介绍项目中已安装的常用工具库及其使用方法。
|
||||
|
||||
## 📦 已安装的库列表
|
||||
|
||||
### 工具类库
|
||||
| 库名 | 版本 | 用途 |
|
||||
|------|------|------|
|
||||
| **lodash-es** | ^4.17.21 | JavaScript 工具函数库（ES modules 版本） |
|
||||
| **dayjs** | ^1.11.19 | 轻量级日期处理库 |
|
||||
| **axios** | ^1.13.1 | HTTP 请求库 |
|
||||
| **zustand** | ^5.0.8 | 轻量级状态管理 |
|
||||
| **react-hook-form** | ^7.66.0 | 表单处理库 |
|
||||
| **zod** | ^4.1.12 | TypeScript 数据验证库 |
|
||||
|
||||
### Expo 原生模块
|
||||
| 库名 | 版本 | 用途 |
|
||||
|------|------|------|
|
||||
| **@react-native-async-storage/async-storage** | ^2.2.0 | 本地存储 |
|
||||
| **expo-image** | ^3.0.10 | 优化的图片组件 |
|
||||
| **expo-haptics** | ^15.0.7 | 触觉反馈 |
|
||||
|
||||
### 开发工具
|
||||
| 库名 | 版本 | 用途 |
|
||||
|------|------|------|
|
||||
| **@types/lodash-es** | ^4.17.12 | Lodash-ES TypeScript 类型定义 |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 1. Lodash-ES - JavaScript 工具库
|
||||
|
||||
> **注意**：使用 `lodash-es` 而不是 `lodash`，支持 ES modules 和更好的 tree-shaking。
|
||||
|
||||
```typescript
|
||||
// 推荐：按需导入（tree-shaking 友好）
|
||||
import { map, filter, uniq, pick, cloneDeep, debounce } from 'lodash-es';
|
||||
|
||||
// 数组操作
|
||||
map([1, 2, 3], n => n * 2); // [2, 4, 6]
|
||||
filter([1, 2, 3, 4], n => n % 2 === 0); // [2, 4]
|
||||
uniq([1, 2, 2, 3]); // [1, 2, 3]
|
||||
|
||||
// 对象操作
|
||||
pick({ a: 1, b: 2, c: 3 }, ['a', 'b']); // { a: 1, b: 2 }
|
||||
cloneDeep(obj); // 深拷贝
|
||||
|
||||
// 防抖和节流
|
||||
const handleSearch = debounce((text) => {
|
||||
console.log('Searching:', text);
|
||||
}, 300);
|
||||
|
||||
// 也可以全量导入（不推荐，会增加包体积）
|
||||
import _ from 'lodash-es';
|
||||
_.map([1, 2, 3], n => n * 2);
|
||||
```
|
||||
|
||||
### 2. Day.js - 日期处理
|
||||
|
||||
```typescript
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
dayjs.locale('zh-cn');
|
||||
|
||||
// 格式化
|
||||
dayjs().format('YYYY-MM-DD HH:mm:ss');
|
||||
|
||||
// 相对时间
|
||||
dayjs().fromNow(); // '几秒前'
|
||||
dayjs().subtract(1, 'day').fromNow(); // '1天前'
|
||||
|
||||
// 日期操作
|
||||
dayjs().add(7, 'day'); // 7天后
|
||||
dayjs().startOf('month'); // 本月第一天
|
||||
```
|
||||
|
||||
### 3. Axios - HTTP 请求
|
||||
|
||||
```typescript
|
||||
import axios from 'axios';
|
||||
|
||||
// 创建实例
|
||||
const api = axios.create({
|
||||
baseURL: 'https://api.example.com',
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
// 请求拦截器
|
||||
api.interceptors.request.use(async (config) => {
|
||||
const token = await AsyncStorage.getItem('token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
// 使用
|
||||
const data = await api.get('/users');
|
||||
await api.post('/users', { name: 'John' });
|
||||
```
|
||||
|
||||
### 4. Zustand - 状态管理
|
||||
|
||||
```typescript
|
||||
import { create } from 'zustand';
|
||||
|
||||
interface UserState {
|
||||
user: User | null;
|
||||
setUser: (user: User) => void;
|
||||
}
|
||||
|
||||
export const useUserStore = create<UserState>((set) => ({
|
||||
user: null,
|
||||
setUser: (user) => set({ user }),
|
||||
}));
|
||||
|
||||
// 在组件中使用
|
||||
const user = useUserStore((state) => state.user);
|
||||
const setUser = useUserStore((state) => state.setUser);
|
||||
```
|
||||
|
||||
### 5. React Hook Form + Zod - 表单处理
|
||||
|
||||
```typescript
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
|
||||
const schema = z.object({
|
||||
email: z.string().email('请输入有效的邮箱'),
|
||||
password: z.string().min(6, '密码至少6个字符'),
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof schema>;
|
||||
|
||||
function LoginForm() {
|
||||
const { control, handleSubmit, formState: { errors } } = useForm<FormData>({
|
||||
resolver: zodResolver(schema),
|
||||
});
|
||||
|
||||
const onSubmit = (data: FormData) => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<TextInput
|
||||
value={value}
|
||||
onChangeText={onChange}
|
||||
placeholder="邮箱"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 6. AsyncStorage - 本地存储
|
||||
|
||||
```typescript
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
// 存储
|
||||
await AsyncStorage.setItem('key', JSON.stringify(value));
|
||||
|
||||
// 读取
|
||||
const value = await AsyncStorage.getItem('key');
|
||||
const data = value ? JSON.parse(value) : null;
|
||||
|
||||
// 删除
|
||||
await AsyncStorage.removeItem('key');
|
||||
|
||||
// 清空
|
||||
await AsyncStorage.clear();
|
||||
```
|
||||
|
||||
### 7. Expo Image - 优化的图片组件
|
||||
|
||||
```typescript
|
||||
import { Image } from 'expo-image';
|
||||
|
||||
<Image
|
||||
source={{ uri: 'https://example.com/image.jpg' }}
|
||||
placeholder={require('@/assets/placeholder.png')}
|
||||
contentFit="cover"
|
||||
transition={1000}
|
||||
style={{ width: 300, height: 300 }}
|
||||
/>
|
||||
```
|
||||
|
||||
### 8. Expo Haptics - 触觉反馈
|
||||
|
||||
```typescript
|
||||
import * as Haptics from 'expo-haptics';
|
||||
|
||||
// 轻触反馈
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
||||
|
||||
// 成功反馈
|
||||
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
|
||||
|
||||
// 错误反馈
|
||||
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💡 实用示例
|
||||
|
||||
### 创建 API 工具类
|
||||
|
||||
```typescript
|
||||
// utils/api.ts
|
||||
import axios from 'axios';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: 'https://api.example.com',
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
api.interceptors.request.use(async (config) => {
|
||||
const token = await AsyncStorage.getItem('token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
api.interceptors.response.use(
|
||||
(response) => response.data,
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
AsyncStorage.removeItem('token');
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
```
|
||||
|
||||
### 创建 Storage 工具类
|
||||
|
||||
```typescript
|
||||
// utils/storage.ts
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
class Storage {
|
||||
static async setObject<T>(key: string, value: T): Promise<void> {
|
||||
await AsyncStorage.setItem(key, JSON.stringify(value));
|
||||
}
|
||||
|
||||
static async getObject<T>(key: string): Promise<T | null> {
|
||||
const value = await AsyncStorage.getItem(key);
|
||||
return value ? JSON.parse(value) : null;
|
||||
}
|
||||
|
||||
static async remove(key: string): Promise<void> {
|
||||
await AsyncStorage.removeItem(key);
|
||||
}
|
||||
}
|
||||
|
||||
export default Storage;
|
||||
```
|
||||
|
||||
### 创建用户状态管理
|
||||
|
||||
```typescript
|
||||
// stores/userStore.ts
|
||||
import { create } from 'zustand';
|
||||
import { persist, createJSONStorage } from 'zustand/middleware';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
interface UserState {
|
||||
user: User | null;
|
||||
setUser: (user: User) => void;
|
||||
clearUser: () => void;
|
||||
}
|
||||
|
||||
export const useUserStore = create<UserState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
user: null,
|
||||
setUser: (user) => set({ user }),
|
||||
clearUser: () => set({ user: null }),
|
||||
}),
|
||||
{
|
||||
name: 'user-storage',
|
||||
storage: createJSONStorage(() => AsyncStorage),
|
||||
}
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
### 日期格式化工具
|
||||
|
||||
```typescript
|
||||
// utils/date.ts
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
dayjs.locale('zh-cn');
|
||||
|
||||
export const formatDate = (date: Date | string | number) => {
|
||||
return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
|
||||
};
|
||||
|
||||
export const formatRelativeTime = (date: Date | string | number) => {
|
||||
return dayjs(date).fromNow();
|
||||
};
|
||||
|
||||
export const formatChatTime = (timestamp: number) => {
|
||||
const date = dayjs(timestamp);
|
||||
const now = dayjs();
|
||||
|
||||
if (date.isSame(now, 'day')) {
|
||||
return date.format('HH:mm');
|
||||
} else if (date.isSame(now.subtract(1, 'day'), 'day')) {
|
||||
return '昨天 ' + date.format('HH:mm');
|
||||
} else if (date.isSame(now, 'year')) {
|
||||
return date.format('MM-DD HH:mm');
|
||||
} else {
|
||||
return date.format('YYYY-MM-DD');
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 最佳实践
|
||||
|
||||
1. **代码组织**
|
||||
- 将 API 配置放在 `utils/api.ts`
|
||||
- 将存储工具放在 `utils/storage.ts`
|
||||
- 将状态管理放在 `stores/` 目录
|
||||
- 将验证规则放在 `schemas/` 目录
|
||||
|
||||
2. **性能优化**
|
||||
- 使用 `_.debounce` 和 `_.throttle` 优化频繁触发的事件
|
||||
- 使用 Zustand 的选择器避免不必要的重渲染
|
||||
- 使用 Expo Image 的缓存策略
|
||||
|
||||
3. **类型安全**
|
||||
- 使用 Zod 定义数据结构并自动生成 TypeScript 类型
|
||||
- 为 Zustand store 定义完整的类型
|
||||
- 使用 `@types/lodash` 获得完整的类型提示
|
||||
|
||||
4. **错误处理**
|
||||
- 在 Axios 拦截器中统一处理错误
|
||||
- 使用 try-catch 包裹异步操作
|
||||
- 提供用户友好的错误提示
|
||||
|
||||
---
|
||||
|
||||
## 🔗 相关资源
|
||||
|
||||
- [Lodash 文档](https://lodash.com/docs/)
|
||||
- [Day.js 文档](https://day.js.org/)
|
||||
- [Axios 文档](https://axios-http.com/)
|
||||
- [Zustand 文档](https://zustand-demo.pmnd.rs/)
|
||||
- [React Hook Form 文档](https://react-hook-form.com/)
|
||||
- [Zod 文档](https://zod.dev/)
|
||||
- [AsyncStorage 文档](https://react-native-async-storage.github.io/async-storage/)
|
||||
- [Expo Image 文档](https://docs.expo.dev/versions/latest/sdk/image/)
|
||||
- [Expo Haptics 文档](https://docs.expo.dev/versions/latest/sdk/haptics/)
|
||||
|
||||
---
|
||||
|
||||
**提示**：所有库都已安装并配置好，可以直接在项目中使用！🎉
|
||||
|
||||
429
docs/USAGE_EXAMPLES.md
Normal file
429
docs/USAGE_EXAMPLES.md
Normal file
@@ -0,0 +1,429 @@
|
||||
# 💡 使用示例
|
||||
|
||||
本文档提供项目中各个工具和模块的实际使用示例。
|
||||
|
||||
## 📋 目录
|
||||
|
||||
- [登录功能示例](#登录功能示例)
|
||||
- [用户资料更新示例](#用户资料更新示例)
|
||||
- [搜索功能示例](#搜索功能示例)
|
||||
- [设置页面示例](#设置页面示例)
|
||||
- [列表加载示例](#列表加载示例)
|
||||
|
||||
---
|
||||
|
||||
## 登录功能示例
|
||||
|
||||
完整的登录页面实现，包含表单验证、API 调用、状态管理。
|
||||
|
||||
```typescript
|
||||
import React, { useState } from 'react';
|
||||
import { View, TextInput, TouchableOpacity, Text, Alert } from 'react-native';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useRouter } from 'expo-router';
|
||||
import {
|
||||
loginSchema,
|
||||
type LoginFormData,
|
||||
authService,
|
||||
useUserStore,
|
||||
useHaptics,
|
||||
} from '@/src';
|
||||
|
||||
export default function LoginScreen() {
|
||||
const router = useRouter();
|
||||
const haptics = useHaptics();
|
||||
const login = useUserStore((state) => state.login);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 表单配置
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<LoginFormData>({
|
||||
resolver: zodResolver(loginSchema),
|
||||
defaultValues: {
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
});
|
||||
|
||||
// 提交处理
|
||||
const onSubmit = async (data: LoginFormData) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// 调用登录 API
|
||||
const { user, token } = await authService.login(data);
|
||||
|
||||
// 更新状态
|
||||
login(user, token);
|
||||
|
||||
// 触觉反馈
|
||||
haptics.success();
|
||||
|
||||
// 跳转到首页
|
||||
router.replace('/(tabs)');
|
||||
} catch (error: any) {
|
||||
haptics.error();
|
||||
Alert.alert('登录失败', error.message || '请检查邮箱和密码');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={{ padding: 20 }}>
|
||||
{/* 邮箱输入 */}
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<View>
|
||||
<TextInput
|
||||
value={value}
|
||||
onChangeText={onChange}
|
||||
placeholder="邮箱"
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: errors.email ? 'red' : '#ccc',
|
||||
padding: 10,
|
||||
borderRadius: 5,
|
||||
}}
|
||||
/>
|
||||
{errors.email && (
|
||||
<Text style={{ color: 'red', marginTop: 5 }}>
|
||||
{errors.email.message}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 密码输入 */}
|
||||
<Controller
|
||||
control={control}
|
||||
name="password"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<View style={{ marginTop: 15 }}>
|
||||
<TextInput
|
||||
value={value}
|
||||
onChangeText={onChange}
|
||||
placeholder="密码"
|
||||
secureTextEntry
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: errors.password ? 'red' : '#ccc',
|
||||
padding: 10,
|
||||
borderRadius: 5,
|
||||
}}
|
||||
/>
|
||||
{errors.password && (
|
||||
<Text style={{ color: 'red', marginTop: 5 }}>
|
||||
{errors.password.message}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 登录按钮 */}
|
||||
<TouchableOpacity
|
||||
onPress={handleSubmit(onSubmit)}
|
||||
disabled={loading}
|
||||
style={{
|
||||
backgroundColor: loading ? '#ccc' : '#007AFF',
|
||||
padding: 15,
|
||||
borderRadius: 5,
|
||||
marginTop: 20,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: 'white', textAlign: 'center', fontWeight: 'bold' }}>
|
||||
{loading ? '登录中...' : '登录'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 用户资料更新示例
|
||||
|
||||
使用表单验证和 API 服务更新用户资料。
|
||||
|
||||
```typescript
|
||||
import React, { useState } from 'react';
|
||||
import { View, TextInput, TouchableOpacity, Text, Alert } from 'react-native';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import {
|
||||
updateProfileSchema,
|
||||
type UpdateProfileFormData,
|
||||
userService,
|
||||
useUserStore,
|
||||
useHaptics,
|
||||
} from '@/src';
|
||||
|
||||
export default function EditProfileScreen() {
|
||||
const haptics = useHaptics();
|
||||
const user = useUserStore((state) => state.user);
|
||||
const updateUser = useUserStore((state) => state.updateUser);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<UpdateProfileFormData>({
|
||||
resolver: zodResolver(updateProfileSchema),
|
||||
defaultValues: {
|
||||
nickname: user?.nickname || '',
|
||||
phone: user?.phone || '',
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: UpdateProfileFormData) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// 调用更新 API
|
||||
const updatedUser = await userService.updateProfile(data);
|
||||
|
||||
// 更新本地状态
|
||||
updateUser(updatedUser);
|
||||
|
||||
haptics.success();
|
||||
Alert.alert('成功', '资料更新成功');
|
||||
} catch (error: any) {
|
||||
haptics.error();
|
||||
Alert.alert('失败', error.message || '更新失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={{ padding: 20 }}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="nickname"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<View>
|
||||
<Text>昵称</Text>
|
||||
<TextInput
|
||||
value={value}
|
||||
onChangeText={onChange}
|
||||
placeholder="请输入昵称"
|
||||
style={{ borderWidth: 1, padding: 10, marginTop: 5 }}
|
||||
/>
|
||||
{errors.nickname && (
|
||||
<Text style={{ color: 'red' }}>{errors.nickname.message}</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={handleSubmit(onSubmit)}
|
||||
disabled={loading}
|
||||
style={{
|
||||
backgroundColor: '#007AFF',
|
||||
padding: 15,
|
||||
marginTop: 20,
|
||||
borderRadius: 5,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: 'white', textAlign: 'center' }}>
|
||||
{loading ? '保存中...' : '保存'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 搜索功能示例
|
||||
|
||||
使用防抖优化搜索性能。
|
||||
|
||||
```typescript
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { View, TextInput, FlatList, Text } from 'react-native';
|
||||
import { useDebounce } from '@/src';
|
||||
|
||||
export default function SearchScreen() {
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [results, setResults] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 防抖搜索函数
|
||||
const debouncedSearch = useDebounce(async (text: string) => {
|
||||
if (!text.trim()) {
|
||||
setResults([]);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
// 调用搜索 API
|
||||
const response = await fetch(`/api/search?q=${text}`);
|
||||
const data = await response.json();
|
||||
setResults(data.results);
|
||||
} catch (error) {
|
||||
console.error('Search error:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// 监听搜索文本变化
|
||||
useEffect(() => {
|
||||
debouncedSearch(searchText);
|
||||
}, [searchText]);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, padding: 20 }}>
|
||||
<TextInput
|
||||
value={searchText}
|
||||
onChangeText={setSearchText}
|
||||
placeholder="搜索..."
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: '#ccc',
|
||||
padding: 10,
|
||||
borderRadius: 5,
|
||||
}}
|
||||
/>
|
||||
|
||||
{loading && <Text style={{ marginTop: 10 }}>搜索中...</Text>}
|
||||
|
||||
<FlatList
|
||||
data={results}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item }) => (
|
||||
<View style={{ padding: 10, borderBottomWidth: 1 }}>
|
||||
<Text>{item.title}</Text>
|
||||
</View>
|
||||
)}
|
||||
style={{ marginTop: 20 }}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 设置页面示例
|
||||
|
||||
使用状态管理和触觉反馈。
|
||||
|
||||
```typescript
|
||||
import React from 'react';
|
||||
import { View, Text, Switch, TouchableOpacity } from 'react-native';
|
||||
import {
|
||||
useSettingsStore,
|
||||
useHaptics,
|
||||
type Theme,
|
||||
} from '@/src';
|
||||
|
||||
export default function SettingsScreen() {
|
||||
const haptics = useHaptics();
|
||||
const theme = useSettingsStore((state) => state.theme);
|
||||
const notificationsEnabled = useSettingsStore((state) => state.notificationsEnabled);
|
||||
const hapticsEnabled = useSettingsStore((state) => state.hapticsEnabled);
|
||||
|
||||
const setTheme = useSettingsStore((state) => state.setTheme);
|
||||
const setNotificationsEnabled = useSettingsStore((state) => state.setNotificationsEnabled);
|
||||
const setHapticsEnabled = useSettingsStore((state) => state.setHapticsEnabled);
|
||||
|
||||
const handleThemeChange = (newTheme: Theme) => {
|
||||
haptics.selection();
|
||||
setTheme(newTheme);
|
||||
};
|
||||
|
||||
const handleToggle = (setter: (value: boolean) => void, value: boolean) => {
|
||||
haptics.light();
|
||||
setter(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, padding: 20 }}>
|
||||
{/* 主题选择 */}
|
||||
<View style={{ marginBottom: 20 }}>
|
||||
<Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 10 }}>
|
||||
主题
|
||||
</Text>
|
||||
{(['light', 'dark', 'auto'] as Theme[]).map((t) => (
|
||||
<TouchableOpacity
|
||||
key={t}
|
||||
onPress={() => handleThemeChange(t)}
|
||||
style={{
|
||||
padding: 15,
|
||||
backgroundColor: theme === t ? '#007AFF' : '#f0f0f0',
|
||||
marginBottom: 10,
|
||||
borderRadius: 5,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: theme === t ? 'white' : 'black' }}>
|
||||
{t === 'light' ? '亮色' : t === 'dark' ? '暗色' : '自动'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 通知开关 */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 15,
|
||||
}}
|
||||
>
|
||||
<Text>通知</Text>
|
||||
<Switch
|
||||
value={notificationsEnabled}
|
||||
onValueChange={(value) => handleToggle(setNotificationsEnabled, value)}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 触觉反馈开关 */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Text>触觉反馈</Text>
|
||||
<Switch
|
||||
value={hapticsEnabled}
|
||||
onValueChange={(value) => handleToggle(setHapticsEnabled, value)}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📚 更多示例
|
||||
|
||||
查看以下文档了解更多：
|
||||
|
||||
- [工具库使用指南](./LIBRARIES.md) - 各个工具库的详细用法
|
||||
- [项目结构说明](./PROJECT_STRUCTURE.md) - 项目结构和最佳实践
|
||||
|
||||
---
|
||||
|
||||
**提示**：这些示例都是可以直接使用的代码，复制到你的项目中即可！
|
||||
|
||||
23
eas.json
Normal file
23
eas.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"cli": {
|
||||
"version": ">= 13.2.0"
|
||||
},
|
||||
"build": {
|
||||
"development": {
|
||||
"developmentClient": true,
|
||||
"distribution": "internal",
|
||||
"channel": "development"
|
||||
},
|
||||
"preview": {
|
||||
"distribution": "internal",
|
||||
"channel": "preview"
|
||||
},
|
||||
"production": {
|
||||
"channel": "production"
|
||||
}
|
||||
},
|
||||
"submit": {
|
||||
"production": {}
|
||||
}
|
||||
}
|
||||
|
||||
49
package.json
Normal file
49
package.json
Normal file
@@ -0,0 +1,49 @@
|
||||
{
|
||||
"name": "rn-demo",
|
||||
"main": "expo-router/entry",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"start": "expo start",
|
||||
"android": "expo start --android",
|
||||
"ios": "expo start --ios",
|
||||
"web": "expo start --web"
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo/vector-icons": "^15.0.3",
|
||||
"@hookform/resolvers": "^5.2.2",
|
||||
"@react-native-async-storage/async-storage": "^2.2.0",
|
||||
"@react-navigation/native": "^7.1.8",
|
||||
"axios": "^1.13.1",
|
||||
"dayjs": "^1.11.19",
|
||||
"expo": "~54.0.22",
|
||||
"expo-constants": "~18.0.10",
|
||||
"expo-font": "~14.0.9",
|
||||
"expo-haptics": "^15.0.7",
|
||||
"expo-image": "^3.0.10",
|
||||
"expo-linking": "~8.0.8",
|
||||
"expo-router": "~6.0.14",
|
||||
"expo-splash-screen": "~31.0.10",
|
||||
"expo-status-bar": "~3.0.8",
|
||||
"expo-updates": "^29.0.12",
|
||||
"expo-web-browser": "~15.0.9",
|
||||
"lodash-es": "^4.17.21",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0",
|
||||
"react-hook-form": "^7.66.0",
|
||||
"react-native": "0.81.5",
|
||||
"react-native-reanimated": "~4.1.1",
|
||||
"react-native-safe-area-context": "~5.6.0",
|
||||
"react-native-screens": "~4.16.0",
|
||||
"react-native-web": "~0.21.0",
|
||||
"react-native-worklets": "0.5.1",
|
||||
"zod": "^4.1.12",
|
||||
"zustand": "^5.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@types/react": "~19.1.0",
|
||||
"react-test-renderer": "19.1.0",
|
||||
"typescript": "~5.9.2"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
7377
pnpm-lock.yaml
generated
Normal file
7377
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
84
src/hooks/useDebounce.ts
Normal file
84
src/hooks/useDebounce.ts
Normal file
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* 防抖 Hook
|
||||
* 使用 lodash-es 的 debounce 函数
|
||||
*/
|
||||
import React, { useEffect, useMemo, useRef } from 'react';
|
||||
import { debounce } from 'lodash-es';
|
||||
|
||||
/**
|
||||
* 防抖值 Hook
|
||||
* @param value 需要防抖的值
|
||||
* @param delay 延迟时间（毫秒）
|
||||
* @returns 防抖后的值
|
||||
*/
|
||||
export function useDebounceValue<T>(value: T, delay: number = 300): T {
|
||||
const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedValue(value);
|
||||
}, delay);
|
||||
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
}, [value, delay]);
|
||||
|
||||
return debouncedValue;
|
||||
}
|
||||
|
||||
/**
|
||||
* 防抖函数 Hook
|
||||
* @param callback 需要防抖的函数
|
||||
* @param delay 延迟时间（毫秒）
|
||||
* @returns 防抖后的函数
|
||||
*/
|
||||
export function useDebounce<T extends (...args: any[]) => any>(
|
||||
callback: T,
|
||||
delay: number = 300
|
||||
): T {
|
||||
const callbackRef = useRef(callback);
|
||||
|
||||
// 更新 callback ref
|
||||
useEffect(() => {
|
||||
callbackRef.current = callback;
|
||||
}, [callback]);
|
||||
|
||||
// 创建防抖函数
|
||||
const debouncedCallback = useMemo(() => {
|
||||
const func = (...args: Parameters<T>) => {
|
||||
callbackRef.current(...args);
|
||||
};
|
||||
|
||||
return debounce(func, delay);
|
||||
}, [delay]);
|
||||
|
||||
// 清理
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
debouncedCallback.cancel();
|
||||
};
|
||||
}, [debouncedCallback]);
|
||||
|
||||
return debouncedCallback as T;
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用示例：
|
||||
*
|
||||
* // 防抖值
|
||||
* const [searchText, setSearchText] = useState('');
|
||||
* const debouncedSearchText = useDebounceValue(searchText, 500);
|
||||
*
|
||||
* useEffect(() => {
|
||||
* // 使用防抖后的值进行搜索
|
||||
* search(debouncedSearchText);
|
||||
* }, [debouncedSearchText]);
|
||||
*
|
||||
* // 防抖函数
|
||||
* const handleSearch = useDebounce((text: string) => {
|
||||
* console.log('Searching:', text);
|
||||
* }, 500);
|
||||
*/
|
||||
|
||||
|
||||
114
src/hooks/useHaptics.ts
Normal file
114
src/hooks/useHaptics.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
/**
|
||||
* 触觉反馈 Hook
|
||||
* 封装 Expo Haptics 功能
|
||||
*/
|
||||
|
||||
import { useCallback } from 'react';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
import { useHapticsEnabled } from '@/src/stores/settingsStore';
|
||||
|
||||
/**
|
||||
* 触觉反馈 Hook
|
||||
* 根据用户设置决定是否触发触觉反馈
|
||||
*/
|
||||
export function useHaptics() {
|
||||
const hapticsEnabled = useHapticsEnabled();
|
||||
|
||||
/**
|
||||
* 轻触反馈
|
||||
*/
|
||||
const light = useCallback(async () => {
|
||||
if (hapticsEnabled) {
|
||||
await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
||||
}
|
||||
}, [hapticsEnabled]);
|
||||
|
||||
/**
|
||||
* 中等反馈
|
||||
*/
|
||||
const medium = useCallback(async () => {
|
||||
if (hapticsEnabled) {
|
||||
await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
|
||||
}
|
||||
}, [hapticsEnabled]);
|
||||
|
||||
/**
|
||||
* 重触反馈
|
||||
*/
|
||||
const heavy = useCallback(async () => {
|
||||
if (hapticsEnabled) {
|
||||
await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
|
||||
}
|
||||
}, [hapticsEnabled]);
|
||||
|
||||
/**
|
||||
* 成功反馈
|
||||
*/
|
||||
const success = useCallback(async () => {
|
||||
if (hapticsEnabled) {
|
||||
await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
|
||||
}
|
||||
}, [hapticsEnabled]);
|
||||
|
||||
/**
|
||||
* 警告反馈
|
||||
*/
|
||||
const warning = useCallback(async () => {
|
||||
if (hapticsEnabled) {
|
||||
await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
|
||||
}
|
||||
}, [hapticsEnabled]);
|
||||
|
||||
/**
|
||||
* 错误反馈
|
||||
*/
|
||||
const error = useCallback(async () => {
|
||||
if (hapticsEnabled) {
|
||||
await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
|
||||
}
|
||||
}, [hapticsEnabled]);
|
||||
|
||||
/**
|
||||
* 选择反馈
|
||||
*/
|
||||
const selection = useCallback(async () => {
|
||||
if (hapticsEnabled) {
|
||||
await Haptics.selectionAsync();
|
||||
}
|
||||
}, [hapticsEnabled]);
|
||||
|
||||
return {
|
||||
light,
|
||||
medium,
|
||||
heavy,
|
||||
success,
|
||||
warning,
|
||||
error,
|
||||
selection,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用示例：
|
||||
*
|
||||
* function MyComponent() {
|
||||
* const haptics = useHaptics();
|
||||
*
|
||||
* const handlePress = () => {
|
||||
* haptics.light();
|
||||
* // 执行其他操作
|
||||
* };
|
||||
*
|
||||
* const handleSuccess = () => {
|
||||
* haptics.success();
|
||||
* // 显示成功消息
|
||||
* };
|
||||
*
|
||||
* return (
|
||||
* <TouchableOpacity onPress={handlePress}>
|
||||
* <Text>Press me</Text>
|
||||
* </TouchableOpacity>
|
||||
* );
|
||||
* }
|
||||
*/
|
||||
|
||||
61
src/hooks/useThrottle.ts
Normal file
61
src/hooks/useThrottle.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* 节流 Hook
|
||||
* 使用 lodash-es 的 throttle 函数
|
||||
*/
|
||||
|
||||
import { useEffect, useMemo, useRef } from 'react';
|
||||
import { throttle } from 'lodash-es';
|
||||
|
||||
/**
|
||||
* 节流函数 Hook
|
||||
* @param callback 需要节流的函数
|
||||
* @param delay 延迟时间（毫秒）
|
||||
* @param options 节流选项
|
||||
* @returns 节流后的函数
|
||||
*/
|
||||
export function useThrottle<T extends (...args: any[]) => any>(
|
||||
callback: T,
|
||||
delay: number = 300,
|
||||
options?: {
|
||||
leading?: boolean;
|
||||
trailing?: boolean;
|
||||
}
|
||||
): T {
|
||||
const callbackRef = useRef(callback);
|
||||
|
||||
// 更新 callback ref
|
||||
useEffect(() => {
|
||||
callbackRef.current = callback;
|
||||
}, [callback]);
|
||||
|
||||
// 创建节流函数
|
||||
const throttledCallback = useMemo(() => {
|
||||
const func = (...args: Parameters<T>) => {
|
||||
callbackRef.current(...args);
|
||||
};
|
||||
|
||||
return throttle(func, delay, options);
|
||||
}, [delay, options]);
|
||||
|
||||
// 清理
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
throttledCallback.cancel();
|
||||
};
|
||||
}, [throttledCallback]);
|
||||
|
||||
return throttledCallback as T;
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用示例：
|
||||
*
|
||||
* const handleScroll = useThrottle((event) => {
|
||||
* console.log('Scrolling:', event);
|
||||
* }, 200);
|
||||
*
|
||||
* <ScrollView onScroll={handleScroll}>
|
||||
* ...
|
||||
* </ScrollView>
|
||||
*/
|
||||
|
||||
29
src/index.ts
Normal file
29
src/index.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* 统一导出所有模块
|
||||
*/
|
||||
|
||||
// Utils
|
||||
export { default as api, request } from './utils/api';
|
||||
export { default as Storage, STORAGE_KEYS } from './utils/storage';
|
||||
export * from './utils/date';
|
||||
|
||||
// Stores
|
||||
export * from './stores/userStore';
|
||||
export * from './stores/settingsStore';
|
||||
|
||||
// Schemas
|
||||
export * from './schemas/auth';
|
||||
export * from './schemas/user';
|
||||
|
||||
// Services
|
||||
export { default as authService } from './services/authService';
|
||||
export { default as userService } from './services/userService';
|
||||
|
||||
// Hooks
|
||||
export * from './hooks/useDebounce';
|
||||
export * from './hooks/useThrottle';
|
||||
export * from './hooks/useHaptics';
|
||||
|
||||
// Types
|
||||
export * from './types';
|
||||
|
||||
130
src/schemas/auth.ts
Normal file
130
src/schemas/auth.ts
Normal file
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* 认证相关的 Zod 验证 Schema
|
||||
*/
|
||||
|
||||
import { z } from 'zod';
|
||||
|
||||
/**
|
||||
* 登录表单 Schema
|
||||
*/
|
||||
export const loginSchema = z.object({
|
||||
email: z
|
||||
.string()
|
||||
.min(1, '请输入邮箱')
|
||||
.email('请输入有效的邮箱地址'),
|
||||
password: z
|
||||
.string()
|
||||
.min(6, '密码至少6个字符')
|
||||
.max(20, '密码最多20个字符'),
|
||||
rememberMe: z.boolean().optional(),
|
||||
});
|
||||
|
||||
/**
|
||||
* 注册表单 Schema
|
||||
*/
|
||||
export const registerSchema = z
|
||||
.object({
|
||||
username: z
|
||||
.string()
|
||||
.min(3, '用户名至少3个字符')
|
||||
.max(20, '用户名最多20个字符')
|
||||
.regex(/^[a-zA-Z0-9_]+$/, '用户名只能包含字母、数字和下划线'),
|
||||
email: z
|
||||
.string()
|
||||
.min(1, '请输入邮箱')
|
||||
.email('请输入有效的邮箱地址'),
|
||||
password: z
|
||||
.string()
|
||||
.min(6, '密码至少6个字符')
|
||||
.max(20, '密码最多20个字符')
|
||||
.regex(/[A-Z]/, '密码必须包含至少一个大写字母')
|
||||
.regex(/[a-z]/, '密码必须包含至少一个小写字母')
|
||||
.regex(/[0-9]/, '密码必须包含至少一个数字'),
|
||||
confirmPassword: z.string().min(1, '请确认密码'),
|
||||
agreeToTerms: z.boolean().refine((val) => val === true, {
|
||||
message: '请同意服务条款',
|
||||
}),
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: '两次输入的密码不一致',
|
||||
path: ['confirmPassword'],
|
||||
});
|
||||
|
||||
/**
|
||||
* 忘记密码 Schema
|
||||
*/
|
||||
export const forgotPasswordSchema = z.object({
|
||||
email: z
|
||||
.string()
|
||||
.min(1, '请输入邮箱')
|
||||
.email('请输入有效的邮箱地址'),
|
||||
});
|
||||
|
||||
/**
|
||||
* 重置密码 Schema
|
||||
*/
|
||||
export const resetPasswordSchema = z
|
||||
.object({
|
||||
code: z
|
||||
.string()
|
||||
.min(6, '验证码为6位')
|
||||
.max(6, '验证码为6位')
|
||||
.regex(/^\d{6}$/, '验证码必须是6位数字'),
|
||||
password: z
|
||||
.string()
|
||||
.min(6, '密码至少6个字符')
|
||||
.max(20, '密码最多20个字符'),
|
||||
confirmPassword: z.string().min(1, '请确认密码'),
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: '两次输入的密码不一致',
|
||||
path: ['confirmPassword'],
|
||||
});
|
||||
|
||||
/**
|
||||
* 修改密码 Schema
|
||||
*/
|
||||
export const changePasswordSchema = z
|
||||
.object({
|
||||
oldPassword: z.string().min(1, '请输入当前密码'),
|
||||
newPassword: z
|
||||
.string()
|
||||
.min(6, '新密码至少6个字符')
|
||||
.max(20, '新密码最多20个字符'),
|
||||
confirmPassword: z.string().min(1, '请确认新密码'),
|
||||
})
|
||||
.refine((data) => data.newPassword === data.confirmPassword, {
|
||||
message: '两次输入的密码不一致',
|
||||
path: ['confirmPassword'],
|
||||
})
|
||||
.refine((data) => data.oldPassword !== data.newPassword, {
|
||||
message: '新密码不能与当前密码相同',
|
||||
path: ['newPassword'],
|
||||
});
|
||||
|
||||
/**
|
||||
* 手机号登录 Schema
|
||||
*/
|
||||
export const phoneLoginSchema = z.object({
|
||||
phone: z
|
||||
.string()
|
||||
.min(11, '请输入11位手机号')
|
||||
.max(11, '请输入11位手机号')
|
||||
.regex(/^1[3-9]\d{9}$/, '请输入有效的手机号'),
|
||||
code: z
|
||||
.string()
|
||||
.min(6, '验证码为6位')
|
||||
.max(6, '验证码为6位')
|
||||
.regex(/^\d{6}$/, '验证码必须是6位数字'),
|
||||
});
|
||||
|
||||
/**
|
||||
* TypeScript 类型推断
|
||||
*/
|
||||
export type LoginFormData = z.infer<typeof loginSchema>;
|
||||
export type RegisterFormData = z.infer<typeof registerSchema>;
|
||||
export type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>;
|
||||
export type ResetPasswordFormData = z.infer<typeof resetPasswordSchema>;
|
||||
export type ChangePasswordFormData = z.infer<typeof changePasswordSchema>;
|
||||
export type PhoneLoginFormData = z.infer<typeof phoneLoginSchema>;
|
||||
|
||||
76
src/schemas/user.ts
Normal file
76
src/schemas/user.ts
Normal file
@@ -0,0 +1,76 @@
|
||||
/**
|
||||
* 用户相关的 Zod 验证 Schema
|
||||
*/
|
||||
|
||||
import { z } from 'zod';
|
||||
|
||||
/**
|
||||
* 用户信息 Schema
|
||||
*/
|
||||
export const userSchema = z.object({
|
||||
id: z.string(),
|
||||
username: z.string(),
|
||||
email: z.string().email(),
|
||||
avatar: z.string().url().optional(),
|
||||
nickname: z.string().optional(),
|
||||
phone: z.string().optional(),
|
||||
createdAt: z.string().optional(),
|
||||
});
|
||||
|
||||
/**
|
||||
* 更新用户资料 Schema
|
||||
*/
|
||||
export const updateProfileSchema = z.object({
|
||||
nickname: z
|
||||
.string()
|
||||
.min(2, '昵称至少2个字符')
|
||||
.max(20, '昵称最多20个字符')
|
||||
.optional(),
|
||||
avatar: z.string().url('请输入有效的头像URL').optional(),
|
||||
phone: z
|
||||
.string()
|
||||
.regex(/^1[3-9]\d{9}$/, '请输入有效的手机号')
|
||||
.optional()
|
||||
.or(z.literal('')),
|
||||
bio: z.string().max(200, '个人简介最多200个字符').optional(),
|
||||
});
|
||||
|
||||
/**
|
||||
* 绑定手机号 Schema
|
||||
*/
|
||||
export const bindPhoneSchema = z.object({
|
||||
phone: z
|
||||
.string()
|
||||
.min(11, '请输入11位手机号')
|
||||
.max(11, '请输入11位手机号')
|
||||
.regex(/^1[3-9]\d{9}$/, '请输入有效的手机号'),
|
||||
code: z
|
||||
.string()
|
||||
.min(6, '验证码为6位')
|
||||
.max(6, '验证码为6位')
|
||||
.regex(/^\d{6}$/, '验证码必须是6位数字'),
|
||||
});
|
||||
|
||||
/**
|
||||
* 绑定邮箱 Schema
|
||||
*/
|
||||
export const bindEmailSchema = z.object({
|
||||
email: z
|
||||
.string()
|
||||
.min(1, '请输入邮箱')
|
||||
.email('请输入有效的邮箱地址'),
|
||||
code: z
|
||||
.string()
|
||||
.min(6, '验证码为6位')
|
||||
.max(6, '验证码为6位')
|
||||
.regex(/^\d{6}$/, '验证码必须是6位数字'),
|
||||
});
|
||||
|
||||
/**
|
||||
* TypeScript 类型推断
|
||||
*/
|
||||
export type User = z.infer<typeof userSchema>;
|
||||
export type UpdateProfileFormData = z.infer<typeof updateProfileSchema>;
|
||||
export type BindPhoneFormData = z.infer<typeof bindPhoneSchema>;
|
||||
export type BindEmailFormData = z.infer<typeof bindEmailSchema>;
|
||||
|
||||
134
src/services/authService.ts
Normal file
134
src/services/authService.ts
Normal file
@@ -0,0 +1,134 @@
|
||||
/**
|
||||
* 认证服务
|
||||
* 处理登录、注册等认证相关的 API 请求
|
||||
*/
|
||||
|
||||
import { request } from '@/src/utils/api';
|
||||
import type {
|
||||
LoginFormData,
|
||||
RegisterFormData,
|
||||
ForgotPasswordFormData,
|
||||
ResetPasswordFormData,
|
||||
ChangePasswordFormData,
|
||||
PhoneLoginFormData,
|
||||
} from '@/src/schemas/auth';
|
||||
import type { User } from '@/src/schemas/user';
|
||||
|
||||
/**
|
||||
* API 响应接口
|
||||
*/
|
||||
interface ApiResponse<T = any> {
|
||||
code: number;
|
||||
message: string;
|
||||
data: T;
|
||||
}
|
||||
|
||||
/**
|
||||
* 登录响应
|
||||
*/
|
||||
interface LoginResponse {
|
||||
user: User;
|
||||
token: string;
|
||||
refreshToken?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 认证服务类
|
||||
*/
|
||||
class AuthService {
|
||||
/**
|
||||
* 邮箱登录
|
||||
*/
|
||||
async login(data: LoginFormData): Promise<LoginResponse> {
|
||||
const response = await request.post<ApiResponse<LoginResponse>>(
|
||||
'/auth/login',
|
||||
data
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 手机号登录
|
||||
*/
|
||||
async phoneLogin(data: PhoneLoginFormData): Promise<LoginResponse> {
|
||||
const response = await request.post<ApiResponse<LoginResponse>>(
|
||||
'/auth/phone-login',
|
||||
data
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 注册
|
||||
*/
|
||||
async register(data: RegisterFormData): Promise<LoginResponse> {
|
||||
const response = await request.post<ApiResponse<LoginResponse>>(
|
||||
'/auth/register',
|
||||
data
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 登出
|
||||
*/
|
||||
async logout(): Promise<void> {
|
||||
await request.post('/auth/logout');
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送忘记密码邮件
|
||||
*/
|
||||
async forgotPassword(data: ForgotPasswordFormData): Promise<void> {
|
||||
await request.post('/auth/forgot-password', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置密码
|
||||
*/
|
||||
async resetPassword(data: ResetPasswordFormData): Promise<void> {
|
||||
await request.post('/auth/reset-password', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改密码
|
||||
*/
|
||||
async changePassword(data: ChangePasswordFormData): Promise<void> {
|
||||
await request.post('/auth/change-password', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送验证码
|
||||
*/
|
||||
async sendVerificationCode(phone: string): Promise<void> {
|
||||
await request.post('/auth/send-code', { phone });
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新 token
|
||||
*/
|
||||
async refreshToken(refreshToken: string): Promise<{ token: string }> {
|
||||
const response = await request.post<ApiResponse<{ token: string }>>(
|
||||
'/auth/refresh-token',
|
||||
{ refreshToken }
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证 token 是否有效
|
||||
*/
|
||||
async verifyToken(): Promise<boolean> {
|
||||
try {
|
||||
await request.get('/auth/verify-token');
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 导出单例
|
||||
export const authService = new AuthService();
|
||||
export default authService;
|
||||
|
||||
90
src/services/userService.ts
Normal file
90
src/services/userService.ts
Normal file
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* 用户服务
|
||||
* 处理用户信息相关的 API 请求
|
||||
*/
|
||||
|
||||
import { request } from '@/src/utils/api';
|
||||
import type { User, UpdateProfileFormData } from '@/src/schemas/user';
|
||||
|
||||
/**
|
||||
* API 响应接口
|
||||
*/
|
||||
interface ApiResponse<T = any> {
|
||||
code: number;
|
||||
message: string;
|
||||
data: T;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户服务类
|
||||
*/
|
||||
class UserService {
|
||||
/**
|
||||
* 获取当前用户信息
|
||||
*/
|
||||
async getCurrentUser(): Promise<User> {
|
||||
const response = await request.get<ApiResponse<User>>('/user/me');
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户信息（通过 ID）
|
||||
*/
|
||||
async getUserById(userId: string): Promise<User> {
|
||||
const response = await request.get<ApiResponse<User>>(`/user/${userId}`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新用户资料
|
||||
*/
|
||||
async updateProfile(data: UpdateProfileFormData): Promise<User> {
|
||||
const response = await request.put<ApiResponse<User>>('/user/profile', data);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传头像
|
||||
*/
|
||||
async uploadAvatar(file: File | Blob): Promise<{ url: string }> {
|
||||
const formData = new FormData();
|
||||
formData.append('avatar', file);
|
||||
|
||||
const response = await request.post<ApiResponse<{ url: string }>>(
|
||||
'/user/avatar',
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
}
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定手机号
|
||||
*/
|
||||
async bindPhone(phone: string, code: string): Promise<void> {
|
||||
await request.post('/user/bind-phone', { phone, code });
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定邮箱
|
||||
*/
|
||||
async bindEmail(email: string, code: string): Promise<void> {
|
||||
await request.post('/user/bind-email', { email, code });
|
||||
}
|
||||
|
||||
/**
|
||||
* 注销账号
|
||||
*/
|
||||
async deleteAccount(): Promise<void> {
|
||||
await request.delete('/user/account');
|
||||
}
|
||||
}
|
||||
|
||||
// 导出单例
|
||||
export const userService = new UserService();
|
||||
export default userService;
|
||||
|
||||
147
src/stores/settingsStore.ts
Normal file
147
src/stores/settingsStore.ts
Normal file
@@ -0,0 +1,147 @@
|
||||
/**
|
||||
* 应用设置状态管理
|
||||
* 使用 Zustand + AsyncStorage 持久化
|
||||
*/
|
||||
|
||||
import { create } from 'zustand';
|
||||
import { persist, createJSONStorage } from 'zustand/middleware';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
/**
|
||||
* 主题类型
|
||||
*/
|
||||
export type Theme = 'light' | 'dark' | 'auto';
|
||||
|
||||
/**
|
||||
* 语言类型
|
||||
*/
|
||||
export type Language = 'zh-CN' | 'en-US';
|
||||
|
||||
/**
|
||||
* 设置状态接口
|
||||
*/
|
||||
interface SettingsState {
|
||||
// 状态
|
||||
theme: Theme;
|
||||
language: Language;
|
||||
notificationsEnabled: boolean;
|
||||
soundEnabled: boolean;
|
||||
hapticsEnabled: boolean;
|
||||
|
||||
// 操作
|
||||
setTheme: (theme: Theme) => void;
|
||||
setLanguage: (language: Language) => void;
|
||||
setNotificationsEnabled: (enabled: boolean) => void;
|
||||
setSoundEnabled: (enabled: boolean) => void;
|
||||
setHapticsEnabled: (enabled: boolean) => void;
|
||||
resetSettings: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 默认设置
|
||||
*/
|
||||
const DEFAULT_SETTINGS = {
|
||||
theme: 'auto' as Theme,
|
||||
language: 'zh-CN' as Language,
|
||||
notificationsEnabled: true,
|
||||
soundEnabled: true,
|
||||
hapticsEnabled: true,
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置状态 Store
|
||||
*/
|
||||
export const useSettingsStore = create<SettingsState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
// 初始状态
|
||||
...DEFAULT_SETTINGS,
|
||||
|
||||
// 设置主题
|
||||
setTheme: (theme) => {
|
||||
set({ theme });
|
||||
if (__DEV__) {
|
||||
console.log('🎨 Theme changed:', theme);
|
||||
}
|
||||
},
|
||||
|
||||
// 设置语言
|
||||
setLanguage: (language) => {
|
||||
set({ language });
|
||||
if (__DEV__) {
|
||||
console.log('🌐 Language changed:', language);
|
||||
}
|
||||
},
|
||||
|
||||
// 设置通知开关
|
||||
setNotificationsEnabled: (enabled) => {
|
||||
set({ notificationsEnabled: enabled });
|
||||
if (__DEV__) {
|
||||
console.log('🔔 Notifications:', enabled ? 'enabled' : 'disabled');
|
||||
}
|
||||
},
|
||||
|
||||
// 设置声音开关
|
||||
setSoundEnabled: (enabled) => {
|
||||
set({ soundEnabled: enabled });
|
||||
if (__DEV__) {
|
||||
console.log('🔊 Sound:', enabled ? 'enabled' : 'disabled');
|
||||
}
|
||||
},
|
||||
|
||||
// 设置触觉反馈开关
|
||||
setHapticsEnabled: (enabled) => {
|
||||
set({ hapticsEnabled: enabled });
|
||||
if (__DEV__) {
|
||||
console.log('📳 Haptics:', enabled ? 'enabled' : 'disabled');
|
||||
}
|
||||
},
|
||||
|
||||
// 重置所有设置
|
||||
resetSettings: () => {
|
||||
set(DEFAULT_SETTINGS);
|
||||
if (__DEV__) {
|
||||
console.log('🔄 Settings reset to default');
|
||||
}
|
||||
},
|
||||
}),
|
||||
{
|
||||
name: 'settings-storage',
|
||||
storage: createJSONStorage(() => AsyncStorage),
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
/**
|
||||
* 选择器 Hooks
|
||||
*/
|
||||
|
||||
// 获取主题
|
||||
export const useTheme = () => useSettingsStore((state) => state.theme);
|
||||
|
||||
// 获取语言
|
||||
export const useLanguage = () => useSettingsStore((state) => state.language);
|
||||
|
||||
// 获取通知状态
|
||||
export const useNotificationsEnabled = () =>
|
||||
useSettingsStore((state) => state.notificationsEnabled);
|
||||
|
||||
// 获取声音状态
|
||||
export const useSoundEnabled = () =>
|
||||
useSettingsStore((state) => state.soundEnabled);
|
||||
|
||||
// 获取触觉反馈状态
|
||||
export const useHapticsEnabled = () =>
|
||||
useSettingsStore((state) => state.hapticsEnabled);
|
||||
|
||||
// 获取设置操作方法
|
||||
export const useSettingsActions = () =>
|
||||
useSettingsStore((state) => ({
|
||||
setTheme: state.setTheme,
|
||||
setLanguage: state.setLanguage,
|
||||
setNotificationsEnabled: state.setNotificationsEnabled,
|
||||
setSoundEnabled: state.setSoundEnabled,
|
||||
setHapticsEnabled: state.setHapticsEnabled,
|
||||
resetSettings: state.resetSettings,
|
||||
}));
|
||||
|
||||
142
src/stores/userStore.ts
Normal file
142
src/stores/userStore.ts
Normal file
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* 用户状态管理
|
||||
* 使用 Zustand + AsyncStorage 持久化
|
||||
*/
|
||||
|
||||
import { create } from 'zustand';
|
||||
import { persist, createJSONStorage } from 'zustand/middleware';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
/**
|
||||
* 用户信息接口
|
||||
*/
|
||||
export interface User {
|
||||
id: string;
|
||||
username: string;
|
||||
email: string;
|
||||
avatar?: string;
|
||||
nickname?: string;
|
||||
phone?: string;
|
||||
createdAt?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户状态接口
|
||||
*/
|
||||
interface UserState {
|
||||
// 状态
|
||||
user: User | null;
|
||||
isLoggedIn: boolean;
|
||||
token: string | null;
|
||||
|
||||
// 操作
|
||||
setUser: (user: User) => void;
|
||||
setToken: (token: string) => void;
|
||||
login: (user: User, token: string) => void;
|
||||
logout: () => void;
|
||||
updateUser: (updates: Partial<User>) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户状态 Store
|
||||
*/
|
||||
export const useUserStore = create<UserState>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
// 初始状态
|
||||
user: null,
|
||||
isLoggedIn: false,
|
||||
token: null,
|
||||
|
||||
// 设置用户信息
|
||||
setUser: (user) => {
|
||||
set({ user, isLoggedIn: true });
|
||||
},
|
||||
|
||||
// 设置 token
|
||||
setToken: (token) => {
|
||||
set({ token });
|
||||
},
|
||||
|
||||
// 登录
|
||||
login: (user, token) => {
|
||||
set({
|
||||
user,
|
||||
token,
|
||||
isLoggedIn: true,
|
||||
});
|
||||
|
||||
// 同时保存 token 到 AsyncStorage（用于 API 请求）
|
||||
AsyncStorage.setItem('auth_token', token);
|
||||
|
||||
if (__DEV__) {
|
||||
console.log('✅ User logged in:', user.username);
|
||||
}
|
||||
},
|
||||
|
||||
// 登出
|
||||
logout: () => {
|
||||
set({
|
||||
user: null,
|
||||
token: null,
|
||||
isLoggedIn: false,
|
||||
});
|
||||
|
||||
// 清除 AsyncStorage 中的 token
|
||||
AsyncStorage.removeItem('auth_token');
|
||||
|
||||
if (__DEV__) {
|
||||
console.log('👋 User logged out');
|
||||
}
|
||||
},
|
||||
|
||||
// 更新用户信息
|
||||
updateUser: (updates) => {
|
||||
const currentUser = get().user;
|
||||
if (currentUser) {
|
||||
set({
|
||||
user: { ...currentUser, ...updates },
|
||||
});
|
||||
|
||||
if (__DEV__) {
|
||||
console.log('📝 User updated:', updates);
|
||||
}
|
||||
}
|
||||
},
|
||||
}),
|
||||
{
|
||||
name: 'user-storage', // AsyncStorage 中的键名
|
||||
storage: createJSONStorage(() => AsyncStorage),
|
||||
// 可以选择性地持久化某些字段
|
||||
partialize: (state) => ({
|
||||
user: state.user,
|
||||
token: state.token,
|
||||
isLoggedIn: state.isLoggedIn,
|
||||
}),
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
/**
|
||||
* 选择器 Hooks（优化性能，避免不必要的重渲染）
|
||||
*/
|
||||
|
||||
// 获取用户信息
|
||||
export const useUser = () => useUserStore((state) => state.user);
|
||||
|
||||
// 获取登录状态
|
||||
export const useIsLoggedIn = () => useUserStore((state) => state.isLoggedIn);
|
||||
|
||||
// 获取 token
|
||||
export const useToken = () => useUserStore((state) => state.token);
|
||||
|
||||
// 获取用户操作方法
|
||||
export const useUserActions = () =>
|
||||
useUserStore((state) => ({
|
||||
setUser: state.setUser,
|
||||
setToken: state.setToken,
|
||||
login: state.login,
|
||||
logout: state.logout,
|
||||
updateUser: state.updateUser,
|
||||
}));
|
||||
|
||||
81
src/types/index.ts
Normal file
81
src/types/index.ts
Normal file
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* 全局类型定义
|
||||
*/
|
||||
|
||||
/**
|
||||
* API 响应基础接口
|
||||
*/
|
||||
export interface ApiResponse<T = any> {
|
||||
code: number;
|
||||
message: string;
|
||||
data: T;
|
||||
timestamp?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页参数
|
||||
*/
|
||||
export interface PaginationParams {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
sortBy?: string;
|
||||
sortOrder?: 'asc' | 'desc';
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页响应
|
||||
*/
|
||||
export interface PaginatedResponse<T> {
|
||||
items: T[];
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
totalPages: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 错误响应
|
||||
*/
|
||||
export interface ErrorResponse {
|
||||
code: number;
|
||||
message: string;
|
||||
errors?: Record<string, string[]>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传文件响应
|
||||
*/
|
||||
export interface UploadResponse {
|
||||
url: string;
|
||||
filename: string;
|
||||
size: number;
|
||||
mimeType: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航参数类型
|
||||
*/
|
||||
export type RootStackParamList = {
|
||||
Home: undefined;
|
||||
Profile: { userId: string };
|
||||
Settings: undefined;
|
||||
Login: undefined;
|
||||
Register: undefined;
|
||||
// 添加更多路由...
|
||||
};
|
||||
|
||||
/**
|
||||
* 环境变量类型
|
||||
*/
|
||||
declare global {
|
||||
namespace NodeJS {
|
||||
interface ProcessEnv {
|
||||
EXPO_PUBLIC_API_URL: string;
|
||||
EXPO_PUBLIC_APP_NAME: string;
|
||||
EXPO_PUBLIC_APP_VERSION: string;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
|
||||
144
src/utils/api.ts
Normal file
144
src/utils/api.ts
Normal file
@@ -0,0 +1,144 @@
|
||||
/**
|
||||
* Axios API 配置
|
||||
* 统一管理 HTTP 请求
|
||||
*/
|
||||
|
||||
import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
// API 基础配置
|
||||
const API_CONFIG = {
|
||||
baseURL: process.env.EXPO_PUBLIC_API_URL || 'https://api.example.com',
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
};
|
||||
|
||||
// 创建 axios 实例
|
||||
const api = axios.create(API_CONFIG);
|
||||
|
||||
/**
|
||||
* 请求拦截器
|
||||
* 在请求发送前添加 token 等信息
|
||||
*/
|
||||
api.interceptors.request.use(
|
||||
async (config) => {
|
||||
try {
|
||||
// 从本地存储获取 token
|
||||
const token = await AsyncStorage.getItem('auth_token');
|
||||
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
// 打印请求信息（开发环境）
|
||||
if (__DEV__) {
|
||||
console.log('📤 API Request:', {
|
||||
method: config.method?.toUpperCase(),
|
||||
url: config.url,
|
||||
data: config.data,
|
||||
});
|
||||
}
|
||||
|
||||
return config;
|
||||
} catch (error) {
|
||||
console.error('Request interceptor error:', error);
|
||||
return config;
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
console.error('Request error:', error);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 响应拦截器
|
||||
* 统一处理响应和错误
|
||||
*/
|
||||
api.interceptors.response.use(
|
||||
(response: AxiosResponse) => {
|
||||
// 打印响应信息（开发环境）
|
||||
if (__DEV__) {
|
||||
console.log('📥 API Response:', {
|
||||
url: response.config.url,
|
||||
status: response.status,
|
||||
data: response.data,
|
||||
});
|
||||
}
|
||||
|
||||
// 返回响应数据
|
||||
return response.data;
|
||||
},
|
||||
async (error: AxiosError) => {
|
||||
// 打印错误信息
|
||||
console.error('❌ API Error:', {
|
||||
url: error.config?.url,
|
||||
status: error.response?.status,
|
||||
message: error.message,
|
||||
data: error.response?.data,
|
||||
});
|
||||
|
||||
// 处理不同的错误状态码
|
||||
if (error.response) {
|
||||
switch (error.response.status) {
|
||||
case 401:
|
||||
// 未授权，清除 token 并跳转到登录页
|
||||
await AsyncStorage.removeItem('auth_token');
|
||||
// TODO: 导航到登录页
|
||||
// router.replace('/login');
|
||||
break;
|
||||
|
||||
case 403:
|
||||
// 禁止访问
|
||||
console.error('Access forbidden');
|
||||
break;
|
||||
|
||||
case 404:
|
||||
// 资源不存在
|
||||
console.error('Resource not found');
|
||||
break;
|
||||
|
||||
case 500:
|
||||
// 服务器错误
|
||||
console.error('Server error');
|
||||
break;
|
||||
|
||||
default:
|
||||
console.error('Unknown error');
|
||||
}
|
||||
} else if (error.request) {
|
||||
// 请求已发送但没有收到响应
|
||||
console.error('No response received');
|
||||
} else {
|
||||
// 请求配置出错
|
||||
console.error('Request configuration error');
|
||||
}
|
||||
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 通用请求方法
|
||||
*/
|
||||
export const request = {
|
||||
get: <T = any>(url: string, config?: AxiosRequestConfig) =>
|
||||
api.get<T, T>(url, config),
|
||||
|
||||
post: <T = any>(url: string, data?: any, config?: AxiosRequestConfig) =>
|
||||
api.post<T, T>(url, data, config),
|
||||
|
||||
put: <T = any>(url: string, data?: any, config?: AxiosRequestConfig) =>
|
||||
api.put<T, T>(url, data, config),
|
||||
|
||||
delete: <T = any>(url: string, config?: AxiosRequestConfig) =>
|
||||
api.delete<T, T>(url, config),
|
||||
|
||||
patch: <T = any>(url: string, data?: any, config?: AxiosRequestConfig) =>
|
||||
api.patch<T, T>(url, data, config),
|
||||
};
|
||||
|
||||
export default api;
|
||||
|
||||
219
src/utils/date.ts
Normal file
219
src/utils/date.ts
Normal file
@@ -0,0 +1,219 @@
|
||||
/**
|
||||
* Day.js 日期工具函数
|
||||
* 统一管理日期格式化和处理
|
||||
*/
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import calendar from 'dayjs/plugin/calendar';
|
||||
import duration from 'dayjs/plugin/duration';
|
||||
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
|
||||
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
|
||||
// 扩展插件
|
||||
dayjs.extend(relativeTime);
|
||||
dayjs.extend(calendar);
|
||||
dayjs.extend(duration);
|
||||
dayjs.extend(isSameOrBefore);
|
||||
dayjs.extend(isSameOrAfter);
|
||||
|
||||
// 设置默认语言为中文
|
||||
dayjs.locale('zh-cn');
|
||||
|
||||
/**
|
||||
* 日期格式常量
|
||||
*/
|
||||
export const DATE_FORMATS = {
|
||||
FULL: 'YYYY-MM-DD HH:mm:ss',
|
||||
DATE: 'YYYY-MM-DD',
|
||||
TIME: 'HH:mm:ss',
|
||||
DATE_TIME: 'YYYY-MM-DD HH:mm',
|
||||
MONTH_DAY: 'MM-DD',
|
||||
HOUR_MINUTE: 'HH:mm',
|
||||
YEAR_MONTH: 'YYYY-MM',
|
||||
CHINESE_DATE: 'YYYY年MM月DD日',
|
||||
CHINESE_FULL: 'YYYY年MM月DD日 HH:mm:ss',
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* 格式化日期
|
||||
* @param date 日期（Date、时间戳或字符串）
|
||||
* @param format 格式（默认：YYYY-MM-DD HH:mm:ss）
|
||||
*/
|
||||
export const formatDate = (
|
||||
date: Date | string | number,
|
||||
format: string = DATE_FORMATS.FULL
|
||||
): string => {
|
||||
return dayjs(date).format(format);
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化为相对时间（如：3分钟前、2小时前）
|
||||
*/
|
||||
export const formatRelativeTime = (date: Date | string | number): string => {
|
||||
return dayjs(date).fromNow();
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化为日历时间（如：今天、昨天、上周）
|
||||
*/
|
||||
export const formatCalendarTime = (date: Date | string | number): string => {
|
||||
return dayjs(date).calendar(null, {
|
||||
sameDay: '[今天] HH:mm',
|
||||
lastDay: '[昨天] HH:mm',
|
||||
lastWeek: 'MM-DD HH:mm',
|
||||
sameElse: 'YYYY-MM-DD HH:mm',
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化聊天时间
|
||||
* 今天：显示时间
|
||||
* 昨天：显示"昨天 + 时间"
|
||||
* 本年：显示"月-日 时间"
|
||||
* 往年：显示"年-月-日"
|
||||
*/
|
||||
export const formatChatTime = (timestamp: number | string | Date): string => {
|
||||
const date = dayjs(timestamp);
|
||||
const now = dayjs();
|
||||
|
||||
if (date.isSame(now, 'day')) {
|
||||
// 今天
|
||||
return date.format('HH:mm');
|
||||
} else if (date.isSame(now.subtract(1, 'day'), 'day')) {
|
||||
// 昨天
|
||||
return '昨天 ' + date.format('HH:mm');
|
||||
} else if (date.isSame(now, 'year')) {
|
||||
// 本年
|
||||
return date.format('MM-DD HH:mm');
|
||||
} else {
|
||||
// 往年
|
||||
return date.format('YYYY-MM-DD');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取时间差（返回对象）
|
||||
*/
|
||||
export const getTimeDiff = (
|
||||
startDate: Date | string | number,
|
||||
endDate: Date | string | number = new Date()
|
||||
) => {
|
||||
const start = dayjs(startDate);
|
||||
const end = dayjs(endDate);
|
||||
const diff = end.diff(start);
|
||||
|
||||
const duration = dayjs.duration(diff);
|
||||
|
||||
return {
|
||||
years: duration.years(),
|
||||
months: duration.months(),
|
||||
days: duration.days(),
|
||||
hours: duration.hours(),
|
||||
minutes: duration.minutes(),
|
||||
seconds: duration.seconds(),
|
||||
milliseconds: duration.milliseconds(),
|
||||
totalDays: Math.floor(duration.asDays()),
|
||||
totalHours: Math.floor(duration.asHours()),
|
||||
totalMinutes: Math.floor(duration.asMinutes()),
|
||||
totalSeconds: Math.floor(duration.asSeconds()),
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 判断是否是今天
|
||||
*/
|
||||
export const isToday = (date: Date | string | number): boolean => {
|
||||
return dayjs(date).isSame(dayjs(), 'day');
|
||||
};
|
||||
|
||||
/**
|
||||
* 判断是否是昨天
|
||||
*/
|
||||
export const isYesterday = (date: Date | string | number): boolean => {
|
||||
return dayjs(date).isSame(dayjs().subtract(1, 'day'), 'day');
|
||||
};
|
||||
|
||||
/**
|
||||
* 判断是否是本周
|
||||
*/
|
||||
export const isThisWeek = (date: Date | string | number): boolean => {
|
||||
return dayjs(date).isSame(dayjs(), 'week');
|
||||
};
|
||||
|
||||
/**
|
||||
* 判断是否是本月
|
||||
*/
|
||||
export const isThisMonth = (date: Date | string | number): boolean => {
|
||||
return dayjs(date).isSame(dayjs(), 'month');
|
||||
};
|
||||
|
||||
/**
|
||||
* 判断是否是本年
|
||||
*/
|
||||
export const isThisYear = (date: Date | string | number): boolean => {
|
||||
return dayjs(date).isSame(dayjs(), 'year');
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取日期范围的开始和结束
|
||||
*/
|
||||
export const getDateRange = (type: 'day' | 'week' | 'month' | 'year') => {
|
||||
const now = dayjs();
|
||||
return {
|
||||
start: now.startOf(type).toDate(),
|
||||
end: now.endOf(type).toDate(),
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 添加时间
|
||||
*/
|
||||
export const addTime = (
|
||||
date: Date | string | number,
|
||||
amount: number,
|
||||
unit: dayjs.ManipulateType
|
||||
): Date => {
|
||||
return dayjs(date).add(amount, unit).toDate();
|
||||
};
|
||||
|
||||
/**
|
||||
* 减去时间
|
||||
*/
|
||||
export const subtractTime = (
|
||||
date: Date | string | number,
|
||||
amount: number,
|
||||
unit: dayjs.ManipulateType
|
||||
): Date => {
|
||||
return dayjs(date).subtract(amount, unit).toDate();
|
||||
};
|
||||
|
||||
/**
|
||||
* 判断日期是否在范围内
|
||||
*/
|
||||
export const isBetween = (
|
||||
date: Date | string | number,
|
||||
startDate: Date | string | number,
|
||||
endDate: Date | string | number
|
||||
): boolean => {
|
||||
const target = dayjs(date);
|
||||
return target.isAfter(startDate) && target.isBefore(endDate);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取当前时间戳（毫秒）
|
||||
*/
|
||||
export const now = (): number => {
|
||||
return dayjs().valueOf();
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取当前时间戳（秒）
|
||||
*/
|
||||
export const nowInSeconds = (): number => {
|
||||
return Math.floor(dayjs().valueOf() / 1000);
|
||||
};
|
||||
|
||||
export default dayjs;
|
||||
|
||||
181
src/utils/storage.ts
Normal file
181
src/utils/storage.ts
Normal file
@@ -0,0 +1,181 @@
|
||||
/**
|
||||
* AsyncStorage 封装工具
|
||||
* 提供类型安全的本地存储操作
|
||||
*/
|
||||
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
/**
|
||||
* 存储键名常量
|
||||
*/
|
||||
export const STORAGE_KEYS = {
|
||||
AUTH_TOKEN: 'auth_token',
|
||||
USER_INFO: 'user_info',
|
||||
SETTINGS: 'settings',
|
||||
THEME: 'theme',
|
||||
LANGUAGE: 'language',
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Storage 工具类
|
||||
*/
|
||||
class Storage {
|
||||
/**
|
||||
* 存储字符串
|
||||
*/
|
||||
static async setString(key: string, value: string): Promise<void> {
|
||||
try {
|
||||
await AsyncStorage.setItem(key, value);
|
||||
if (__DEV__) {
|
||||
console.log(`💾 Storage set: ${key}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Storage setString error for key "${key}":`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取字符串
|
||||
*/
|
||||
static async getString(key: string): Promise<string | null> {
|
||||
try {
|
||||
const value = await AsyncStorage.getItem(key);
|
||||
if (__DEV__) {
|
||||
console.log(`📖 Storage get: ${key}`, value ? '✓' : '✗');
|
||||
}
|
||||
return value;
|
||||
} catch (error) {
|
||||
console.error(`Storage getString error for key "${key}":`, error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 存储对象（自动序列化为 JSON）
|
||||
*/
|
||||
static async setObject<T>(key: string, value: T): Promise<void> {
|
||||
try {
|
||||
const jsonValue = JSON.stringify(value);
|
||||
await AsyncStorage.setItem(key, jsonValue);
|
||||
if (__DEV__) {
|
||||
console.log(`💾 Storage set object: ${key}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Storage setObject error for key "${key}":`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取对象（自动反序列化 JSON）
|
||||
*/
|
||||
static async getObject<T>(key: string): Promise<T | null> {
|
||||
try {
|
||||
const jsonValue = await AsyncStorage.getItem(key);
|
||||
if (jsonValue === null) {
|
||||
return null;
|
||||
}
|
||||
const value = JSON.parse(jsonValue) as T;
|
||||
if (__DEV__) {
|
||||
console.log(`📖 Storage get object: ${key} ✓`);
|
||||
}
|
||||
return value;
|
||||
} catch (error) {
|
||||
console.error(`Storage getObject error for key "${key}":`, error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除指定键
|
||||
*/
|
||||
static async remove(key: string): Promise<void> {
|
||||
try {
|
||||
await AsyncStorage.removeItem(key);
|
||||
if (__DEV__) {
|
||||
console.log(`🗑️ Storage remove: ${key}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Storage remove error for key "${key}":`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空所有存储
|
||||
*/
|
||||
static async clear(): Promise<void> {
|
||||
try {
|
||||
await AsyncStorage.clear();
|
||||
if (__DEV__) {
|
||||
console.log('🗑️ Storage cleared all');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Storage clear error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有键名
|
||||
*/
|
||||
static async getAllKeys(): Promise<string[]> {
|
||||
try {
|
||||
const keys = await AsyncStorage.getAllKeys();
|
||||
if (__DEV__) {
|
||||
console.log('🔑 Storage all keys:', keys);
|
||||
}
|
||||
return keys;
|
||||
} catch (error) {
|
||||
console.error('Storage getAllKeys error:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量获取
|
||||
*/
|
||||
static async multiGet(keys: string[]): Promise<[string, string | null][]> {
|
||||
try {
|
||||
const values = await AsyncStorage.multiGet(keys);
|
||||
return values;
|
||||
} catch (error) {
|
||||
console.error('Storage multiGet error:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量设置
|
||||
*/
|
||||
static async multiSet(keyValuePairs: [string, string][]): Promise<void> {
|
||||
try {
|
||||
await AsyncStorage.multiSet(keyValuePairs);
|
||||
if (__DEV__) {
|
||||
console.log(`💾 Storage multiSet: ${keyValuePairs.length} items`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Storage multiSet error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除
|
||||
*/
|
||||
static async multiRemove(keys: string[]): Promise<void> {
|
||||
try {
|
||||
await AsyncStorage.multiRemove(keys);
|
||||
if (__DEV__) {
|
||||
console.log(`🗑️ Storage multiRemove: ${keys.length} items`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Storage multiRemove error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Storage;
|
||||
|
||||
17
tsconfig.json
Normal file
17
tsconfig.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "expo/tsconfig.base",
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".expo/types/**/*.ts",
|
||||
"expo-env.d.ts"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user