rn-app/docs/INSTALLED_PACKAGES.md

📦 已安装的工具库总结

本文档列出了项目中新安装的所有工具库及其用途。

✅ 安装完成的库

🛠️ 工具类库

1. Lodash-ES ^4.17.21

• 用途: 强大的 JavaScript 工具函数库（ES modules 版本）
• 功能: 数组、对象、字符串操作，防抖、节流等
• 优势: 支持 tree-shaking，按需导入，减小包体积
• 文档: https://lodash.com/docs/
• 示例:

  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/
• 示例:

  import dayjs from 'dayjs';
  dayjs().format('YYYY-MM-DD');
  dayjs().fromNow();  // '几秒前'
  

3. Axios ^1.13.1

• 用途: HTTP 请求库
• 功能: Promise API、请求/响应拦截器、取消请求
• 文档: https://axios-http.com/
• 示例:

  import axios from 'axios';
  const data = await axios.get('/api/users');
  

4. Zustand ^5.0.8

• 用途: 轻量级状态管理库
• 功能: 简单的全局状态管理，比 Redux 简单得多
• 文档: https://zustand-demo.pmnd.rs/
• 示例:

  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/
• 示例:

  import { useForm } from 'react-hook-form';
  const { register, handleSubmit } = useForm();
  

6. Zod ^4.1.12

• 用途: TypeScript 优先的数据验证库
• 功能: 数据验证、类型推断、错误处理
• 文档: https://zod.dev/
• 示例:

  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/
• 示例:

  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/
• 示例:

  import { Image } from 'expo-image';
  <Image source={{ uri: 'https://...' }} />
  

9. Expo Haptics ^15.0.7

• 用途: 触觉反馈功能
• 功能: 震动反馈、成功/错误/警告反馈
• 文档: https://docs.expo.dev/versions/latest/sdk/haptics/
• 示例:

  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

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 配置

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 - 存储工具

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 - 用户状态

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 - 详细的使用指南和示例
• README.md - 项目总体说明
• KNOWN_ISSUES.md - 已知问题和解决方案

---

🎉 总结

所有工具库已成功安装并可以直接使用！这些库涵盖了：

• ✅ 数据处理 - Lodash-ES（支持 tree-shaking）, Day.js
• ✅ 网络请求 - Axios
• ✅ 状态管理 - Zustand
• ✅ 表单处理 - React Hook Form, Zod
• ✅ 本地存储 - AsyncStorage
• ✅ 用户体验 - Expo Image, Expo Haptics

开始使用这些强大的工具来构建你的应用吧！🚀