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

feat: update react-native-paper

Browse Source
This commit is contained in:
echo
2025-11-04 13:49:20 +08:00
parent 7526a9b827
commit 61252cdf36
8 changed files with 386 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
docs/INSTALLED_PACKAGES.md
View File

@@ -1,283 +0,0 @@
# 📦 已安装的工具库总结
本文档列出了项目中新安装的所有工具库及其用途。
## ✅ 安装完成的库
### 🛠️ 工具类库
#### 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
View File

@@ -1,113 +0,0 @@
# 已知问题和警告说明
## ⚠️ 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 临时抑制警告。