kenan/rn-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: update

Browse Source
This commit is contained in:
echo
2025-11-06 16:37:01 +08:00
parent c0d54b8513
commit 855f289579
59 changed files with 3398 additions and 572 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
README.md
View File

@@ -20,15 +20,28 @@
## ✨ 项目特性
### 核心特性
- 🎯 **Expo Router** - 文件路由系统，类似 Next.js，支持类型安全的导航
- 📘 **TypeScript** - 完整的类型支持，提升代码质量
- 🔥 **EAS Update** - 热更新支持（CodePush 的官方替代方案）
- ⚡ **React Native 新架构** - 启用 Fabric 渲染器和 TurboModules
- 📦 **pnpm** - 快速、节省磁盘空间的包管理器
- 🧭 **标签导航** - 开箱即用的导航示例
- 🎨 **主题支持** - 内置深色/浅色主题切换
- 🎨 **完整主题系统** - 深色/浅色/自动主题切换，完整的颜色配置 🎯
- 📱 **跨平台** - 支持 iOS、Android 和 Web
### 架构特性 🎯
- 📁 **扁平化目录结构** - 清晰的模块组织，符合社区最佳实践
- 🔄 **模块化导出** - 每个目录独立导出，避免循环依赖
- 💾 **双存储系统** - AsyncStorage（持久化）+ SessionStorage（临时）
- 🎨 **主题化组件** - ThemedText 和 ThemedView，自动适配主题
- 🔐 **API 加密** - 请求/响应自动加密解密
- 📊 **状态管理** - Zustand + AsyncStorage 持久化
- ✅ **数据验证** - Zod 表单验证
- 🎯 **类型安全** - 完整的 TypeScript 类型定义
## 🚀 快速开始
### 前置要求
@@ -94,53 +107,100 @@ rn-demo/
│ ├── (tabs)/ # 标签导航组
│ │ ├── index.tsx # 首页 - 热更新演示 ⭐
│ │ ├── two.tsx # 第二个标签页
│ │ ├── demo.tsx # 完整示例页面
│ │ ├── demo.tsx # 完整示例页面 🎯
│ │ ├── paper.tsx # React Native Paper 示例
│ │ └── _layout.tsx # 标签布局
│ ├── test-page.tsx # 测试页面（无 tabs）🎯
│ ├── _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 # 统一导出 ⭐
├── 💻 业务代码目录
├── utils/ # 工具函数
│ ├── network/ # 网络相关
│ │ ├── api.ts # Axios API 配置
│ │ ├── helper.ts # 加密/解密工具
│ │ └── error.ts # 错误处理
│ ├── storage.ts # AsyncStorage 封装
│ ├── sessionStorage.ts # Session Storage 实现 🎯
│ ├── storageManager.ts # 统一存储管理器 🎯
│ ├── config.ts # 配置管理
│ ├── date.ts # Day.js 日期工具
│ ├── common.ts # 通用工具
│ └── index.ts # 统一导出
│
├── stores/ # Zustand 状态管理
│ ├── userStore.ts # 用户状态
│ ├── settingsStore.ts # 应用设置
│ ├── tenantStore.ts # 租户状态 🎯
│ └── index.ts # 统一导出
│
├── schemas/ # Zod 验证规则
│ ├── auth.ts # 认证验证
│ ├── user.ts # 用户验证
│ └── index.ts # 统一导出
│
├── services/ # API 服务层
│ ├── authService.ts # 认证服务
│ ├── userService.ts # 用户服务
│ ├── tenantService.ts # 租户服务 🎯
│ └── index.ts # 统一导出
│
├── hooks/ # 自定义 Hooks
│ ├── useDebounce.ts # 防抖 Hook
│ ├── useThrottle.ts # 节流 Hook
│ ├── useHaptics.ts # 触觉反馈 Hook
│ ├── useRequest.ts # 请求 Hook 🎯
│ ├── useTheme.ts # 主题 Hooks 🎯
│ ├── useColorScheme.ts # 颜色方案 Hook 🎯
│ ├── useColorScheme.web.ts # Web 平台颜色方案 🎯
│ ├── useClientOnlyValue.ts # 客户端值 Hook 🎯
│ ├── useClientOnlyValue.web.ts # Web 平台客户端值 🎯
│ └── index.ts # 统一导出
│
├── types/ # TypeScript 类型
│ ├── api.ts # API 类型定义
│ └── index.ts # 统一导出
│
├── screens/ # 业务页面组件 🎯
│ └── index.ts # 统一导出
│
├── 🧩 components/ # 可复用组件
│ ├── Themed.tsx # 主题化组件
│ ├── Themed.tsx # 主题化组件 🎯
│ ├── ThemeDemo.tsx # 主题演示组件 🎯
│ ├── ExternalLink.tsx # 外部链接组件
│ └── useColorScheme.ts # 主题 Hook
│ └── index.ts # 统一导出 🎯
│
├── 🎨 theme/ # 主题系统 🎯 NEW!
│ ├── index.ts # 统一导出
│ ├── utils.ts # 主题工具函数
│ └── styles.ts # 样式工厂（类似 CSS 类名）
│
├── 🎯 constants/ # 常量配置
│ └── Colors.ts # 颜色主题
│ ├── Colors.ts # 颜色主题（完整配置）🎯
│ └── network.ts # 网络常量
│
├── 🎨 assets/ # 静态资源
│ ├── images/ # 图片资源
│ └── fonts/ # 字体文件
│
├── 📚 docs/ # 项目文档
├── 📚 docs/ # 项目文档 🎯
│ ├── USAGE_EXAMPLES.md # 使用示例
│ └── LIBRARIES.md # 工具库使用指南
│ ├── LIBRARIES.md # 工具库使用指南
│ ├── PROJECT_STRUCTURE_V2.md # 项目结构说明 🎯
│ ├── MIGRATION_TO_FLAT_STRUCTURE.md # 扁平化迁移报告 🎯
│ ├── STORES_ARCHITECTURE.md # Stores 架构设计 🎯
│ ├── STORAGE_GUIDE.md # 存储系统使用指南 🎯
│ ├── THEME_GUIDE.md # 主题系统使用指南 🎯 NEW!
│ └── ... 更多文档
│
├── 🔧 scripts/ # 脚本文件
│ └── proxy-server.js # 代理服务器 🎯
│
├── ⚙️ 配置文件
│ ├── .env.example # 环境变量示例 🎯 NEW!
│ ├── .env.development # 开发环境变量 🎯
│ ├── .env.production # 生产环境变量 🎯
│ ├── app.json # Expo 配置 ⭐
│ ├── eas.json # EAS 构建和更新配置 ⭐
│ ├── package.json # 项目依赖
@@ -153,7 +213,7 @@ rn-demo/
└── CHANGELOG.md # 更新日志
⭐ = 热更新相关的关键文件
🎯 = 新增的文件/目录
🎯 = 新增/更新的文件/目录
```
### 关键目录说明
@@ -163,18 +223,53 @@ rn-demo/
- **`app/_layout.tsx`** - 应用启动时自动检查更新
- **`app/(tabs)/index.tsx`** - 热更新演示页面
- **`app/(tabs)/demo.tsx`** - 完整示例页面，展示所有工具的使用 🎯
- **`app/test-page.tsx`** - 测试页面示例（不包含底部 tabs）🎯
#### 💻 `src/` - 源代码目录 🎯
#### 💻 业务代码目录（扁平化结构）🎯
项目的核心业务逻辑代码，包含：
项目采用扁平化目录结构，所有业务模块都在根目录下：
- **`utils/`** - 工具函数
- 网络请求（Axios + 加密）
- 存储管理（AsyncStorage + SessionStorage）🎯
- 日期处理（Day.js）
- 配置管理
- **`stores/`** - 状态管理（Zustand）
- 用户状态（登录、用户信息）
- 应用设置（主题、语言、触觉反馈）
- 租户状态 🎯
- **`schemas/`** - 数据验证（Zod）
- 认证表单验证
- 用户数据验证
- **`utils/`** - 工具函数（API、存储、日期）
- **`stores/`** - 状态管理（用户、设置）
- **`schemas/`** - 数据验证（认证、用户）
- **`services/`** - API 服务层
- 认证服务
- 用户服务
- 租户服务 🎯
- **`hooks/`** - 自定义 Hooks
- 防抖/节流
- 触觉反馈
- 请求管理 🎯
- 主题 Hooks（useColorScheme, useTheme, useClientOnlyValue）🎯
- **`types/`** - TypeScript 类型定义
- **`index.ts`** - 统一导出所有模块
- **`screens/`** - 业务页面组件 🎯
- **`theme/`** - 主题系统 🎯 NEW!
- 统一的主题配置导出
- 主题工具函数
- 样式工厂（类似 CSS 类名）
每个目录都有 `index.ts` 文件，负责统一导出该目录下的所有模块。
#### 🧩 `components/` - 可复用组件
- **`Themed.tsx`** - 主题化组件（ThemedText, ThemedView）🎯
- **`ThemeDemo.tsx`** - 主题演示组件 🎯
#### 📚 `docs/` - 项目文档 🎯
@@ -183,6 +278,9 @@ rn-demo/
- **使用指南** - 如何使用各个工具
- **代码示例** - 实际的代码示例
- **配置说明** - 项目配置详解
- **架构设计** - Stores 架构、存储系统等
- **主题系统** - 主题配置和样式使用指南 🎯 NEW!
- **迁移报告** - 扁平化目录结构迁移
### 核心文件说明
@@ -195,43 +293,54 @@ rn-demo/
#### 工具配置 🎯
- **`src/index.ts`** - 统一导出，从这里导入所有工具
- **`.env.example`** - 环境变量配置示例
- **各目录的 `index.ts`** - 统一导出，从这里导入所有工具
- **`.env.development` / `.env.production`** - 环境变量配置 🎯
- **`tsconfig.json`** - 配置了路径别名 `@/*`
### 已安装的工具库
项目已安装并配置好以下工具库：
| 类别 | 工具库 | 用途 |
| ------------ | ----------------------------------------- | ------------------- |
| **工具类** | lodash-es | JavaScript 工具函数 |
| | dayjs | 日期处理 |
| | axios | HTTP 请求 |
| **状态管理** | zustand | 轻量级状态管理 |
| **表单处理** | react-hook-form | 表单管理 |
| | zod | 数据验证 |
| **原生功能** | @react-native-async-storage/async-storage | 本地存储 |
| | expo-image | 优化的图片组件 |
| | expo-haptics | 触觉反馈 |
| 类别 | 工具库 | 用途 | 状态 |
| ------------ | ----------------------------------------- | ------------------- | ---- |
| **工具类** | lodash-es | JavaScript 工具函数 | ✅ |
| | dayjs | 日期处理 | ✅ |
| | axios | HTTP 请求 | ✅ |
| **状态管理** | zustand | 轻量级状态管理 | ✅ |
| **表单处理** | react-hook-form | 表单管理 | ✅ |
| | zod | 数据验证 | ✅ |
| **原生功能** | @react-native-async-storage/async-storage | 本地存储 | ✅ |
| | expo-image | 优化的图片组件 | ✅ |
| | expo-haptics | 触觉反馈 | ✅ |
| **UI 组件** | react-native-paper | Material Design 组件 | ✅ |
### 快速开始
1. **查看完整示例** - 运行应用，点击 "完整示例" tab 🎯
1. **查看完整示例** - 运行应用，点击 "Demo" tab 🎯
2. **阅读文档** - 查看 [docs/](./docs/) 目录中的文档
3. **使用工具** - 从 `@/src` 导入所需的工具
3. **使用工具** - 从各个模块目录导入所需的工具
```typescript
// 示例：导入工具
// ✅ 推荐：从模块目录导入
import { Storage, SessionStorage, StorageManager, formatDate } from '@/utils';
import { useUser, useTheme, useLanguage } from '@/stores';
import { authService, userService } from '@/services';
import { useDebounce, useHaptics, useColorScheme, useThemeColors, useClientOnlyValue } from '@/hooks';
import { loginSchema } from '@/schemas';
// ✅ 主题系统：统一从 theme 目录导入 🎯 NEW!
import {
api,
Storage,
formatDate,
useUserStore,
authService,
useDebounce,
useHaptics,
} from '@/src';
useColorScheme,
useThemeColors,
ThemedText,
ThemedView,
commonStyles,
createThemeStyles,
} from '@/theme';
// ✅ 也可以：直接从具体文件导入
import { useUser } from '@/stores/userStore';
import { formatDate } from '@/utils/date';
```
## 🔥 热更新使用指南
@@ -680,8 +789,11 @@ if (update.isAvailable) {
更多详细文档请查看 [docs](./docs/) 目录：
### 使用指南
- **[使用示例](./docs/USAGE_EXAMPLES.md)** - 实际代码示例
- **[工具库使用指南](./docs/LIBRARIES.md)** - 详细的工具库使用方法和示例
- **[存储系统使用指南](./docs/STORAGE_GUIDE.md)** - AsyncStorage 和 SessionStorage 使用 🎯
---