feat: update react-native-paper
This commit is contained in:
3
.gitignore
vendored
3
.gitignore
vendored
@@ -71,6 +71,9 @@ logs
|
||||
# OS
|
||||
Thumbs.db
|
||||
|
||||
# Windows specific - ignore nul file created by incorrect command redirection
|
||||
nul
|
||||
|
||||
# Package manager lock files (keep pnpm-lock.yaml, ignore others)
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
|
||||
@@ -61,6 +61,13 @@ export default function TabLayout() {
|
||||
tabBarIcon: ({ color }) => <TabBarIcon name="rocket" color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="paper"
|
||||
options={{
|
||||
title: 'Paper UI',
|
||||
tabBarIcon: ({ color }) => <TabBarIcon name="paint-brush" color={color} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
309
app/(tabs)/paper.tsx
Normal file
309
app/(tabs)/paper.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ScrollView, StyleSheet, View } from 'react-native';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Chip,
|
||||
FAB,
|
||||
IconButton,
|
||||
List,
|
||||
ProgressBar,
|
||||
Searchbar,
|
||||
SegmentedButtons,
|
||||
Snackbar,
|
||||
Switch,
|
||||
Text,
|
||||
TextInput,
|
||||
useTheme,
|
||||
} from 'react-native-paper';
|
||||
|
||||
export default function PaperDemo() {
|
||||
const theme = useTheme();
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [text, setText] = useState('');
|
||||
const [switchValue, setSwitchValue] = useState(false);
|
||||
const [snackbarVisible, setSnackbarVisible] = useState(false);
|
||||
const [segmentedValue, setSegmentedValue] = useState('walk');
|
||||
const [expanded, setExpanded] = useState(true);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ScrollView style={styles.scrollView} contentContainerStyle={styles.content}>
|
||||
{/* 标题 */}
|
||||
<Text variant="headlineLarge" style={styles.title}>
|
||||
React Native Paper
|
||||
</Text>
|
||||
<Text variant="bodyMedium" style={styles.subtitle}>
|
||||
Material Design 组件库示例
|
||||
</Text>
|
||||
|
||||
{/* 搜索框 */}
|
||||
<Card style={styles.card}>
|
||||
<Card.Content>
|
||||
<Text variant="titleMedium" style={styles.sectionTitle}>
|
||||
🔍 搜索框
|
||||
</Text>
|
||||
<Searchbar
|
||||
placeholder="搜索..."
|
||||
onChangeText={setSearchQuery}
|
||||
value={searchQuery}
|
||||
style={styles.searchbar}
|
||||
/>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
|
||||
{/* 输入框 */}
|
||||
<Card style={styles.card}>
|
||||
<Card.Content>
|
||||
<Text variant="titleMedium" style={styles.sectionTitle}>
|
||||
✏️ 输入框
|
||||
</Text>
|
||||
<TextInput
|
||||
label="标准输入框"
|
||||
value={text}
|
||||
onChangeText={setText}
|
||||
mode="outlined"
|
||||
style={styles.input}
|
||||
/>
|
||||
<TextInput
|
||||
label="扁平输入框"
|
||||
value={text}
|
||||
onChangeText={setText}
|
||||
mode="flat"
|
||||
style={styles.input}
|
||||
/>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
|
||||
{/* 按钮 */}
|
||||
<Card style={styles.card}>
|
||||
<Card.Content>
|
||||
<Text variant="titleMedium" style={styles.sectionTitle}>
|
||||
🔘 按钮
|
||||
</Text>
|
||||
<View style={styles.buttonRow}>
|
||||
<Button mode="contained" onPress={() => setSnackbarVisible(true)}>
|
||||
Contained
|
||||
</Button>
|
||||
<Button mode="outlined" onPress={() => setSnackbarVisible(true)}>
|
||||
Outlined
|
||||
</Button>
|
||||
</View>
|
||||
<View style={styles.buttonRow}>
|
||||
<Button mode="text" onPress={() => setSnackbarVisible(true)}>
|
||||
Text
|
||||
</Button>
|
||||
<Button
|
||||
mode="elevated"
|
||||
onPress={() => setSnackbarVisible(true)}
|
||||
icon="camera"
|
||||
>
|
||||
With Icon
|
||||
</Button>
|
||||
</View>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
|
||||
{/* 分段按钮 */}
|
||||
<Card style={styles.card}>
|
||||
<Card.Content>
|
||||
<Text variant="titleMedium" style={styles.sectionTitle}>
|
||||
📊 分段按钮
|
||||
</Text>
|
||||
<SegmentedButtons
|
||||
value={segmentedValue}
|
||||
onValueChange={setSegmentedValue}
|
||||
buttons={[
|
||||
{
|
||||
value: 'walk',
|
||||
label: '步行',
|
||||
icon: 'walk',
|
||||
},
|
||||
{
|
||||
value: 'train',
|
||||
label: '火车',
|
||||
icon: 'train',
|
||||
},
|
||||
{ value: 'drive', label: '驾车', icon: 'car' },
|
||||
]}
|
||||
/>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
|
||||
{/* 开关和芯片 */}
|
||||
<Card style={styles.card}>
|
||||
<Card.Content>
|
||||
<Text variant="titleMedium" style={styles.sectionTitle}>
|
||||
🎛️ 开关和芯片
|
||||
</Text>
|
||||
<View style={styles.row}>
|
||||
<Text variant="bodyLarge">启用通知</Text>
|
||||
<Switch value={switchValue} onValueChange={setSwitchValue} />
|
||||
</View>
|
||||
<View style={styles.chipContainer}>
|
||||
<Chip icon="star" onPress={() => {}}>
|
||||
收藏
|
||||
</Chip>
|
||||
<Chip icon="heart" mode="outlined" onPress={() => {}}>
|
||||
喜欢
|
||||
</Chip>
|
||||
<Chip
|
||||
icon="close"
|
||||
onPress={() => {}}
|
||||
onClose={() => {}}
|
||||
closeIcon="close-circle"
|
||||
>
|
||||
可关闭
|
||||
</Chip>
|
||||
</View>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
|
||||
{/* 进度条 */}
|
||||
<Card style={styles.card}>
|
||||
<Card.Content>
|
||||
<Text variant="titleMedium" style={styles.sectionTitle}>
|
||||
📈 进度条
|
||||
</Text>
|
||||
<ProgressBar progress={0.7} style={styles.progressBar} />
|
||||
<ProgressBar progress={0.5} color={theme.colors.secondary} />
|
||||
</Card.Content>
|
||||
</Card>
|
||||
|
||||
{/* 列表 */}
|
||||
<Card style={styles.card}>
|
||||
<Card.Content>
|
||||
<Text variant="titleMedium" style={styles.sectionTitle}>
|
||||
📋 列表
|
||||
</Text>
|
||||
<List.Section>
|
||||
<List.Accordion
|
||||
title="可展开列表"
|
||||
left={(props) => <List.Icon {...props} icon="folder" />}
|
||||
expanded={expanded}
|
||||
onPress={() => setExpanded(!expanded)}
|
||||
>
|
||||
<List.Item title="第一项" left={(props) => <List.Icon {...props} icon="file" />} />
|
||||
<List.Item title="第二项" left={(props) => <List.Icon {...props} icon="file" />} />
|
||||
</List.Accordion>
|
||||
</List.Section>
|
||||
<List.Item
|
||||
title="带描述的列表项"
|
||||
description="这是一个描述文本"
|
||||
left={(props) => <List.Icon {...props} icon="account" />}
|
||||
right={(props) => <List.Icon {...props} icon="chevron-right" />}
|
||||
/>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
|
||||
{/* 卡片示例 */}
|
||||
<Card style={styles.card}>
|
||||
<Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
|
||||
<Card.Title
|
||||
title="卡片标题"
|
||||
subtitle="卡片副标题"
|
||||
left={(props) => <IconButton {...props} icon="image" />}
|
||||
right={(props) => <IconButton {...props} icon="dots-vertical" />}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Text variant="bodyMedium">
|
||||
这是一个完整的卡片示例，包含封面图片、标题、内容和操作按钮。
|
||||
</Text>
|
||||
</Card.Content>
|
||||
<Card.Actions>
|
||||
<Button>取消</Button>
|
||||
<Button>确定</Button>
|
||||
</Card.Actions>
|
||||
</Card>
|
||||
|
||||
{/* 底部留白 */}
|
||||
<View style={styles.bottomSpace} />
|
||||
</ScrollView>
|
||||
|
||||
{/* 浮动操作按钮 */}
|
||||
<FAB
|
||||
icon="plus"
|
||||
style={styles.fab}
|
||||
onPress={() => setSnackbarVisible(true)}
|
||||
label="添加"
|
||||
/>
|
||||
|
||||
{/* 提示条 */}
|
||||
<Snackbar
|
||||
visible={snackbarVisible}
|
||||
onDismiss={() => setSnackbarVisible(false)}
|
||||
duration={3000}
|
||||
action={{
|
||||
label: '撤销',
|
||||
onPress: () => {
|
||||
// 撤销操作
|
||||
},
|
||||
}}
|
||||
>
|
||||
操作成功！
|
||||
</Snackbar>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
content: {
|
||||
padding: 16,
|
||||
},
|
||||
title: {
|
||||
marginBottom: 8,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
subtitle: {
|
||||
marginBottom: 24,
|
||||
opacity: 0.7,
|
||||
},
|
||||
card: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
sectionTitle: {
|
||||
marginBottom: 12,
|
||||
fontWeight: '600',
|
||||
},
|
||||
searchbar: {
|
||||
marginTop: 8,
|
||||
},
|
||||
input: {
|
||||
marginBottom: 12,
|
||||
},
|
||||
buttonRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
marginBottom: 8,
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
chipContainer: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 8,
|
||||
},
|
||||
progressBar: {
|
||||
marginBottom: 12,
|
||||
},
|
||||
bottomSpace: {
|
||||
height: 80,
|
||||
},
|
||||
fab: {
|
||||
position: 'absolute',
|
||||
margin: 16,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -7,6 +7,7 @@ import * as Updates from 'expo-updates';
|
||||
import { useEffect } from 'react';
|
||||
import { Alert, Platform } from 'react-native';
|
||||
import 'react-native-reanimated';
|
||||
import { PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper';
|
||||
|
||||
import { useColorScheme } from '@/components/useColorScheme';
|
||||
|
||||
@@ -90,13 +91,16 @@ export default function RootLayout() {
|
||||
|
||||
function RootLayoutNav() {
|
||||
const colorScheme = useColorScheme();
|
||||
const paperTheme = colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme;
|
||||
|
||||
return (
|
||||
<PaperProvider theme={paperTheme}>
|
||||
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
|
||||
<Stack>
|
||||
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="modal" options={{ presentation: 'modal' }} />
|
||||
</Stack>
|
||||
</ThemeProvider>
|
||||
</PaperProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
开始使用这些强大的工具来构建你的应用吧！🚀
|
||||
|
||||
@@ -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 临时抑制警告。
|
||||
|
||||
@@ -31,6 +31,7 @@
|
||||
"react-dom": "19.1.0",
|
||||
"react-hook-form": "^7.66.0",
|
||||
"react-native": "0.81.5",
|
||||
"react-native-paper": "^5.14.5",
|
||||
"react-native-reanimated": "~4.1.1",
|
||||
"react-native-safe-area-context": "~5.6.0",
|
||||
"react-native-screens": "~4.16.0",
|
||||
|
||||
56
pnpm-lock.yaml
generated
56
pnpm-lock.yaml
generated
@@ -74,6 +74,9 @@ importers:
|
||||
react-native:
|
||||
specifier: 0.81.5
|
||||
version: 0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)
|
||||
react-native-paper:
|
||||
specifier: ^5.14.5
|
||||
version: 5.14.5(react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
react-native-reanimated:
|
||||
specifier: ~4.1.1
|
||||
version: 4.1.3(@babel/core@7.28.5)(react-native-worklets@0.5.1(@babel/core@7.28.5)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
@@ -622,6 +625,11 @@ packages:
|
||||
resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
|
||||
'@callstack/react-theme-provider@3.0.9':
|
||||
resolution: {integrity: sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==}
|
||||
peerDependencies:
|
||||
react: '>=16.3.0'
|
||||
|
||||
'@expo/cli@54.0.15':
|
||||
resolution: {integrity: sha512-tgaKFeYNRjZssPueZMm1+2cRek6mxEsthPoBX6NzQeDlzIzYBBpnAR6xH95UO6A7r0vduBeL2acIAV1Y5aSGJQ==}
|
||||
hasBin: true
|
||||
@@ -1517,6 +1525,9 @@ packages:
|
||||
color-string@1.9.1:
|
||||
resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
|
||||
|
||||
color@3.2.1:
|
||||
resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
|
||||
|
||||
color@4.2.3:
|
||||
resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
|
||||
engines: {node: '>=12.5.0'}
|
||||
@@ -1614,6 +1625,10 @@ packages:
|
||||
resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
|
||||
engines: {node: '>=4.0.0'}
|
||||
|
||||
deepmerge@3.3.0:
|
||||
resolution: {integrity: sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
deepmerge@4.3.1:
|
||||
resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@@ -2059,6 +2074,9 @@ packages:
|
||||
hermes-parser@0.32.0:
|
||||
resolution: {integrity: sha512-g4nBOWFpuiTqjR3LZdRxKUkij9iyveWeuks7INEsMX741f3r9xxrOe8TeQfUxtda0eXmiIFiMQzoeSQEno33Hw==}
|
||||
|
||||
hoist-non-react-statics@3.3.2:
|
||||
resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
|
||||
|
||||
hosted-git-info@7.0.2:
|
||||
resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
|
||||
engines: {node: ^16.14.0 || >=18.0.0}
|
||||
@@ -2770,6 +2788,9 @@ packages:
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17 || ^18 || ^19
|
||||
|
||||
react-is@16.13.1:
|
||||
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
|
||||
|
||||
react-is@18.3.1:
|
||||
resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
|
||||
|
||||
@@ -2782,6 +2803,13 @@ packages:
|
||||
react: '*'
|
||||
react-native: '*'
|
||||
|
||||
react-native-paper@5.14.5:
|
||||
resolution: {integrity: sha512-eaIH5bUQjJ/mYm4AkI6caaiyc7BcHDwX6CqNDi6RIxfxfWxROsHpll1oBuwn/cFvknvA8uEAkqLk/vzVihI3AQ==}
|
||||
peerDependencies:
|
||||
react: '*'
|
||||
react-native: '*'
|
||||
react-native-safe-area-context: '*'
|
||||
|
||||
react-native-reanimated@4.1.3:
|
||||
resolution: {integrity: sha512-GP8wsi1u3nqvC1fMab/m8gfFwFyldawElCcUSBJQgfrXeLmsPPUOpDw44lbLeCpcwUuLa05WTVePdTEwCLTUZg==}
|
||||
peerDependencies:
|
||||
@@ -4069,6 +4097,12 @@ snapshots:
|
||||
'@babel/helper-string-parser': 7.27.1
|
||||
'@babel/helper-validator-identifier': 7.28.5
|
||||
|
||||
'@callstack/react-theme-provider@3.0.9(react@19.1.0)':
|
||||
dependencies:
|
||||
deepmerge: 3.3.0
|
||||
hoist-non-react-statics: 3.3.2
|
||||
react: 19.1.0
|
||||
|
||||
'@expo/cli@54.0.15(expo-router@6.0.14)(expo@54.0.22)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))':
|
||||
dependencies:
|
||||
'@0no-co/graphql.web': 1.2.0
|
||||
@@ -5294,6 +5328,11 @@ snapshots:
|
||||
color-name: 1.1.4
|
||||
simple-swizzle: 0.2.4
|
||||
|
||||
color@3.2.1:
|
||||
dependencies:
|
||||
color-convert: 1.9.3
|
||||
color-string: 1.9.1
|
||||
|
||||
color@4.2.3:
|
||||
dependencies:
|
||||
color-convert: 2.0.1
|
||||
@@ -5382,6 +5421,8 @@ snapshots:
|
||||
|
||||
deep-extend@0.6.0: {}
|
||||
|
||||
deepmerge@3.3.0: {}
|
||||
|
||||
deepmerge@4.3.1: {}
|
||||
|
||||
defaults@1.0.4:
|
||||
@@ -5837,6 +5878,10 @@ snapshots:
|
||||
dependencies:
|
||||
hermes-estree: 0.32.0
|
||||
|
||||
hoist-non-react-statics@3.3.2:
|
||||
dependencies:
|
||||
react-is: 16.13.1
|
||||
|
||||
hosted-git-info@7.0.2:
|
||||
dependencies:
|
||||
lru-cache: 10.4.3
|
||||
@@ -6733,6 +6778,8 @@ snapshots:
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
|
||||
react-is@16.13.1: {}
|
||||
|
||||
react-is@18.3.1: {}
|
||||
|
||||
react-is@19.2.0: {}
|
||||
@@ -6742,6 +6789,15 @@ snapshots:
|
||||
react: 19.1.0
|
||||
react-native: 0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)
|
||||
|
||||
react-native-paper@5.14.5(react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
|
||||
dependencies:
|
||||
'@callstack/react-theme-provider': 3.0.9(react@19.1.0)
|
||||
color: 3.2.1
|
||||
react: 19.1.0
|
||||
react-native: 0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)
|
||||
react-native-safe-area-context: 5.6.2(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
use-latest-callback: 0.2.6(react@19.1.0)
|
||||
|
||||
react-native-reanimated@4.1.3(@babel/core@7.28.5)(react-native-worklets@0.5.1(@babel/core@7.28.5)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
|
||||
dependencies:
|
||||
'@babel/core': 7.28.5
|
||||
|
||||
Reference in New Issue
Block a user