feat: update

2025-11-05 17:24:55 +08:00
parent 61252cdf36
commit ce324c9bb5
42 changed files with 2078 additions and 448 deletions
--- a/README.md
+++ b/README.md
@@ -69,16 +69,19 @@ pnpm start
 #### 方法 2：使用模拟器

 **Android 模拟器：**
+
 ```bash
 pnpm android
 ```

 **iOS 模拟器（仅 macOS）：**
+
 ```bash
 pnpm ios
 ```

 **Web 浏览器：**
+
 ```bash
 pnpm web
 ```
@@ -156,12 +159,15 @@ rn-demo/
 ### 关键目录说明

 #### 📱 `app/` - 路由和页面
+
 - **`app/_layout.tsx`** - 应用启动时自动检查更新
 - **`app/(tabs)/index.tsx`** - 热更新演示页面
 - **`app/(tabs)/demo.tsx`** - 完整示例页面，展示所有工具的使用 🎯

 #### 💻 `src/` - 源代码目录 🎯
+
 项目的核心业务逻辑代码，包含：
+
 - **`utils/`** - 工具函数（API、存储、日期）
 - **`stores/`** - 状态管理（用户、设置）
 - **`schemas/`** - 数据验证（认证、用户）
@@ -171,7 +177,9 @@ rn-demo/
 - **`index.ts`** - 统一导出所有模块

 #### 📚 `docs/` - 项目文档 🎯
+
 完善的项目文档，包含：
+
 - **使用指南** - 如何使用各个工具
 - **代码示例** - 实际的代码示例
 - **配置说明** - 项目配置详解
@@ -179,12 +187,14 @@ rn-demo/
 ### 核心文件说明

 #### 热更新相关 ⭐
+
 - **`app.json`** - Expo 配置，包含热更新设置
 - **`eas.json`** - EAS 构建和更新通道配置
 - **`app/_layout.tsx`** - 自动检查更新逻辑
 - **`app/(tabs)/index.tsx`** - 手动检查更新功能

 #### 工具配置 🎯
+
 - **`src/index.ts`** - 统一导出，从这里导入所有工具
 - **`.env.example`** - 环境变量配置示例
 - **`tsconfig.json`** - 配置了路径别名 `@/*`
@@ -193,17 +203,17 @@ rn-demo/

 项目已安装并配置好以下工具库：

-| 类别 | 工具库 | 用途 |
-|------|--------|------|
-| **工具类** | 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                              | 触觉反馈            |

 ### 快速开始

@@ -243,22 +253,26 @@ 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. 安装到你的设备上

@@ -291,11 +305,11 @@ eas update --channel production --message "v1.0.1: 添加了新功能"

 项目配置了三个更新通道（在 `eas.json` 中定义）：

-| 通道 | 用途 | 适用场景 |
-|------|------|----------|
+| 通道            | 用途     | 适用场景       |
+| --------------- | -------- | -------------- |
 | **development** | 开发环境 | 日常开发和测试 |
-| **preview** | 预览环境 | 内部测试和 QA |
-| **production** | 生产环境 | 正式发布给用户 |
+| **preview**     | 预览环境 | 内部测试和 QA  |
+| **production**  | 生产环境 | 正式发布给用户 |

 不同的构建配置会订阅不同的更新通道：

@@ -404,12 +418,9 @@ button: {
 const [count, setCount] = useState(0);

 // 在 JSX 中添加
-<TouchableOpacity
-  style={styles.button}
-  onPress={() => setCount(count + 1)}
->
+<TouchableOpacity style={styles.button} onPress={() => setCount(count + 1)}>
  <Text style={styles.buttonText}>点击次数: {count}</Text>
-</TouchableOpacity>
+</TouchableOpacity>;
 ```

 修改后，运行 `eas update` 发布更新，然后在应用中检查更新即可看到变化。
@@ -459,16 +470,16 @@ Alert.alert(
    "name": "rn-demo",
    "slug": "rn-demo",
    "version": "1.0.0",
-    "newArchEnabled": true,           // 启用 React Native 新架构
+    "newArchEnabled": true, // 启用 React Native 新架构
    "updates": {
-      "url": "https://u.expo.dev/your-project-id"  // EAS Update 服务器
+      "url": "https://u.expo.dev/your-project-id" // EAS Update 服务器
    },
    "runtimeVersion": {
-      "policy": "appVersion"          // 运行时版本策略
+      "policy": "appVersion" // 运行时版本策略
    },
    "plugins": [
-      "expo-router",                  // Expo Router 插件
-      "expo-updates"                  // 热更新插件
+      "expo-router", // Expo Router 插件
+      "expo-updates" // 热更新插件
    ],
    "ios": {
      "bundleIdentifier": "com.rndemo.app"
@@ -481,6 +492,7 @@ Alert.alert(
 ```

 **配置说明：**
+
 - `updates.url` - EAS Update 服务器地址（运行 `eas init` 后自动生成）
 - `runtimeVersion.policy` - 运行时版本策略，确保更新兼容性
  - `appVersion` - 基于 `version` 字段（当前使用）
@@ -496,22 +508,23 @@ Alert.alert(
 {
  "build": {
    "development": {
-      "developmentClient": true,      // 开发客户端
-      "distribution": "internal",     // 内部分发
-      "channel": "development"        // 订阅 development 更新通道
+      "developmentClient": true, // 开发客户端
+      "distribution": "internal", // 内部分发
+      "channel": "development" // 订阅 development 更新通道
    },
    "preview": {
      "distribution": "internal",
-      "channel": "preview"            // 订阅 preview 更新通道
+      "channel": "preview" // 订阅 preview 更新通道
    },
    "production": {
-      "channel": "production"         // 订阅 production 更新通道
+      "channel": "production" // 订阅 production 更新通道
    }
  }
 }
 ```

 **配置说明：**
+
 - `developmentClient` - 是否为开发客户端（包含开发工具）
 - `distribution` - 分发方式（`internal` 或 `store`）
 - `channel` - 更新通道，决定应用接收哪个通道的更新
@@ -521,6 +534,7 @@ Alert.alert(
 ### 何时使用热更新

 ✅ **适合热更新的场景：**
+
 - ✅ 修复 JavaScript/TypeScript 代码 bug
 - ✅ 更新 UI 样式和布局
 - ✅ 修改业务逻辑
@@ -529,6 +543,7 @@ Alert.alert(
 - ✅ 添加新的 JS 功能

 ❌ **不适合热更新的场景（需要重新构建）：**
+
 - ❌ 添加/删除原生依赖（如 `react-native-camera`）
 - ❌ 修改原生代码（iOS/Android）
 - ❌ 更改应用权限（如相机、位置权限）
@@ -539,11 +554,13 @@ Alert.alert(
 ### 版本管理策略

 **appVersion 策略**（当前使用）：
+
 - 基于 `app.json` 中的 `version` 字段
 - ✅ 优点：简单直观，易于理解
 - ⚠️ 注意：每次原生构建需要手动更新版本号

 **nativeVersion 策略**：
+
 - 基于原生构建号（iOS 的 `buildNumber`，Android 的 `versionCode`）
 - ✅ 优点：自动管理，无需手动更新
 - ⚠️ 注意：需要配置原生构建号
@@ -564,6 +581,7 @@ Alert.alert(
 ### Q: 更新后没有生效？

 **A:** 检查以下几点：
+
 1. 确保应用完全关闭后重新打开（不是后台切换）
 2. 检查更新通道是否匹配（development/preview/production）
 3. 确保 `runtimeVersion` 匹配
@@ -573,6 +591,7 @@ Alert.alert(
 ### Q: 如何回滚到之前的版本？

 **A:**
+
 ```bash
 # 查看更新历史
 eas update:list --channel production
@@ -584,6 +603,7 @@ eas update --channel production --branch main --message "回滚到稳定版本"
 ### Q: 热更新的大小限制是多少？

 **A:** EAS Update 没有严格的大小限制，但建议：
+
 - 保持更新包 < 10MB 以确保良好的用户体验
 - 避免在更新中包含大量图片或资源文件
 - 使用 CDN 托管大型资源
@@ -599,7 +619,7 @@ if (update.isAvailable) {
    '发现新版本',
    '请更新到最新版本',
    [{ text: '立即更新', onPress: async () => await Updates.reloadAsync() }],
-    { cancelable: false }  // 不可取消
+    { cancelable: false } // 不可取消
  );
 }
 ```
@@ -607,6 +627,7 @@ if (update.isAvailable) {
 ### Q: 更新检查的频率是多少？

 **A:**
+
 - **应用启动时**：自动检查（在 `app/_layout.tsx` 中配置）
 - **手动检查**：用户点击"检查更新"按钮
 - **后台检查**：可以配置定时检查（需要自己实现）
@@ -614,6 +635,7 @@ if (update.isAvailable) {
 ### Q: 如何在开发时测试热更新？

 **A:**
+
 1. 构建 Development Build：`eas build --profile development --platform android`
 2. 安装到设备
 3. 修改代码
@@ -635,6 +657,7 @@ if (update.isAvailable) {
 ## 📚 相关资源

 ### 官方文档
+
 - [Expo 官方文档](https://docs.expo.dev/)
 - [Expo Router 文档](https://docs.expo.dev/router/introduction/)
 - [EAS Update 文档](https://docs.expo.dev/eas-update/introduction/)
@@ -642,11 +665,13 @@ if (update.isAvailable) {
 - [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)
@@ -658,10 +683,8 @@ if (update.isAvailable) {
 - **[使用示例](./docs/USAGE_EXAMPLES.md)** - 实际代码示例
 - **[工具库使用指南](./docs/LIBRARIES.md)** - 详细的工具库使用方法和示例

-
-
 ---
+
 **祝你开发愉快！** 🎉

 如有问题，请查看 [常见问题](#-常见问题) 或访问 [Expo 官方文档](https://docs.expo.dev/)。
-