commit
7526a9b827
49 changed files with 12520 additions and 0 deletions
@ -0,0 +1,11 @@ |
|||||||
|
# API 配置 |
||||||
|
EXPO_PUBLIC_API_URL=https://api.example.com |
||||||
|
|
||||||
|
# 应用信息 |
||||||
|
EXPO_PUBLIC_APP_NAME=RN Demo |
||||||
|
EXPO_PUBLIC_APP_VERSION=1.0.0 |
||||||
|
|
||||||
|
# 其他配置 |
||||||
|
# EXPO_PUBLIC_SENTRY_DSN= |
||||||
|
# EXPO_PUBLIC_ANALYTICS_ID= |
||||||
|
|
||||||
@ -0,0 +1,83 @@ |
|||||||
|
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files |
||||||
|
|
||||||
|
# dependencies |
||||||
|
node_modules/ |
||||||
|
.pnp |
||||||
|
.pnp.js |
||||||
|
|
||||||
|
# Expo |
||||||
|
.expo/ |
||||||
|
dist/ |
||||||
|
web-build/ |
||||||
|
expo-env.d.ts |
||||||
|
|
||||||
|
# Native |
||||||
|
.kotlin/ |
||||||
|
*.orig.* |
||||||
|
*.jks |
||||||
|
*.p8 |
||||||
|
*.p12 |
||||||
|
*.key |
||||||
|
*.mobileprovision |
||||||
|
|
||||||
|
# Metro |
||||||
|
.metro-health-check* |
||||||
|
|
||||||
|
# debug |
||||||
|
npm-debug.* |
||||||
|
yarn-debug.* |
||||||
|
yarn-error.* |
||||||
|
lerna-debug.log* |
||||||
|
.pnpm-debug.log* |
||||||
|
|
||||||
|
# macOS |
||||||
|
.DS_Store |
||||||
|
*.pem |
||||||
|
|
||||||
|
# local env files |
||||||
|
.env |
||||||
|
.env*.local |
||||||
|
.env.local |
||||||
|
.env.development.local |
||||||
|
.env.test.local |
||||||
|
.env.production.local |
||||||
|
|
||||||
|
# typescript |
||||||
|
*.tsbuildinfo |
||||||
|
next-env.d.ts |
||||||
|
|
||||||
|
# testing |
||||||
|
/coverage |
||||||
|
*.lcov |
||||||
|
.nyc_output |
||||||
|
|
||||||
|
# production |
||||||
|
/build |
||||||
|
|
||||||
|
# misc |
||||||
|
.vscode/ |
||||||
|
.idea/ |
||||||
|
*.swp |
||||||
|
*.swo |
||||||
|
*~ |
||||||
|
.project |
||||||
|
.settings |
||||||
|
.classpath |
||||||
|
|
||||||
|
# logs |
||||||
|
logs |
||||||
|
*.log |
||||||
|
|
||||||
|
# OS |
||||||
|
Thumbs.db |
||||||
|
|
||||||
|
# Package manager lock files (keep pnpm-lock.yaml, ignore others) |
||||||
|
package-lock.json |
||||||
|
yarn.lock |
||||||
|
|
||||||
|
# EAS |
||||||
|
.eas/ |
||||||
|
|
||||||
|
# generated native folders |
||||||
|
/ios |
||||||
|
/android |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
{ |
||||||
|
"expo": { |
||||||
|
"name": "rn-demo", |
||||||
|
"slug": "rn-demo", |
||||||
|
"version": "1.0.0", |
||||||
|
"orientation": "portrait", |
||||||
|
"icon": "./assets/images/icon.png", |
||||||
|
"scheme": "rndemo", |
||||||
|
"userInterfaceStyle": "automatic", |
||||||
|
"newArchEnabled": true, |
||||||
|
"splash": { |
||||||
|
"image": "./assets/images/splash-icon.png", |
||||||
|
"resizeMode": "contain", |
||||||
|
"backgroundColor": "#ffffff" |
||||||
|
}, |
||||||
|
"ios": { |
||||||
|
"supportsTablet": true, |
||||||
|
"bundleIdentifier": "com.rndemo.app" |
||||||
|
}, |
||||||
|
"android": { |
||||||
|
"adaptiveIcon": { |
||||||
|
"foregroundImage": "./assets/images/adaptive-icon.png", |
||||||
|
"backgroundColor": "#ffffff" |
||||||
|
}, |
||||||
|
"edgeToEdgeEnabled": true, |
||||||
|
"predictiveBackGestureEnabled": false, |
||||||
|
"package": "com.rndemo.app" |
||||||
|
}, |
||||||
|
"web": { |
||||||
|
"bundler": "metro", |
||||||
|
"output": "static", |
||||||
|
"favicon": "./assets/images/favicon.png" |
||||||
|
}, |
||||||
|
"plugins": [ |
||||||
|
"expo-router", |
||||||
|
"expo-updates" |
||||||
|
], |
||||||
|
"experiments": { |
||||||
|
"typedRoutes": true |
||||||
|
}, |
||||||
|
"updates": { |
||||||
|
"url": "https://u.expo.dev/your-project-id" |
||||||
|
}, |
||||||
|
"runtimeVersion": { |
||||||
|
"policy": "appVersion" |
||||||
|
}, |
||||||
|
"extra": { |
||||||
|
"eas": { |
||||||
|
"projectId": "your-project-id" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,66 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import FontAwesome from '@expo/vector-icons/FontAwesome'; |
||||||
|
import { Link, Tabs } from 'expo-router'; |
||||||
|
import { Pressable } from 'react-native'; |
||||||
|
|
||||||
|
import Colors from '@/constants/Colors'; |
||||||
|
import { useColorScheme } from '@/components/useColorScheme'; |
||||||
|
import { useClientOnlyValue } from '@/components/useClientOnlyValue'; |
||||||
|
|
||||||
|
// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
|
||||||
|
function TabBarIcon(props: { |
||||||
|
name: React.ComponentProps<typeof FontAwesome>['name']; |
||||||
|
color: string; |
||||||
|
}) { |
||||||
|
return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />; |
||||||
|
} |
||||||
|
|
||||||
|
export default function TabLayout() { |
||||||
|
const colorScheme = useColorScheme(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Tabs |
||||||
|
screenOptions={{ |
||||||
|
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint, |
||||||
|
// Disable the static render of the header on web
|
||||||
|
// to prevent a hydration error in React Navigation v6.
|
||||||
|
headerShown: useClientOnlyValue(false, true), |
||||||
|
}}> |
||||||
|
<Tabs.Screen |
||||||
|
name="index" |
||||||
|
options={{ |
||||||
|
title: 'Tab One', |
||||||
|
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />, |
||||||
|
headerRight: () => ( |
||||||
|
<Link href="/modal" asChild> |
||||||
|
<Pressable> |
||||||
|
{({ pressed }) => ( |
||||||
|
<FontAwesome |
||||||
|
name="info-circle" |
||||||
|
size={25} |
||||||
|
color={Colors[colorScheme ?? 'light'].text} |
||||||
|
style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</Pressable> |
||||||
|
</Link> |
||||||
|
), |
||||||
|
}} |
||||||
|
/> |
||||||
|
<Tabs.Screen |
||||||
|
name="two" |
||||||
|
options={{ |
||||||
|
title: 'Tab Two', |
||||||
|
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />, |
||||||
|
}} |
||||||
|
/> |
||||||
|
<Tabs.Screen |
||||||
|
name="demo" |
||||||
|
options={{ |
||||||
|
title: '完整示例', |
||||||
|
tabBarIcon: ({ color }) => <TabBarIcon name="rocket" color={color} />, |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Tabs> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,192 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { StyleSheet, TouchableOpacity, Alert, ActivityIndicator } from 'react-native'; |
||||||
|
import * as Updates from 'expo-updates'; |
||||||
|
|
||||||
|
import { Text, View } from '@/components/Themed'; |
||||||
|
|
||||||
|
export default function TabOneScreen() { |
||||||
|
const [isChecking, setIsChecking] = useState(false); |
||||||
|
const [updateInfo, setUpdateInfo] = useState<string>(''); |
||||||
|
|
||||||
|
const checkForUpdates = async () => { |
||||||
|
if (__DEV__) { |
||||||
|
Alert.alert('提示', '开发模式下无法检查更新，请使用生产构建测试热更新功能'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsChecking(true); |
||||||
|
setUpdateInfo('正在检查更新...'); |
||||||
|
|
||||||
|
try { |
||||||
|
const update = await Updates.checkForUpdateAsync(); |
||||||
|
|
||||||
|
if (update.isAvailable) { |
||||||
|
setUpdateInfo('发现新版本，正在下载...'); |
||||||
|
await Updates.fetchUpdateAsync(); |
||||||
|
|
||||||
|
Alert.alert( |
||||||
|
'更新完成', |
||||||
|
'新版本已下载完成，是否立即重启应用？', |
||||||
|
[ |
||||||
|
{ |
||||||
|
text: '稍后', |
||||||
|
style: 'cancel', |
||||||
|
onPress: () => setUpdateInfo('更新已下载，稍后重启应用即可应用'), |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: '立即重启', |
||||||
|
onPress: async () => { |
||||||
|
await Updates.reloadAsync(); |
||||||
|
}, |
||||||
|
}, |
||||||
|
] |
||||||
|
); |
||||||
|
} else { |
||||||
|
setUpdateInfo('当前已是最新版本'); |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
setUpdateInfo('检查更新失败: ' + (error as Error).message); |
||||||
|
Alert.alert('错误', '检查更新失败，请稍后重试'); |
||||||
|
} finally { |
||||||
|
setIsChecking(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const getUpdateInfo = () => { |
||||||
|
const { |
||||||
|
isEmbeddedLaunch, |
||||||
|
isEmergencyLaunch, |
||||||
|
updateId, |
||||||
|
channel, |
||||||
|
runtimeVersion, |
||||||
|
} = Updates.useUpdates(); |
||||||
|
|
||||||
|
return ` |
||||||
|
运行模式: ${__DEV__ ? '开发模式' : '生产模式'} |
||||||
|
是否为内嵌启动: ${isEmbeddedLaunch ? '是' : '否'} |
||||||
|
是否为紧急启动: ${isEmergencyLaunch ? '是' : '否'} |
||||||
|
更新 ID: ${updateId || '无'} |
||||||
|
更新通道: ${channel || '无'} |
||||||
|
运行时版本: ${runtimeVersion || '无'} |
||||||
|
`.trim();
|
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<View style={styles.container}> |
||||||
|
<Text style={styles.title}>🚀 热更新演示</Text> |
||||||
|
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" /> |
||||||
|
|
||||||
|
<View style={styles.infoContainer}> |
||||||
|
<Text style={styles.infoTitle}>当前版本信息：</Text> |
||||||
|
<Text style={styles.infoText}>{getUpdateInfo()}</Text> |
||||||
|
</View> |
||||||
|
|
||||||
|
<TouchableOpacity |
||||||
|
style={[styles.button, isChecking && styles.buttonDisabled]} |
||||||
|
onPress={checkForUpdates} |
||||||
|
disabled={isChecking} |
||||||
|
> |
||||||
|
{isChecking ? ( |
||||||
|
<ActivityIndicator color="#fff" /> |
||||||
|
) : ( |
||||||
|
<Text style={styles.buttonText}>检查更新</Text> |
||||||
|
)} |
||||||
|
</TouchableOpacity> |
||||||
|
|
||||||
|
{updateInfo ? ( |
||||||
|
<View style={styles.updateInfoContainer}> |
||||||
|
<Text style={styles.updateInfoText}>{updateInfo}</Text> |
||||||
|
</View> |
||||||
|
) : null} |
||||||
|
|
||||||
|
<View style={styles.instructionsContainer}> |
||||||
|
<Text style={styles.instructionsTitle}>📝 使用说明：</Text> |
||||||
|
<Text style={styles.instructionsText}> |
||||||
|
1. 使用 EAS Build 构建生产版本{'\n'} |
||||||
|
2. 修改代码后运行 eas update 发布更新{'\n'} |
||||||
|
3. 打开应用点击"检查更新"按钮{'\n'} |
||||||
|
4. 应用会自动下载并提示重启 |
||||||
|
</Text> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
flex: 1, |
||||||
|
alignItems: 'center', |
||||||
|
justifyContent: 'center', |
||||||
|
padding: 20, |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: 28, |
||||||
|
fontWeight: 'bold', |
||||||
|
marginBottom: 10, |
||||||
|
}, |
||||||
|
separator: { |
||||||
|
marginVertical: 20, |
||||||
|
height: 1, |
||||||
|
width: '80%', |
||||||
|
}, |
||||||
|
infoContainer: { |
||||||
|
backgroundColor: 'rgba(0, 122, 255, 0.1)', |
||||||
|
padding: 15, |
||||||
|
borderRadius: 10, |
||||||
|
marginBottom: 20, |
||||||
|
width: '100%', |
||||||
|
}, |
||||||
|
infoTitle: { |
||||||
|
fontSize: 16, |
||||||
|
fontWeight: 'bold', |
||||||
|
marginBottom: 10, |
||||||
|
}, |
||||||
|
infoText: { |
||||||
|
fontSize: 12, |
||||||
|
fontFamily: 'monospace', |
||||||
|
lineHeight: 18, |
||||||
|
}, |
||||||
|
button: { |
||||||
|
backgroundColor: '#007AFF', |
||||||
|
paddingHorizontal: 30, |
||||||
|
paddingVertical: 15, |
||||||
|
borderRadius: 10, |
||||||
|
marginBottom: 20, |
||||||
|
minWidth: 200, |
||||||
|
alignItems: 'center', |
||||||
|
}, |
||||||
|
buttonDisabled: { |
||||||
|
backgroundColor: '#999', |
||||||
|
}, |
||||||
|
buttonText: { |
||||||
|
color: '#fff', |
||||||
|
fontSize: 16, |
||||||
|
fontWeight: 'bold', |
||||||
|
}, |
||||||
|
updateInfoContainer: { |
||||||
|
backgroundColor: 'rgba(52, 199, 89, 0.1)', |
||||||
|
padding: 15, |
||||||
|
borderRadius: 10, |
||||||
|
marginBottom: 20, |
||||||
|
width: '100%', |
||||||
|
}, |
||||||
|
updateInfoText: { |
||||||
|
fontSize: 14, |
||||||
|
textAlign: 'center', |
||||||
|
}, |
||||||
|
instructionsContainer: { |
||||||
|
backgroundColor: 'rgba(255, 149, 0, 0.1)', |
||||||
|
padding: 15, |
||||||
|
borderRadius: 10, |
||||||
|
width: '100%', |
||||||
|
}, |
||||||
|
instructionsTitle: { |
||||||
|
fontSize: 16, |
||||||
|
fontWeight: 'bold', |
||||||
|
marginBottom: 10, |
||||||
|
}, |
||||||
|
instructionsText: { |
||||||
|
fontSize: 13, |
||||||
|
lineHeight: 20, |
||||||
|
}, |
||||||
|
}); |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
import { StyleSheet } from 'react-native'; |
||||||
|
|
||||||
|
import EditScreenInfo from '@/components/EditScreenInfo'; |
||||||
|
import { Text, View } from '@/components/Themed'; |
||||||
|
|
||||||
|
export default function TabTwoScreen() { |
||||||
|
return ( |
||||||
|
<View style={styles.container}> |
||||||
|
<Text style={styles.title}>Tab Two</Text> |
||||||
|
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" /> |
||||||
|
<EditScreenInfo path="app/(tabs)/two.tsx" /> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
flex: 1, |
||||||
|
alignItems: 'center', |
||||||
|
justifyContent: 'center', |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: 20, |
||||||
|
fontWeight: 'bold', |
||||||
|
}, |
||||||
|
separator: { |
||||||
|
marginVertical: 30, |
||||||
|
height: 1, |
||||||
|
width: '80%', |
||||||
|
}, |
||||||
|
}); |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
import { ScrollViewStyleReset } from 'expo-router/html'; |
||||||
|
|
||||||
|
// This file is web-only and used to configure the root HTML for every
|
||||||
|
// web page during static rendering.
|
||||||
|
// The contents of this function only run in Node.js environments and
|
||||||
|
// do not have access to the DOM or browser APIs.
|
||||||
|
export default function Root({ children }: { children: React.ReactNode }) { |
||||||
|
return ( |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charSet="utf-8" /> |
||||||
|
<meta httpEquiv="X-UA-Compatible" content="IE=edge" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> |
||||||
|
|
||||||
|
{/* |
||||||
|
Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
|
||||||
|
However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line. |
||||||
|
*/} |
||||||
|
<ScrollViewStyleReset /> |
||||||
|
|
||||||
|
{/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */} |
||||||
|
<style dangerouslySetInnerHTML={{ __html: responsiveBackground }} /> |
||||||
|
{/* Add any additional <head> elements that you want globally available on web... */} |
||||||
|
</head> |
||||||
|
<body>{children}</body> |
||||||
|
</html> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const responsiveBackground = ` |
||||||
|
body { |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
@media (prefers-color-scheme: dark) { |
||||||
|
body { |
||||||
|
background-color: #000; |
||||||
|
} |
||||||
|
}`;
|
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import { Link, Stack } from 'expo-router'; |
||||||
|
import { StyleSheet } from 'react-native'; |
||||||
|
|
||||||
|
import { Text, View } from '@/components/Themed'; |
||||||
|
|
||||||
|
export default function NotFoundScreen() { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Stack.Screen options={{ title: 'Oops!' }} /> |
||||||
|
<View style={styles.container}> |
||||||
|
<Text style={styles.title}>This screen doesn't exist.</Text> |
||||||
|
|
||||||
|
<Link href="/" style={styles.link}> |
||||||
|
<Text style={styles.linkText}>Go to home screen!</Text> |
||||||
|
</Link> |
||||||
|
</View> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
flex: 1, |
||||||
|
alignItems: 'center', |
||||||
|
justifyContent: 'center', |
||||||
|
padding: 20, |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: 20, |
||||||
|
fontWeight: 'bold', |
||||||
|
}, |
||||||
|
link: { |
||||||
|
marginTop: 15, |
||||||
|
paddingVertical: 15, |
||||||
|
}, |
||||||
|
linkText: { |
||||||
|
fontSize: 14, |
||||||
|
color: '#2e78b7', |
||||||
|
}, |
||||||
|
}); |
||||||
@ -0,0 +1,102 @@ |
|||||||
|
import FontAwesome from '@expo/vector-icons/FontAwesome'; |
||||||
|
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'; |
||||||
|
import { useFonts } from 'expo-font'; |
||||||
|
import { Stack } from 'expo-router'; |
||||||
|
import * as SplashScreen from 'expo-splash-screen'; |
||||||
|
import * as Updates from 'expo-updates'; |
||||||
|
import { useEffect } from 'react'; |
||||||
|
import { Alert, Platform } from 'react-native'; |
||||||
|
import 'react-native-reanimated'; |
||||||
|
|
||||||
|
import { useColorScheme } from '@/components/useColorScheme'; |
||||||
|
|
||||||
|
export { |
||||||
|
// Catch any errors thrown by the Layout component.
|
||||||
|
ErrorBoundary, |
||||||
|
} from 'expo-router'; |
||||||
|
|
||||||
|
export const unstable_settings = { |
||||||
|
// Ensure that reloading on `/modal` keeps a back button present.
|
||||||
|
initialRouteName: '(tabs)', |
||||||
|
}; |
||||||
|
|
||||||
|
// Prevent the splash screen from auto-hiding before asset loading is complete.
|
||||||
|
SplashScreen.preventAutoHideAsync(); |
||||||
|
|
||||||
|
export default function RootLayout() { |
||||||
|
const [loaded, error] = useFonts({ |
||||||
|
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'), |
||||||
|
...FontAwesome.font, |
||||||
|
}); |
||||||
|
|
||||||
|
// Expo Router uses Error Boundaries to catch errors in the navigation tree.
|
||||||
|
useEffect(() => { |
||||||
|
if (error) throw error; |
||||||
|
}, [error]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (loaded) { |
||||||
|
SplashScreen.hideAsync(); |
||||||
|
} |
||||||
|
}, [loaded]); |
||||||
|
|
||||||
|
// 检查热更新
|
||||||
|
useEffect(() => { |
||||||
|
async function checkForUpdates() { |
||||||
|
if (__DEV__) { |
||||||
|
// 开发模式下不检查更新
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
try { |
||||||
|
const update = await Updates.checkForUpdateAsync(); |
||||||
|
|
||||||
|
if (update.isAvailable) { |
||||||
|
await Updates.fetchUpdateAsync(); |
||||||
|
|
||||||
|
// 提示用户重启应用以应用更新
|
||||||
|
Alert.alert( |
||||||
|
'更新可用', |
||||||
|
'发现新版本，是否立即重启应用？', |
||||||
|
[ |
||||||
|
{ |
||||||
|
text: '稍后', |
||||||
|
style: 'cancel', |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: '立即重启', |
||||||
|
onPress: async () => { |
||||||
|
await Updates.reloadAsync(); |
||||||
|
}, |
||||||
|
}, |
||||||
|
] |
||||||
|
); |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
// 处理更新检查错误
|
||||||
|
console.error('检查更新失败:', error); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
checkForUpdates(); |
||||||
|
}, []); |
||||||
|
|
||||||
|
if (!loaded) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return <RootLayoutNav />; |
||||||
|
} |
||||||
|
|
||||||
|
function RootLayoutNav() { |
||||||
|
const colorScheme = useColorScheme(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}> |
||||||
|
<Stack> |
||||||
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} /> |
||||||
|
<Stack.Screen name="modal" options={{ presentation: 'modal' }} /> |
||||||
|
</Stack> |
||||||
|
</ThemeProvider> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
import { StatusBar } from 'expo-status-bar'; |
||||||
|
import { Platform, StyleSheet } from 'react-native'; |
||||||
|
|
||||||
|
import EditScreenInfo from '@/components/EditScreenInfo'; |
||||||
|
import { Text, View } from '@/components/Themed'; |
||||||
|
|
||||||
|
export default function ModalScreen() { |
||||||
|
return ( |
||||||
|
<View style={styles.container}> |
||||||
|
<Text style={styles.title}>Modal</Text> |
||||||
|
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" /> |
||||||
|
<EditScreenInfo path="app/modal.tsx" /> |
||||||
|
|
||||||
|
{/* Use a light status bar on iOS to account for the black space above the modal */} |
||||||
|
<StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} /> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
flex: 1, |
||||||
|
alignItems: 'center', |
||||||
|
justifyContent: 'center', |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: 20, |
||||||
|
fontWeight: 'bold', |
||||||
|
}, |
||||||
|
separator: { |
||||||
|
marginVertical: 30, |
||||||
|
height: 1, |
||||||
|
width: '80%', |
||||||
|
}, |
||||||
|
}); |
||||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,77 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { StyleSheet } from 'react-native'; |
||||||
|
|
||||||
|
import { ExternalLink } from './ExternalLink'; |
||||||
|
import { MonoText } from './StyledText'; |
||||||
|
import { Text, View } from './Themed'; |
||||||
|
|
||||||
|
import Colors from '@/constants/Colors'; |
||||||
|
|
||||||
|
export default function EditScreenInfo({ path }: { path: string }) { |
||||||
|
return ( |
||||||
|
<View> |
||||||
|
<View style={styles.getStartedContainer}> |
||||||
|
<Text |
||||||
|
style={styles.getStartedText} |
||||||
|
lightColor="rgba(0,0,0,0.8)" |
||||||
|
darkColor="rgba(255,255,255,0.8)"> |
||||||
|
Open up the code for this screen: |
||||||
|
</Text> |
||||||
|
|
||||||
|
<View |
||||||
|
style={[styles.codeHighlightContainer, styles.homeScreenFilename]} |
||||||
|
darkColor="rgba(255,255,255,0.05)" |
||||||
|
lightColor="rgba(0,0,0,0.05)"> |
||||||
|
<MonoText>{path}</MonoText> |
||||||
|
</View> |
||||||
|
|
||||||
|
<Text |
||||||
|
style={styles.getStartedText} |
||||||
|
lightColor="rgba(0,0,0,0.8)" |
||||||
|
darkColor="rgba(255,255,255,0.8)"> |
||||||
|
Change any of the text, save the file, and your app will automatically update. |
||||||
|
</Text> |
||||||
|
</View> |
||||||
|
|
||||||
|
<View style={styles.helpContainer}> |
||||||
|
<ExternalLink |
||||||
|
style={styles.helpLink} |
||||||
|
href="https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet"> |
||||||
|
<Text style={styles.helpLinkText} lightColor={Colors.light.tint}> |
||||||
|
Tap here if your app doesn't automatically update after making changes |
||||||
|
</Text> |
||||||
|
</ExternalLink> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
getStartedContainer: { |
||||||
|
alignItems: 'center', |
||||||
|
marginHorizontal: 50, |
||||||
|
}, |
||||||
|
homeScreenFilename: { |
||||||
|
marginVertical: 7, |
||||||
|
}, |
||||||
|
codeHighlightContainer: { |
||||||
|
borderRadius: 3, |
||||||
|
paddingHorizontal: 4, |
||||||
|
}, |
||||||
|
getStartedText: { |
||||||
|
fontSize: 17, |
||||||
|
lineHeight: 24, |
||||||
|
textAlign: 'center', |
||||||
|
}, |
||||||
|
helpContainer: { |
||||||
|
marginTop: 15, |
||||||
|
marginHorizontal: 20, |
||||||
|
alignItems: 'center', |
||||||
|
}, |
||||||
|
helpLink: { |
||||||
|
paddingVertical: 15, |
||||||
|
}, |
||||||
|
helpLinkText: { |
||||||
|
textAlign: 'center', |
||||||
|
}, |
||||||
|
}); |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { Link } from 'expo-router'; |
||||||
|
import * as WebBrowser from 'expo-web-browser'; |
||||||
|
import React from 'react'; |
||||||
|
import { Platform } from 'react-native'; |
||||||
|
|
||||||
|
export function ExternalLink( |
||||||
|
props: Omit<React.ComponentProps<typeof Link>, 'href'> & { href: string } |
||||||
|
) { |
||||||
|
return ( |
||||||
|
<Link |
||||||
|
target="_blank" |
||||||
|
{...props} |
||||||
|
// @ts-expect-error: External URLs are not typed.
|
||||||
|
href={props.href} |
||||||
|
onPress={(e) => { |
||||||
|
if (Platform.OS !== 'web') { |
||||||
|
// Prevent the default behavior of linking to the default browser on native.
|
||||||
|
e.preventDefault(); |
||||||
|
// Open the link in an in-app browser.
|
||||||
|
WebBrowser.openBrowserAsync(props.href as string); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
import { Text, TextProps } from './Themed'; |
||||||
|
|
||||||
|
export function MonoText(props: TextProps) { |
||||||
|
return <Text {...props} style={[props.style, { fontFamily: 'SpaceMono' }]} />; |
||||||
|
} |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
/** |
||||||
|
* Learn more about Light and Dark modes: |
||||||
|
* https://docs.expo.io/guides/color-schemes/
|
||||||
|
*/ |
||||||
|
|
||||||
|
import { Text as DefaultText, View as DefaultView } from 'react-native'; |
||||||
|
|
||||||
|
import Colors from '@/constants/Colors'; |
||||||
|
import { useColorScheme } from './useColorScheme'; |
||||||
|
|
||||||
|
type ThemeProps = { |
||||||
|
lightColor?: string; |
||||||
|
darkColor?: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export type TextProps = ThemeProps & DefaultText['props']; |
||||||
|
export type ViewProps = ThemeProps & DefaultView['props']; |
||||||
|
|
||||||
|
export function useThemeColor( |
||||||
|
props: { light?: string; dark?: string }, |
||||||
|
colorName: keyof typeof Colors.light & keyof typeof Colors.dark |
||||||
|
) { |
||||||
|
const theme = useColorScheme() ?? 'light'; |
||||||
|
const colorFromProps = props[theme]; |
||||||
|
|
||||||
|
if (colorFromProps) { |
||||||
|
return colorFromProps; |
||||||
|
} else { |
||||||
|
return Colors[theme][colorName]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function Text(props: TextProps) { |
||||||
|
const { style, lightColor, darkColor, ...otherProps } = props; |
||||||
|
const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text'); |
||||||
|
|
||||||
|
return <DefaultText style={[{ color }, style]} {...otherProps} />; |
||||||
|
} |
||||||
|
|
||||||
|
export function View(props: ViewProps) { |
||||||
|
const { style, lightColor, darkColor, ...otherProps } = props; |
||||||
|
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background'); |
||||||
|
|
||||||
|
return <DefaultView style={[{ backgroundColor }, style]} {...otherProps} />; |
||||||
|
} |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
import * as React from 'react'; |
||||||
|
import renderer from 'react-test-renderer'; |
||||||
|
|
||||||
|
import { MonoText } from '../StyledText'; |
||||||
|
|
||||||
|
it(`renders correctly`, () => { |
||||||
|
const tree = renderer.create(<MonoText>Snapshot test!</MonoText>).toJSON(); |
||||||
|
|
||||||
|
expect(tree).toMatchSnapshot(); |
||||||
|
}); |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
// This function is web-only as native doesn't currently support server (or build-time) rendering.
|
||||||
|
export function useClientOnlyValue<S, C>(server: S, client: C): S | C { |
||||||
|
return client; |
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
// `useEffect` is not invoked during server rendering, meaning
|
||||||
|
// we can use this to determine if we're on the server or not.
|
||||||
|
export function useClientOnlyValue<S, C>(server: S, client: C): S | C { |
||||||
|
const [value, setValue] = React.useState<S | C>(server); |
||||||
|
React.useEffect(() => { |
||||||
|
setValue(client); |
||||||
|
}, [client]); |
||||||
|
|
||||||
|
return value; |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { useColorScheme } from 'react-native'; |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
// NOTE: The default React Native styling doesn't support server rendering.
|
||||||
|
// Server rendered styles should not change between the first render of the HTML
|
||||||
|
// and the first render on the client. Typically, web developers will use CSS media queries
|
||||||
|
// to render different styles on the client and server, these aren't directly supported in React Native
|
||||||
|
// but can be achieved using a styling library like Nativewind.
|
||||||
|
export function useColorScheme() { |
||||||
|
return 'light'; |
||||||
|
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
const tintColorLight = '#2f95dc'; |
||||||
|
const tintColorDark = '#fff'; |
||||||
|
|
||||||
|
export default { |
||||||
|
light: { |
||||||
|
text: '#000', |
||||||
|
background: '#fff', |
||||||
|
tint: tintColorLight, |
||||||
|
tabIconDefault: '#ccc', |
||||||
|
tabIconSelected: tintColorLight, |
||||||
|
}, |
||||||
|
dark: { |
||||||
|
text: '#fff', |
||||||
|
background: '#000', |
||||||
|
tint: tintColorDark, |
||||||
|
tabIconDefault: '#ccc', |
||||||
|
tabIconSelected: tintColorDark, |
||||||
|
}, |
||||||
|
}; |
||||||
@ -0,0 +1,113 @@ |
|||||||
|
# 已知问题和警告说明 |
||||||
|
|
||||||
|
## ⚠️ Web 平台警告 |
||||||
|
|
||||||
|
### 警告信息 |
||||||
|
``` |
||||||
|
λ WARN props.pointerEvents is deprecated. Use style.pointerEvents |
||||||
|
``` |
||||||
|
|
||||||
|
### 原因 |
||||||
|
这个警告来自 `[email protected]` 库内部，是该库在处理某些 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` 更新到最新版本 |
||||||
|
|
||||||
|
### 相关信息 |
||||||
|
|
||||||
|
- **库版本**: [email protected] |
||||||
|
- **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 临时抑制警告。 |
||||||
|
|
||||||
@ -0,0 +1,387 @@ |
|||||||
|
# 📚 常用工具库使用指南 |
||||||
|
|
||||||
|
本文档介绍项目中已安装的常用工具库及其使用方法。 |
||||||
|
|
||||||
|
## 📦 已安装的库列表 |
||||||
|
|
||||||
|
### 工具类库 |
||||||
|
| 库名 | 版本 | 用途 | |
||||||
|
|------|------|------| |
||||||
|
| **lodash-es** | ^4.17.21 | JavaScript 工具函数库（ES modules 版本） | |
||||||
|
| **dayjs** | ^1.11.19 | 轻量级日期处理库 | |
||||||
|
| **axios** | ^1.13.1 | HTTP 请求库 | |
||||||
|
| **zustand** | ^5.0.8 | 轻量级状态管理 | |
||||||
|
| **react-hook-form** | ^7.66.0 | 表单处理库 | |
||||||
|
| **zod** | ^4.1.12 | TypeScript 数据验证库 | |
||||||
|
|
||||||
|
### Expo 原生模块 |
||||||
|
| 库名 | 版本 | 用途 | |
||||||
|
|------|------|------| |
||||||
|
| **@react-native-async-storage/async-storage** | ^2.2.0 | 本地存储 | |
||||||
|
| **expo-image** | ^3.0.10 | 优化的图片组件 | |
||||||
|
| **expo-haptics** | ^15.0.7 | 触觉反馈 | |
||||||
|
|
||||||
|
### 开发工具 |
||||||
|
| 库名 | 版本 | 用途 | |
||||||
|
|------|------|------| |
||||||
|
| **@types/lodash-es** | ^4.17.12 | Lodash-ES TypeScript 类型定义 | |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## 🚀 快速开始 |
||||||
|
|
||||||
|
### 1. Lodash-ES - JavaScript 工具库 |
||||||
|
|
||||||
|
> **注意**：使用 `lodash-es` 而不是 `lodash`，支持 ES modules 和更好的 tree-shaking。 |
||||||
|
|
||||||
|
```typescript |
||||||
|
// 推荐：按需导入（tree-shaking 友好） |
||||||
|
import { map, filter, uniq, pick, cloneDeep, debounce } from 'lodash-es'; |
||||||
|
|
||||||
|
// 数组操作 |
||||||
|
map([1, 2, 3], n => n * 2); // [2, 4, 6] |
||||||
|
filter([1, 2, 3, 4], n => n % 2 === 0); // [2, 4] |
||||||
|
uniq([1, 2, 2, 3]); // [1, 2, 3] |
||||||
|
|
||||||
|
// 对象操作 |
||||||
|
pick({ a: 1, b: 2, c: 3 }, ['a', 'b']); // { a: 1, b: 2 } |
||||||
|
cloneDeep(obj); // 深拷贝 |
||||||
|
|
||||||
|
// 防抖和节流 |
||||||
|
const handleSearch = debounce((text) => { |
||||||
|
console.log('Searching:', text); |
||||||
|
}, 300); |
||||||
|
|
||||||
|
// 也可以全量导入（不推荐，会增加包体积） |
||||||
|
import _ from 'lodash-es'; |
||||||
|
_.map([1, 2, 3], n => n * 2); |
||||||
|
``` |
||||||
|
|
||||||
|
### 2. Day.js - 日期处理 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import dayjs from 'dayjs'; |
||||||
|
import relativeTime from 'dayjs/plugin/relativeTime'; |
||||||
|
import 'dayjs/locale/zh-cn'; |
||||||
|
|
||||||
|
dayjs.extend(relativeTime); |
||||||
|
dayjs.locale('zh-cn'); |
||||||
|
|
||||||
|
// 格式化 |
||||||
|
dayjs().format('YYYY-MM-DD HH:mm:ss'); |
||||||
|
|
||||||
|
// 相对时间 |
||||||
|
dayjs().fromNow(); // '几秒前' |
||||||
|
dayjs().subtract(1, 'day').fromNow(); // '1天前' |
||||||
|
|
||||||
|
// 日期操作 |
||||||
|
dayjs().add(7, 'day'); // 7天后 |
||||||
|
dayjs().startOf('month'); // 本月第一天 |
||||||
|
``` |
||||||
|
|
||||||
|
### 3. Axios - HTTP 请求 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import axios from 'axios'; |
||||||
|
|
||||||
|
// 创建实例 |
||||||
|
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; |
||||||
|
}); |
||||||
|
|
||||||
|
// 使用 |
||||||
|
const data = await api.get('/users'); |
||||||
|
await api.post('/users', { name: 'John' }); |
||||||
|
``` |
||||||
|
|
||||||
|
### 4. Zustand - 状态管理 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import { create } from 'zustand'; |
||||||
|
|
||||||
|
interface UserState { |
||||||
|
user: User | null; |
||||||
|
setUser: (user: User) => void; |
||||||
|
} |
||||||
|
|
||||||
|
export const useUserStore = create<UserState>((set) => ({ |
||||||
|
user: null, |
||||||
|
setUser: (user) => set({ user }), |
||||||
|
})); |
||||||
|
|
||||||
|
// 在组件中使用 |
||||||
|
const user = useUserStore((state) => state.user); |
||||||
|
const setUser = useUserStore((state) => state.setUser); |
||||||
|
``` |
||||||
|
|
||||||
|
### 5. React Hook Form + Zod - 表单处理 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import { useForm, Controller } from 'react-hook-form'; |
||||||
|
import { zodResolver } from '@hookform/resolvers/zod'; |
||||||
|
import { z } from 'zod'; |
||||||
|
|
||||||
|
const schema = z.object({ |
||||||
|
email: z.string().email('请输入有效的邮箱'), |
||||||
|
password: z.string().min(6, '密码至少6个字符'), |
||||||
|
}); |
||||||
|
|
||||||
|
type FormData = z.infer<typeof schema>; |
||||||
|
|
||||||
|
function LoginForm() { |
||||||
|
const { control, handleSubmit, formState: { errors } } = useForm<FormData>({ |
||||||
|
resolver: zodResolver(schema), |
||||||
|
}); |
||||||
|
|
||||||
|
const onSubmit = (data: FormData) => { |
||||||
|
console.log(data); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Controller |
||||||
|
control={control} |
||||||
|
name="email" |
||||||
|
render={({ field: { onChange, value } }) => ( |
||||||
|
<TextInput |
||||||
|
value={value} |
||||||
|
onChangeText={onChange} |
||||||
|
placeholder="邮箱" |
||||||
|
/> |
||||||
|
)} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
### 6. AsyncStorage - 本地存储 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||||
|
|
||||||
|
// 存储 |
||||||
|
await AsyncStorage.setItem('key', JSON.stringify(value)); |
||||||
|
|
||||||
|
// 读取 |
||||||
|
const value = await AsyncStorage.getItem('key'); |
||||||
|
const data = value ? JSON.parse(value) : null; |
||||||
|
|
||||||
|
// 删除 |
||||||
|
await AsyncStorage.removeItem('key'); |
||||||
|
|
||||||
|
// 清空 |
||||||
|
await AsyncStorage.clear(); |
||||||
|
``` |
||||||
|
|
||||||
|
### 7. Expo Image - 优化的图片组件 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import { Image } from 'expo-image'; |
||||||
|
|
||||||
|
<Image |
||||||
|
source={{ uri: 'https://example.com/image.jpg' }} |
||||||
|
placeholder={require('@/assets/placeholder.png')} |
||||||
|
contentFit="cover" |
||||||
|
transition={1000} |
||||||
|
style={{ width: 300, height: 300 }} |
||||||
|
/> |
||||||
|
``` |
||||||
|
|
||||||
|
### 8. Expo Haptics - 触觉反馈 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import * as Haptics from 'expo-haptics'; |
||||||
|
|
||||||
|
// 轻触反馈 |
||||||
|
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); |
||||||
|
|
||||||
|
// 成功反馈 |
||||||
|
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success); |
||||||
|
|
||||||
|
// 错误反馈 |
||||||
|
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error); |
||||||
|
``` |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## 💡 实用示例 |
||||||
|
|
||||||
|
### 创建 API 工具类 |
||||||
|
|
||||||
|
```typescript |
||||||
|
// utils/api.ts |
||||||
|
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; |
||||||
|
}); |
||||||
|
|
||||||
|
api.interceptors.response.use( |
||||||
|
(response) => response.data, |
||||||
|
(error) => { |
||||||
|
if (error.response?.status === 401) { |
||||||
|
AsyncStorage.removeItem('token'); |
||||||
|
} |
||||||
|
return Promise.reject(error); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
export default api; |
||||||
|
``` |
||||||
|
|
||||||
|
### 创建 Storage 工具类 |
||||||
|
|
||||||
|
```typescript |
||||||
|
// utils/storage.ts |
||||||
|
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||||
|
|
||||||
|
class Storage { |
||||||
|
static async setObject<T>(key: string, value: T): Promise<void> { |
||||||
|
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; |
||||||
|
} |
||||||
|
|
||||||
|
static async remove(key: string): Promise<void> { |
||||||
|
await AsyncStorage.removeItem(key); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default Storage; |
||||||
|
``` |
||||||
|
|
||||||
|
### 创建用户状态管理 |
||||||
|
|
||||||
|
```typescript |
||||||
|
// stores/userStore.ts |
||||||
|
import { create } from 'zustand'; |
||||||
|
import { persist, createJSONStorage } from 'zustand/middleware'; |
||||||
|
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||||
|
|
||||||
|
interface User { |
||||||
|
id: string; |
||||||
|
name: string; |
||||||
|
email: string; |
||||||
|
} |
||||||
|
|
||||||
|
interface UserState { |
||||||
|
user: User | null; |
||||||
|
setUser: (user: User) => void; |
||||||
|
clearUser: () => void; |
||||||
|
} |
||||||
|
|
||||||
|
export const useUserStore = create<UserState>()( |
||||||
|
persist( |
||||||
|
(set) => ({ |
||||||
|
user: null, |
||||||
|
setUser: (user) => set({ user }), |
||||||
|
clearUser: () => set({ user: null }), |
||||||
|
}), |
||||||
|
{ |
||||||
|
name: 'user-storage', |
||||||
|
storage: createJSONStorage(() => AsyncStorage), |
||||||
|
} |
||||||
|
) |
||||||
|
); |
||||||
|
``` |
||||||
|
|
||||||
|
### 日期格式化工具 |
||||||
|
|
||||||
|
```typescript |
||||||
|
// utils/date.ts |
||||||
|
import dayjs from 'dayjs'; |
||||||
|
import relativeTime from 'dayjs/plugin/relativeTime'; |
||||||
|
import 'dayjs/locale/zh-cn'; |
||||||
|
|
||||||
|
dayjs.extend(relativeTime); |
||||||
|
dayjs.locale('zh-cn'); |
||||||
|
|
||||||
|
export const formatDate = (date: Date | string | number) => { |
||||||
|
return dayjs(date).format('YYYY-MM-DD HH:mm:ss'); |
||||||
|
}; |
||||||
|
|
||||||
|
export const formatRelativeTime = (date: Date | string | number) => { |
||||||
|
return dayjs(date).fromNow(); |
||||||
|
}; |
||||||
|
|
||||||
|
export const formatChatTime = (timestamp: number) => { |
||||||
|
const date = dayjs(timestamp); |
||||||
|
const now = dayjs(); |
||||||
|
|
||||||
|
if (date.isSame(now, 'day')) { |
||||||
|
return date.format('HH:mm'); |
||||||
|
} else if (date.isSame(now.subtract(1, 'day'), 'day')) { |
||||||
|
return '昨天 ' + date.format('HH:mm'); |
||||||
|
} else if (date.isSame(now, 'year')) { |
||||||
|
return date.format('MM-DD HH:mm'); |
||||||
|
} else { |
||||||
|
return date.format('YYYY-MM-DD'); |
||||||
|
} |
||||||
|
}; |
||||||
|
``` |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## 📝 最佳实践 |
||||||
|
|
||||||
|
1. **代码组织** |
||||||
|
- 将 API 配置放在 `utils/api.ts` |
||||||
|
- 将存储工具放在 `utils/storage.ts` |
||||||
|
- 将状态管理放在 `stores/` 目录 |
||||||
|
- 将验证规则放在 `schemas/` 目录 |
||||||
|
|
||||||
|
2. **性能优化** |
||||||
|
- 使用 `_.debounce` 和 `_.throttle` 优化频繁触发的事件 |
||||||
|
- 使用 Zustand 的选择器避免不必要的重渲染 |
||||||
|
- 使用 Expo Image 的缓存策略 |
||||||
|
|
||||||
|
3. **类型安全** |
||||||
|
- 使用 Zod 定义数据结构并自动生成 TypeScript 类型 |
||||||
|
- 为 Zustand store 定义完整的类型 |
||||||
|
- 使用 `@types/lodash` 获得完整的类型提示 |
||||||
|
|
||||||
|
4. **错误处理** |
||||||
|
- 在 Axios 拦截器中统一处理错误 |
||||||
|
- 使用 try-catch 包裹异步操作 |
||||||
|
- 提供用户友好的错误提示 |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## 🔗 相关资源 |
||||||
|
|
||||||
|
- [Lodash 文档](https://lodash.com/docs/) |
||||||
|
- [Day.js 文档](https://day.js.org/) |
||||||
|
- [Axios 文档](https://axios-http.com/) |
||||||
|
- [Zustand 文档](https://zustand-demo.pmnd.rs/) |
||||||
|
- [React Hook Form 文档](https://react-hook-form.com/) |
||||||
|
- [Zod 文档](https://zod.dev/) |
||||||
|
- [AsyncStorage 文档](https://react-native-async-storage.github.io/async-storage/) |
||||||
|
- [Expo Image 文档](https://docs.expo.dev/versions/latest/sdk/image/) |
||||||
|
- [Expo Haptics 文档](https://docs.expo.dev/versions/latest/sdk/haptics/) |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
**提示**：所有库都已安装并配置好，可以直接在项目中使用！🎉 |
||||||
|
|
||||||
@ -0,0 +1,429 @@ |
|||||||
|
# 💡 使用示例 |
||||||
|
|
||||||
|
本文档提供项目中各个工具和模块的实际使用示例。 |
||||||
|
|
||||||
|
## 📋 目录 |
||||||
|
|
||||||
|
- [登录功能示例](#登录功能示例) |
||||||
|
- [用户资料更新示例](#用户资料更新示例) |
||||||
|
- [搜索功能示例](#搜索功能示例) |
||||||
|
- [设置页面示例](#设置页面示例) |
||||||
|
- [列表加载示例](#列表加载示例) |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## 登录功能示例 |
||||||
|
|
||||||
|
完整的登录页面实现，包含表单验证、API 调用、状态管理。 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import React, { useState } from 'react'; |
||||||
|
import { View, TextInput, TouchableOpacity, Text, Alert } from 'react-native'; |
||||||
|
import { useForm, Controller } from 'react-hook-form'; |
||||||
|
import { zodResolver } from '@hookform/resolvers/zod'; |
||||||
|
import { useRouter } from 'expo-router'; |
||||||
|
import { |
||||||
|
loginSchema, |
||||||
|
type LoginFormData, |
||||||
|
authService, |
||||||
|
useUserStore, |
||||||
|
useHaptics, |
||||||
|
} from '@/src'; |
||||||
|
|
||||||
|
export default function LoginScreen() { |
||||||
|
const router = useRouter(); |
||||||
|
const haptics = useHaptics(); |
||||||
|
const login = useUserStore((state) => state.login); |
||||||
|
const [loading, setLoading] = useState(false); |
||||||
|
|
||||||
|
// 表单配置 |
||||||
|
const { |
||||||
|
control, |
||||||
|
handleSubmit, |
||||||
|
formState: { errors }, |
||||||
|
} = useForm<LoginFormData>({ |
||||||
|
resolver: zodResolver(loginSchema), |
||||||
|
defaultValues: { |
||||||
|
email: '', |
||||||
|
password: '', |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
// 提交处理 |
||||||
|
const onSubmit = async (data: LoginFormData) => { |
||||||
|
try { |
||||||
|
setLoading(true); |
||||||
|
|
||||||
|
// 调用登录 API |
||||||
|
const { user, token } = await authService.login(data); |
||||||
|
|
||||||
|
// 更新状态 |
||||||
|
login(user, token); |
||||||
|
|
||||||
|
// 触觉反馈 |
||||||
|
haptics.success(); |
||||||
|
|
||||||
|
// 跳转到首页 |
||||||
|
router.replace('/(tabs)'); |
||||||
|
} catch (error: any) { |
||||||
|
haptics.error(); |
||||||
|
Alert.alert('登录失败', error.message || '请检查邮箱和密码'); |
||||||
|
} finally { |
||||||
|
setLoading(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<View style={{ padding: 20 }}> |
||||||
|
{/* 邮箱输入 */} |
||||||
|
<Controller |
||||||
|
control={control} |
||||||
|
name="email" |
||||||
|
render={({ field: { onChange, value } }) => ( |
||||||
|
<View> |
||||||
|
<TextInput |
||||||
|
value={value} |
||||||
|
onChangeText={onChange} |
||||||
|
placeholder="邮箱" |
||||||
|
keyboardType="email-address" |
||||||
|
autoCapitalize="none" |
||||||
|
style={{ |
||||||
|
borderWidth: 1, |
||||||
|
borderColor: errors.email ? 'red' : '#ccc', |
||||||
|
padding: 10, |
||||||
|
borderRadius: 5, |
||||||
|
}} |
||||||
|
/> |
||||||
|
{errors.email && ( |
||||||
|
<Text style={{ color: 'red', marginTop: 5 }}> |
||||||
|
{errors.email.message} |
||||||
|
</Text> |
||||||
|
)} |
||||||
|
</View> |
||||||
|
)} |
||||||
|
/> |
||||||
|
|
||||||
|
{/* 密码输入 */} |
||||||
|
<Controller |
||||||
|
control={control} |
||||||
|
name="password" |
||||||
|
render={({ field: { onChange, value } }) => ( |
||||||
|
<View style={{ marginTop: 15 }}> |
||||||
|
<TextInput |
||||||
|
value={value} |
||||||
|
onChangeText={onChange} |
||||||
|
placeholder="密码" |
||||||
|
secureTextEntry |
||||||
|
style={{ |
||||||
|
borderWidth: 1, |
||||||
|
borderColor: errors.password ? 'red' : '#ccc', |
||||||
|
padding: 10, |
||||||
|
borderRadius: 5, |
||||||
|
}} |
||||||
|
/> |
||||||
|
{errors.password && ( |
||||||
|
<Text style={{ color: 'red', marginTop: 5 }}> |
||||||
|
{errors.password.message} |
||||||
|
</Text> |
||||||
|
)} |
||||||
|
</View> |
||||||
|
)} |
||||||
|
/> |
||||||
|
|
||||||
|
{/* 登录按钮 */} |
||||||
|
<TouchableOpacity |
||||||
|
onPress={handleSubmit(onSubmit)} |
||||||
|
disabled={loading} |
||||||
|
style={{ |
||||||
|
backgroundColor: loading ? '#ccc' : '#007AFF', |
||||||
|
padding: 15, |
||||||
|
borderRadius: 5, |
||||||
|
marginTop: 20, |
||||||
|
}} |
||||||
|
> |
||||||
|
<Text style={{ color: 'white', textAlign: 'center', fontWeight: 'bold' }}> |
||||||
|
{loading ? '登录中...' : '登录'} |
||||||
|
</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## 用户资料更新示例 |
||||||
|
|
||||||
|
使用表单验证和 API 服务更新用户资料。 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import React, { useState } from 'react'; |
||||||
|
import { View, TextInput, TouchableOpacity, Text, Alert } from 'react-native'; |
||||||
|
import { useForm, Controller } from 'react-hook-form'; |
||||||
|
import { zodResolver } from '@hookform/resolvers/zod'; |
||||||
|
import { |
||||||
|
updateProfileSchema, |
||||||
|
type UpdateProfileFormData, |
||||||
|
userService, |
||||||
|
useUserStore, |
||||||
|
useHaptics, |
||||||
|
} from '@/src'; |
||||||
|
|
||||||
|
export default function EditProfileScreen() { |
||||||
|
const haptics = useHaptics(); |
||||||
|
const user = useUserStore((state) => state.user); |
||||||
|
const updateUser = useUserStore((state) => state.updateUser); |
||||||
|
const [loading, setLoading] = useState(false); |
||||||
|
|
||||||
|
const { |
||||||
|
control, |
||||||
|
handleSubmit, |
||||||
|
formState: { errors }, |
||||||
|
} = useForm<UpdateProfileFormData>({ |
||||||
|
resolver: zodResolver(updateProfileSchema), |
||||||
|
defaultValues: { |
||||||
|
nickname: user?.nickname || '', |
||||||
|
phone: user?.phone || '', |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
const onSubmit = async (data: UpdateProfileFormData) => { |
||||||
|
try { |
||||||
|
setLoading(true); |
||||||
|
|
||||||
|
// 调用更新 API |
||||||
|
const updatedUser = await userService.updateProfile(data); |
||||||
|
|
||||||
|
// 更新本地状态 |
||||||
|
updateUser(updatedUser); |
||||||
|
|
||||||
|
haptics.success(); |
||||||
|
Alert.alert('成功', '资料更新成功'); |
||||||
|
} catch (error: any) { |
||||||
|
haptics.error(); |
||||||
|
Alert.alert('失败', error.message || '更新失败'); |
||||||
|
} finally { |
||||||
|
setLoading(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<View style={{ padding: 20 }}> |
||||||
|
<Controller |
||||||
|
control={control} |
||||||
|
name="nickname" |
||||||
|
render={({ field: { onChange, value } }) => ( |
||||||
|
<View> |
||||||
|
<Text>昵称</Text> |
||||||
|
<TextInput |
||||||
|
value={value} |
||||||
|
onChangeText={onChange} |
||||||
|
placeholder="请输入昵称" |
||||||
|
style={{ borderWidth: 1, padding: 10, marginTop: 5 }} |
||||||
|
/> |
||||||
|
{errors.nickname && ( |
||||||
|
<Text style={{ color: 'red' }}>{errors.nickname.message}</Text> |
||||||
|
)} |
||||||
|
</View> |
||||||
|
)} |
||||||
|
/> |
||||||
|
|
||||||
|
<TouchableOpacity |
||||||
|
onPress={handleSubmit(onSubmit)} |
||||||
|
disabled={loading} |
||||||
|
style={{ |
||||||
|
backgroundColor: '#007AFF', |
||||||
|
padding: 15, |
||||||
|
marginTop: 20, |
||||||
|
borderRadius: 5, |
||||||
|
}} |
||||||
|
> |
||||||
|
<Text style={{ color: 'white', textAlign: 'center' }}> |
||||||
|
{loading ? '保存中...' : '保存'} |
||||||
|
</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## 搜索功能示例 |
||||||
|
|
||||||
|
使用防抖优化搜索性能。 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import React, { useState, useEffect } from 'react'; |
||||||
|
import { View, TextInput, FlatList, Text } from 'react-native'; |
||||||
|
import { useDebounce } from '@/src'; |
||||||
|
|
||||||
|
export default function SearchScreen() { |
||||||
|
const [searchText, setSearchText] = useState(''); |
||||||
|
const [results, setResults] = useState<any[]>([]); |
||||||
|
const [loading, setLoading] = useState(false); |
||||||
|
|
||||||
|
// 防抖搜索函数 |
||||||
|
const debouncedSearch = useDebounce(async (text: string) => { |
||||||
|
if (!text.trim()) { |
||||||
|
setResults([]); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
try { |
||||||
|
setLoading(true); |
||||||
|
// 调用搜索 API |
||||||
|
const response = await fetch(`/api/search?q=${text}`); |
||||||
|
const data = await response.json(); |
||||||
|
setResults(data.results); |
||||||
|
} catch (error) { |
||||||
|
console.error('Search error:', error); |
||||||
|
} finally { |
||||||
|
setLoading(false); |
||||||
|
} |
||||||
|
}, 500); |
||||||
|
|
||||||
|
// 监听搜索文本变化 |
||||||
|
useEffect(() => { |
||||||
|
debouncedSearch(searchText); |
||||||
|
}, [searchText]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<View style={{ flex: 1, padding: 20 }}> |
||||||
|
<TextInput |
||||||
|
value={searchText} |
||||||
|
onChangeText={setSearchText} |
||||||
|
placeholder="搜索..." |
||||||
|
style={{ |
||||||
|
borderWidth: 1, |
||||||
|
borderColor: '#ccc', |
||||||
|
padding: 10, |
||||||
|
borderRadius: 5, |
||||||
|
}} |
||||||
|
/> |
||||||
|
|
||||||
|
{loading && <Text style={{ marginTop: 10 }}>搜索中...</Text>} |
||||||
|
|
||||||
|
<FlatList |
||||||
|
data={results} |
||||||
|
keyExtractor={(item) => item.id} |
||||||
|
renderItem={({ item }) => ( |
||||||
|
<View style={{ padding: 10, borderBottomWidth: 1 }}> |
||||||
|
<Text>{item.title}</Text> |
||||||
|
</View> |
||||||
|
)} |
||||||
|
style={{ marginTop: 20 }} |
||||||
|
/> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## 设置页面示例 |
||||||
|
|
||||||
|
使用状态管理和触觉反馈。 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import React from 'react'; |
||||||
|
import { View, Text, Switch, TouchableOpacity } from 'react-native'; |
||||||
|
import { |
||||||
|
useSettingsStore, |
||||||
|
useHaptics, |
||||||
|
type Theme, |
||||||
|
} from '@/src'; |
||||||
|
|
||||||
|
export default function SettingsScreen() { |
||||||
|
const haptics = useHaptics(); |
||||||
|
const theme = useSettingsStore((state) => state.theme); |
||||||
|
const notificationsEnabled = useSettingsStore((state) => state.notificationsEnabled); |
||||||
|
const hapticsEnabled = useSettingsStore((state) => state.hapticsEnabled); |
||||||
|
|
||||||
|
const setTheme = useSettingsStore((state) => state.setTheme); |
||||||
|
const setNotificationsEnabled = useSettingsStore((state) => state.setNotificationsEnabled); |
||||||
|
const setHapticsEnabled = useSettingsStore((state) => state.setHapticsEnabled); |
||||||
|
|
||||||
|
const handleThemeChange = (newTheme: Theme) => { |
||||||
|
haptics.selection(); |
||||||
|
setTheme(newTheme); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleToggle = (setter: (value: boolean) => void, value: boolean) => { |
||||||
|
haptics.light(); |
||||||
|
setter(value); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<View style={{ flex: 1, padding: 20 }}> |
||||||
|
{/* 主题选择 */} |
||||||
|
<View style={{ marginBottom: 20 }}> |
||||||
|
<Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 10 }}> |
||||||
|
主题 |
||||||
|
</Text> |
||||||
|
{(['light', 'dark', 'auto'] as Theme[]).map((t) => ( |
||||||
|
<TouchableOpacity |
||||||
|
key={t} |
||||||
|
onPress={() => handleThemeChange(t)} |
||||||
|
style={{ |
||||||
|
padding: 15, |
||||||
|
backgroundColor: theme === t ? '#007AFF' : '#f0f0f0', |
||||||
|
marginBottom: 10, |
||||||
|
borderRadius: 5, |
||||||
|
}} |
||||||
|
> |
||||||
|
<Text style={{ color: theme === t ? 'white' : 'black' }}> |
||||||
|
{t === 'light' ? '亮色' : t === 'dark' ? '暗色' : '自动'} |
||||||
|
</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
))} |
||||||
|
</View> |
||||||
|
|
||||||
|
{/* 通知开关 */} |
||||||
|
<View |
||||||
|
style={{ |
||||||
|
flexDirection: 'row', |
||||||
|
justifyContent: 'space-between', |
||||||
|
alignItems: 'center', |
||||||
|
marginBottom: 15, |
||||||
|
}} |
||||||
|
> |
||||||
|
<Text>通知</Text> |
||||||
|
<Switch |
||||||
|
value={notificationsEnabled} |
||||||
|
onValueChange={(value) => handleToggle(setNotificationsEnabled, value)} |
||||||
|
/> |
||||||
|
</View> |
||||||
|
|
||||||
|
{/* 触觉反馈开关 */} |
||||||
|
<View |
||||||
|
style={{ |
||||||
|
flexDirection: 'row', |
||||||
|
justifyContent: 'space-between', |
||||||
|
alignItems: 'center', |
||||||
|
}} |
||||||
|
> |
||||||
|
<Text>触觉反馈</Text> |
||||||
|
<Switch |
||||||
|
value={hapticsEnabled} |
||||||
|
onValueChange={(value) => handleToggle(setHapticsEnabled, value)} |
||||||
|
/> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## 📚 更多示例 |
||||||
|
|
||||||
|
查看以下文档了解更多： |
||||||
|
|
||||||
|
- [工具库使用指南](./LIBRARIES.md) - 各个工具库的详细用法 |
||||||
|
- [项目结构说明](./PROJECT_STRUCTURE.md) - 项目结构和最佳实践 |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
**提示**：这些示例都是可以直接使用的代码，复制到你的项目中即可！ |
||||||
|
|
||||||
@ -0,0 +1,23 @@ |
|||||||
|
{ |
||||||
|
"cli": { |
||||||
|
"version": ">= 13.2.0" |
||||||
|
}, |
||||||
|
"build": { |
||||||
|
"development": { |
||||||
|
"developmentClient": true, |
||||||
|
"distribution": "internal", |
||||||
|
"channel": "development" |
||||||
|
}, |
||||||
|
"preview": { |
||||||
|
"distribution": "internal", |
||||||
|
"channel": "preview" |
||||||
|
}, |
||||||
|
"production": { |
||||||
|
"channel": "production" |
||||||
|
} |
||||||
|
}, |
||||||
|
"submit": { |
||||||
|
"production": {} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,49 @@ |
|||||||
|
{ |
||||||
|
"name": "rn-demo", |
||||||
|
"main": "expo-router/entry", |
||||||
|
"version": "1.0.0", |
||||||
|
"scripts": { |
||||||
|
"start": "expo start", |
||||||
|
"android": "expo start --android", |
||||||
|
"ios": "expo start --ios", |
||||||
|
"web": "expo start --web" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"@expo/vector-icons": "^15.0.3", |
||||||
|
"@hookform/resolvers": "^5.2.2", |
||||||
|
"@react-native-async-storage/async-storage": "^2.2.0", |
||||||
|
"@react-navigation/native": "^7.1.8", |
||||||
|
"axios": "^1.13.1", |
||||||
|
"dayjs": "^1.11.19", |
||||||
|
"expo": "~54.0.22", |
||||||
|
"expo-constants": "~18.0.10", |
||||||
|
"expo-font": "~14.0.9", |
||||||
|
"expo-haptics": "^15.0.7", |
||||||
|
"expo-image": "^3.0.10", |
||||||
|
"expo-linking": "~8.0.8", |
||||||
|
"expo-router": "~6.0.14", |
||||||
|
"expo-splash-screen": "~31.0.10", |
||||||
|
"expo-status-bar": "~3.0.8", |
||||||
|
"expo-updates": "^29.0.12", |
||||||
|
"expo-web-browser": "~15.0.9", |
||||||
|
"lodash-es": "^4.17.21", |
||||||
|
"react": "19.1.0", |
||||||
|
"react-dom": "19.1.0", |
||||||
|
"react-hook-form": "^7.66.0", |
||||||
|
"react-native": "0.81.5", |
||||||
|
"react-native-reanimated": "~4.1.1", |
||||||
|
"react-native-safe-area-context": "~5.6.0", |
||||||
|
"react-native-screens": "~4.16.0", |
||||||
|
"react-native-web": "~0.21.0", |
||||||
|
"react-native-worklets": "0.5.1", |
||||||
|
"zod": "^4.1.12", |
||||||
|
"zustand": "^5.0.8" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@types/lodash-es": "^4.17.12", |
||||||
|
"@types/react": "~19.1.0", |
||||||
|
"react-test-renderer": "19.1.0", |
||||||
|
"typescript": "~5.9.2" |
||||||
|
}, |
||||||
|
"private": true |
||||||
|
} |
||||||
@ -0,0 +1,84 @@ |
|||||||
|
/** |
||||||
|
* 防抖 Hook |
||||||
|
* 使用 lodash-es 的 debounce 函数 |
||||||
|
*/ |
||||||
|
import React, { useEffect, useMemo, useRef } from 'react'; |
||||||
|
import { debounce } from 'lodash-es'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 防抖值 Hook |
||||||
|
* @param value 需要防抖的值 |
||||||
|
* @param delay 延迟时间（毫秒） |
||||||
|
* @returns 防抖后的值 |
||||||
|
*/ |
||||||
|
export function useDebounceValue<T>(value: T, delay: number = 300): T { |
||||||
|
const [debouncedValue, setDebouncedValue] = React.useState<T>(value); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const handler = setTimeout(() => { |
||||||
|
setDebouncedValue(value); |
||||||
|
}, delay); |
||||||
|
|
||||||
|
return () => { |
||||||
|
clearTimeout(handler); |
||||||
|
}; |
||||||
|
}, [value, delay]); |
||||||
|
|
||||||
|
return debouncedValue; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 防抖函数 Hook |
||||||
|
* @param callback 需要防抖的函数 |
||||||
|
* @param delay 延迟时间（毫秒） |
||||||
|
* @returns 防抖后的函数 |
||||||
|
*/ |
||||||
|
export function useDebounce<T extends (...args: any[]) => any>( |
||||||
|
callback: T, |
||||||
|
delay: number = 300 |
||||||
|
): T { |
||||||
|
const callbackRef = useRef(callback); |
||||||
|
|
||||||
|
// 更新 callback ref
|
||||||
|
useEffect(() => { |
||||||
|
callbackRef.current = callback; |
||||||
|
}, [callback]); |
||||||
|
|
||||||
|
// 创建防抖函数
|
||||||
|
const debouncedCallback = useMemo(() => { |
||||||
|
const func = (...args: Parameters<T>) => { |
||||||
|
callbackRef.current(...args); |
||||||
|
}; |
||||||
|
|
||||||
|
return debounce(func, delay); |
||||||
|
}, [delay]); |
||||||
|
|
||||||
|
// 清理
|
||||||
|
useEffect(() => { |
||||||
|
return () => { |
||||||
|
debouncedCallback.cancel(); |
||||||
|
}; |
||||||
|
}, [debouncedCallback]); |
||||||
|
|
||||||
|
return debouncedCallback as T; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 使用示例： |
||||||
|
* |
||||||
|
* // 防抖值
|
||||||
|
* const [searchText, setSearchText] = useState(''); |
||||||
|
* const debouncedSearchText = useDebounceValue(searchText, 500); |
||||||
|
* |
||||||
|
* useEffect(() => { |
||||||
|
* // 使用防抖后的值进行搜索
|
||||||
|
* search(debouncedSearchText); |
||||||
|
* }, [debouncedSearchText]); |
||||||
|
* |
||||||
|
* // 防抖函数
|
||||||
|
* const handleSearch = useDebounce((text: string) => { |
||||||
|
* console.log('Searching:', text); |
||||||
|
* }, 500); |
||||||
|
*/ |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,114 @@ |
|||||||
|
/** |
||||||
|
* 触觉反馈 Hook |
||||||
|
* 封装 Expo Haptics 功能 |
||||||
|
*/ |
||||||
|
|
||||||
|
import { useCallback } from 'react'; |
||||||
|
import * as Haptics from 'expo-haptics'; |
||||||
|
import { useHapticsEnabled } from '@/src/stores/settingsStore'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 触觉反馈 Hook |
||||||
|
* 根据用户设置决定是否触发触觉反馈 |
||||||
|
*/ |
||||||
|
export function useHaptics() { |
||||||
|
const hapticsEnabled = useHapticsEnabled(); |
||||||
|
|
||||||
|
/** |
||||||
|
* 轻触反馈 |
||||||
|
*/ |
||||||
|
const light = useCallback(async () => { |
||||||
|
if (hapticsEnabled) { |
||||||
|
await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); |
||||||
|
} |
||||||
|
}, [hapticsEnabled]); |
||||||
|
|
||||||
|
/** |
||||||
|
* 中等反馈 |
||||||
|
*/ |
||||||
|
const medium = useCallback(async () => { |
||||||
|
if (hapticsEnabled) { |
||||||
|
await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); |
||||||
|
} |
||||||
|
}, [hapticsEnabled]); |
||||||
|
|
||||||
|
/** |
||||||
|
* 重触反馈 |
||||||
|
*/ |
||||||
|
const heavy = useCallback(async () => { |
||||||
|
if (hapticsEnabled) { |
||||||
|
await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy); |
||||||
|
} |
||||||
|
}, [hapticsEnabled]); |
||||||
|
|
||||||
|
/** |
||||||
|
* 成功反馈 |
||||||
|
*/ |
||||||
|
const success = useCallback(async () => { |
||||||
|
if (hapticsEnabled) { |
||||||
|
await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success); |
||||||
|
} |
||||||
|
}, [hapticsEnabled]); |
||||||
|
|
||||||
|
/** |
||||||
|
* 警告反馈 |
||||||
|
*/ |
||||||
|
const warning = useCallback(async () => { |
||||||
|
if (hapticsEnabled) { |
||||||
|
await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning); |
||||||
|
} |
||||||
|
}, [hapticsEnabled]); |
||||||
|
|
||||||
|
/** |
||||||
|
* 错误反馈 |
||||||
|
*/ |
||||||
|
const error = useCallback(async () => { |
||||||
|
if (hapticsEnabled) { |
||||||
|
await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error); |
||||||
|
} |
||||||
|
}, [hapticsEnabled]); |
||||||
|
|
||||||
|
/** |
||||||
|
* 选择反馈 |
||||||
|
*/ |
||||||
|
const selection = useCallback(async () => { |
||||||
|
if (hapticsEnabled) { |
||||||
|
await Haptics.selectionAsync(); |
||||||
|
} |
||||||
|
}, [hapticsEnabled]); |
||||||
|
|
||||||
|
return { |
||||||
|
light, |
||||||
|
medium, |
||||||
|
heavy, |
||||||
|
success, |
||||||
|
warning, |
||||||
|
error, |
||||||
|
selection, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 使用示例： |
||||||
|
*
|
||||||
|
* function MyComponent() { |
||||||
|
* const haptics = useHaptics(); |
||||||
|
*
|
||||||
|
* const handlePress = () => { |
||||||
|
* haptics.light(); |
||||||
|
* // 执行其他操作
|
||||||
|
* }; |
||||||
|
*
|
||||||
|
* const handleSuccess = () => { |
||||||
|
* haptics.success(); |
||||||
|
* // 显示成功消息
|
||||||
|
* }; |
||||||
|
*
|
||||||
|
* return ( |
||||||
|
* <TouchableOpacity onPress={handlePress}> |
||||||
|
* <Text>Press me</Text> |
||||||
|
* </TouchableOpacity> |
||||||
|
* ); |
||||||
|
* } |
||||||
|
*/ |
||||||
|
|
||||||
@ -0,0 +1,61 @@ |
|||||||
|
/** |
||||||
|
* 节流 Hook |
||||||
|
* 使用 lodash-es 的 throttle 函数 |
||||||
|
*/ |
||||||
|
|
||||||
|
import { useEffect, useMemo, useRef } from 'react'; |
||||||
|
import { throttle } from 'lodash-es'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 节流函数 Hook |
||||||
|
* @param callback 需要节流的函数 |
||||||
|
* @param delay 延迟时间（毫秒） |
||||||
|
* @param options 节流选项 |
||||||
|
* @returns 节流后的函数 |
||||||
|
*/ |
||||||
|
export function useThrottle<T extends (...args: any[]) => any>( |
||||||
|
callback: T, |
||||||
|
delay: number = 300, |
||||||
|
options?: { |
||||||
|
leading?: boolean; |
||||||
|
trailing?: boolean; |
||||||
|
} |
||||||
|
): T { |
||||||
|
const callbackRef = useRef(callback); |
||||||
|
|
||||||
|
// 更新 callback ref
|
||||||
|
useEffect(() => { |
||||||
|
callbackRef.current = callback; |
||||||
|
}, [callback]); |
||||||
|
|
||||||
|
// 创建节流函数
|
||||||
|
const throttledCallback = useMemo(() => { |
||||||
|
const func = (...args: Parameters<T>) => { |
||||||
|
callbackRef.current(...args); |
||||||
|
}; |
||||||
|
|
||||||
|
return throttle(func, delay, options); |
||||||
|
}, [delay, options]); |
||||||
|
|
||||||
|
// 清理
|
||||||
|
useEffect(() => { |
||||||
|
return () => { |
||||||
|
throttledCallback.cancel(); |
||||||
|
}; |
||||||
|
}, [throttledCallback]); |
||||||
|
|
||||||
|
return throttledCallback as T; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 使用示例： |
||||||
|
*
|
||||||
|
* const handleScroll = useThrottle((event) => { |
||||||
|
* console.log('Scrolling:', event); |
||||||
|
* }, 200); |
||||||
|
*
|
||||||
|
* <ScrollView onScroll={handleScroll}> |
||||||
|
* ... |
||||||
|
* </ScrollView> |
||||||
|
*/ |
||||||
|
|
||||||
@ -0,0 +1,29 @@ |
|||||||
|
/** |
||||||
|
* 统一导出所有模块 |
||||||
|
*/ |
||||||
|
|
||||||
|
// Utils
|
||||||
|
export { default as api, request } from './utils/api'; |
||||||
|
export { default as Storage, STORAGE_KEYS } from './utils/storage'; |
||||||
|
export * from './utils/date'; |
||||||
|
|
||||||
|
// Stores
|
||||||
|
export * from './stores/userStore'; |
||||||
|
export * from './stores/settingsStore'; |
||||||
|
|
||||||
|
// Schemas
|
||||||
|
export * from './schemas/auth'; |
||||||
|
export * from './schemas/user'; |
||||||
|
|
||||||
|
// Services
|
||||||
|
export { default as authService } from './services/authService'; |
||||||
|
export { default as userService } from './services/userService'; |
||||||
|
|
||||||
|
// Hooks
|
||||||
|
export * from './hooks/useDebounce'; |
||||||
|
export * from './hooks/useThrottle'; |
||||||
|
export * from './hooks/useHaptics'; |
||||||
|
|
||||||
|
// Types
|
||||||
|
export * from './types'; |
||||||
|
|
||||||
@ -0,0 +1,130 @@ |
|||||||
|
/** |
||||||
|
* 认证相关的 Zod 验证 Schema |
||||||
|
*/ |
||||||
|
|
||||||
|
import { z } from 'zod'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 登录表单 Schema |
||||||
|
*/ |
||||||
|
export const loginSchema = z.object({ |
||||||
|
email: z |
||||||
|
.string() |
||||||
|
.min(1, '请输入邮箱') |
||||||
|
.email('请输入有效的邮箱地址'), |
||||||
|
password: z |
||||||
|
.string() |
||||||
|
.min(6, '密码至少6个字符') |
||||||
|
.max(20, '密码最多20个字符'), |
||||||
|
rememberMe: z.boolean().optional(), |
||||||
|
}); |
||||||
|
|
||||||
|
/** |
||||||
|
* 注册表单 Schema |
||||||
|
*/ |
||||||
|
export const registerSchema = z |
||||||
|
.object({ |
||||||
|
username: z |
||||||
|
.string() |
||||||
|
.min(3, '用户名至少3个字符') |
||||||
|
.max(20, '用户名最多20个字符') |
||||||
|
.regex(/^[a-zA-Z0-9_]+$/, '用户名只能包含字母、数字和下划线'), |
||||||
|
email: z |
||||||
|
.string() |
||||||
|
.min(1, '请输入邮箱') |
||||||
|
.email('请输入有效的邮箱地址'), |
||||||
|
password: z |
||||||
|
.string() |
||||||
|
.min(6, '密码至少6个字符') |
||||||
|
.max(20, '密码最多20个字符') |
||||||
|
.regex(/[A-Z]/, '密码必须包含至少一个大写字母') |
||||||
|
.regex(/[a-z]/, '密码必须包含至少一个小写字母') |
||||||
|
.regex(/[0-9]/, '密码必须包含至少一个数字'), |
||||||
|
confirmPassword: z.string().min(1, '请确认密码'), |
||||||
|
agreeToTerms: z.boolean().refine((val) => val === true, { |
||||||
|
message: '请同意服务条款', |
||||||
|
}), |
||||||
|
}) |
||||||
|
.refine((data) => data.password === data.confirmPassword, { |
||||||
|
message: '两次输入的密码不一致', |
||||||
|
path: ['confirmPassword'], |
||||||
|
}); |
||||||
|
|
||||||
|
/** |
||||||
|
* 忘记密码 Schema |
||||||
|
*/ |
||||||
|
export const forgotPasswordSchema = z.object({ |
||||||
|
email: z |
||||||
|
.string() |
||||||
|
.min(1, '请输入邮箱') |
||||||
|
.email('请输入有效的邮箱地址'), |
||||||
|
}); |
||||||
|
|
||||||
|
/** |
||||||
|
* 重置密码 Schema |
||||||
|
*/ |
||||||
|
export const resetPasswordSchema = z |
||||||
|
.object({ |
||||||
|
code: z |
||||||
|
.string() |
||||||
|
.min(6, '验证码为6位') |
||||||
|
.max(6, '验证码为6位') |
||||||
|
.regex(/^\d{6}$/, '验证码必须是6位数字'), |
||||||
|
password: z |
||||||
|
.string() |
||||||
|
.min(6, '密码至少6个字符') |
||||||
|
.max(20, '密码最多20个字符'), |
||||||
|
confirmPassword: z.string().min(1, '请确认密码'), |
||||||
|
}) |
||||||
|
.refine((data) => data.password === data.confirmPassword, { |
||||||
|
message: '两次输入的密码不一致', |
||||||
|
path: ['confirmPassword'], |
||||||
|
}); |
||||||
|
|
||||||
|
/** |
||||||
|
* 修改密码 Schema |
||||||
|
*/ |
||||||
|
export const changePasswordSchema = z |
||||||
|
.object({ |
||||||
|
oldPassword: z.string().min(1, '请输入当前密码'), |
||||||
|
newPassword: z |
||||||
|
.string() |
||||||
|
.min(6, '新密码至少6个字符') |
||||||
|
.max(20, '新密码最多20个字符'), |
||||||
|
confirmPassword: z.string().min(1, '请确认新密码'), |
||||||
|
}) |
||||||
|
.refine((data) => data.newPassword === data.confirmPassword, { |
||||||
|
message: '两次输入的密码不一致', |
||||||
|
path: ['confirmPassword'], |
||||||
|
}) |
||||||
|
.refine((data) => data.oldPassword !== data.newPassword, { |
||||||
|
message: '新密码不能与当前密码相同', |
||||||
|
path: ['newPassword'], |
||||||
|
}); |
||||||
|
|
||||||
|
/** |
||||||
|
* 手机号登录 Schema |
||||||
|
*/ |
||||||
|
export const phoneLoginSchema = z.object({ |
||||||
|
phone: z |
||||||
|
.string() |
||||||
|
.min(11, '请输入11位手机号') |
||||||
|
.max(11, '请输入11位手机号') |
||||||
|
.regex(/^1[3-9]\d{9}$/, '请输入有效的手机号'), |
||||||
|
code: z |
||||||
|
.string() |
||||||
|
.min(6, '验证码为6位') |
||||||
|
.max(6, '验证码为6位') |
||||||
|
.regex(/^\d{6}$/, '验证码必须是6位数字'), |
||||||
|
}); |
||||||
|
|
||||||
|
/** |
||||||
|
* TypeScript 类型推断 |
||||||
|
*/ |
||||||
|
export type LoginFormData = z.infer<typeof loginSchema>; |
||||||
|
export type RegisterFormData = z.infer<typeof registerSchema>; |
||||||
|
export type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>; |
||||||
|
export type ResetPasswordFormData = z.infer<typeof resetPasswordSchema>; |
||||||
|
export type ChangePasswordFormData = z.infer<typeof changePasswordSchema>; |
||||||
|
export type PhoneLoginFormData = z.infer<typeof phoneLoginSchema>; |
||||||
|
|
||||||
@ -0,0 +1,76 @@ |
|||||||
|
/** |
||||||
|
* 用户相关的 Zod 验证 Schema |
||||||
|
*/ |
||||||
|
|
||||||
|
import { z } from 'zod'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 用户信息 Schema |
||||||
|
*/ |
||||||
|
export const userSchema = z.object({ |
||||||
|
id: z.string(), |
||||||
|
username: z.string(), |
||||||
|
email: z.string().email(), |
||||||
|
avatar: z.string().url().optional(), |
||||||
|
nickname: z.string().optional(), |
||||||
|
phone: z.string().optional(), |
||||||
|
createdAt: z.string().optional(), |
||||||
|
}); |
||||||
|
|
||||||
|
/** |
||||||
|
* 更新用户资料 Schema |
||||||
|
*/ |
||||||
|
export const updateProfileSchema = z.object({ |
||||||
|
nickname: z |
||||||
|
.string() |
||||||
|
.min(2, '昵称至少2个字符') |
||||||
|
.max(20, '昵称最多20个字符') |
||||||
|
.optional(), |
||||||
|
avatar: z.string().url('请输入有效的头像URL').optional(), |
||||||
|
phone: z |
||||||
|
.string() |
||||||
|
.regex(/^1[3-9]\d{9}$/, '请输入有效的手机号') |
||||||
|
.optional() |
||||||
|
.or(z.literal('')), |
||||||
|
bio: z.string().max(200, '个人简介最多200个字符').optional(), |
||||||
|
}); |
||||||
|
|
||||||
|
/** |
||||||
|
* 绑定手机号 Schema |
||||||
|
*/ |
||||||
|
export const bindPhoneSchema = z.object({ |
||||||
|
phone: z |
||||||
|
.string() |
||||||
|
.min(11, '请输入11位手机号') |
||||||
|
.max(11, '请输入11位手机号') |
||||||
|
.regex(/^1[3-9]\d{9}$/, '请输入有效的手机号'), |
||||||
|
code: z |
||||||
|
.string() |
||||||
|
.min(6, '验证码为6位') |
||||||
|
.max(6, '验证码为6位') |
||||||
|
.regex(/^\d{6}$/, '验证码必须是6位数字'), |
||||||
|
}); |
||||||
|
|
||||||
|
/** |
||||||
|
* 绑定邮箱 Schema |
||||||
|
*/ |
||||||
|
export const bindEmailSchema = z.object({ |
||||||
|
email: z |
||||||
|
.string() |
||||||
|
.min(1, '请输入邮箱') |
||||||
|
.email('请输入有效的邮箱地址'), |
||||||
|
code: z |
||||||
|
.string() |
||||||
|
.min(6, '验证码为6位') |
||||||
|
.max(6, '验证码为6位') |
||||||
|
.regex(/^\d{6}$/, '验证码必须是6位数字'), |
||||||
|
}); |
||||||
|
|
||||||
|
/** |
||||||
|
* TypeScript 类型推断 |
||||||
|
*/ |
||||||
|
export type User = z.infer<typeof userSchema>; |
||||||
|
export type UpdateProfileFormData = z.infer<typeof updateProfileSchema>; |
||||||
|
export type BindPhoneFormData = z.infer<typeof bindPhoneSchema>; |
||||||
|
export type BindEmailFormData = z.infer<typeof bindEmailSchema>; |
||||||
|
|
||||||
@ -0,0 +1,134 @@ |
|||||||
|
/** |
||||||
|
* 认证服务 |
||||||
|
* 处理登录、注册等认证相关的 API 请求 |
||||||
|
*/ |
||||||
|
|
||||||
|
import { request } from '@/src/utils/api'; |
||||||
|
import type { |
||||||
|
LoginFormData, |
||||||
|
RegisterFormData, |
||||||
|
ForgotPasswordFormData, |
||||||
|
ResetPasswordFormData, |
||||||
|
ChangePasswordFormData, |
||||||
|
PhoneLoginFormData, |
||||||
|
} from '@/src/schemas/auth'; |
||||||
|
import type { User } from '@/src/schemas/user'; |
||||||
|
|
||||||
|
/** |
||||||
|
* API 响应接口 |
||||||
|
*/ |
||||||
|
interface ApiResponse<T = any> { |
||||||
|
code: number; |
||||||
|
message: string; |
||||||
|
data: T; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 登录响应 |
||||||
|
*/ |
||||||
|
interface LoginResponse { |
||||||
|
user: User; |
||||||
|
token: string; |
||||||
|
refreshToken?: string; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 认证服务类 |
||||||
|
*/ |
||||||
|
class AuthService { |
||||||
|
/** |
||||||
|
* 邮箱登录 |
||||||
|
*/ |
||||||
|
async login(data: LoginFormData): Promise<LoginResponse> { |
||||||
|
const response = await request.post<ApiResponse<LoginResponse>>( |
||||||
|
'/auth/login', |
||||||
|
data |
||||||
|
); |
||||||
|
return response.data; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 手机号登录 |
||||||
|
*/ |
||||||
|
async phoneLogin(data: PhoneLoginFormData): Promise<LoginResponse> { |
||||||
|
const response = await request.post<ApiResponse<LoginResponse>>( |
||||||
|
'/auth/phone-login', |
||||||
|
data |
||||||
|
); |
||||||
|
return response.data; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 注册 |
||||||
|
*/ |
||||||
|
async register(data: RegisterFormData): Promise<LoginResponse> { |
||||||
|
const response = await request.post<ApiResponse<LoginResponse>>( |
||||||
|
'/auth/register', |
||||||
|
data |
||||||
|
); |
||||||
|
return response.data; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 登出 |
||||||
|
*/ |
||||||
|
async logout(): Promise<void> { |
||||||
|
await request.post('/auth/logout'); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 发送忘记密码邮件 |
||||||
|
*/ |
||||||
|
async forgotPassword(data: ForgotPasswordFormData): Promise<void> { |
||||||
|
await request.post('/auth/forgot-password', data); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 重置密码 |
||||||
|
*/ |
||||||
|
async resetPassword(data: ResetPasswordFormData): Promise<void> { |
||||||
|
await request.post('/auth/reset-password', data); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 修改密码 |
||||||
|
*/ |
||||||
|
async changePassword(data: ChangePasswordFormData): Promise<void> { |
||||||
|
await request.post('/auth/change-password', data); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 发送验证码 |
||||||
|
*/ |
||||||
|
async sendVerificationCode(phone: string): Promise<void> { |
||||||
|
await request.post('/auth/send-code', { phone }); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 刷新 token |
||||||
|
*/ |
||||||
|
async refreshToken(refreshToken: string): Promise<{ token: string }> { |
||||||
|
const response = await request.post<ApiResponse<{ token: string }>>( |
||||||
|
'/auth/refresh-token', |
||||||
|
{ refreshToken } |
||||||
|
); |
||||||
|
return response.data; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 验证 token 是否有效 |
||||||
|
*/ |
||||||
|
async verifyToken(): Promise<boolean> { |
||||||
|
try { |
||||||
|
await request.get('/auth/verify-token'); |
||||||
|
return true; |
||||||
|
} catch { |
||||||
|
return false; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 导出单例
|
||||||
|
export const authService = new AuthService(); |
||||||
|
export default authService; |
||||||
|
|
||||||
@ -0,0 +1,90 @@ |
|||||||
|
/** |
||||||
|
* 用户服务 |
||||||
|
* 处理用户信息相关的 API 请求 |
||||||
|
*/ |
||||||
|
|
||||||
|
import { request } from '@/src/utils/api'; |
||||||
|
import type { User, UpdateProfileFormData } from '@/src/schemas/user'; |
||||||
|
|
||||||
|
/** |
||||||
|
* API 响应接口 |
||||||
|
*/ |
||||||
|
interface ApiResponse<T = any> { |
||||||
|
code: number; |
||||||
|
message: string; |
||||||
|
data: T; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 用户服务类 |
||||||
|
*/ |
||||||
|
class UserService { |
||||||
|
/** |
||||||
|
* 获取当前用户信息 |
||||||
|
*/ |
||||||
|
async getCurrentUser(): Promise<User> { |
||||||
|
const response = await request.get<ApiResponse<User>>('/user/me'); |
||||||
|
return response.data; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 获取用户信息（通过 ID） |
||||||
|
*/ |
||||||
|
async getUserById(userId: string): Promise<User> { |
||||||
|
const response = await request.get<ApiResponse<User>>(`/user/${userId}`); |
||||||
|
return response.data; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 更新用户资料 |
||||||
|
*/ |
||||||
|
async updateProfile(data: UpdateProfileFormData): Promise<User> { |
||||||
|
const response = await request.put<ApiResponse<User>>('/user/profile', data); |
||||||
|
return response.data; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 上传头像 |
||||||
|
*/ |
||||||
|
async uploadAvatar(file: File | Blob): Promise<{ url: string }> { |
||||||
|
const formData = new FormData(); |
||||||
|
formData.append('avatar', file); |
||||||
|
|
||||||
|
const response = await request.post<ApiResponse<{ url: string }>>( |
||||||
|
'/user/avatar', |
||||||
|
formData, |
||||||
|
{ |
||||||
|
headers: { |
||||||
|
'Content-Type': 'multipart/form-data', |
||||||
|
}, |
||||||
|
} |
||||||
|
); |
||||||
|
return response.data; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 绑定手机号 |
||||||
|
*/ |
||||||
|
async bindPhone(phone: string, code: string): Promise<void> { |
||||||
|
await request.post('/user/bind-phone', { phone, code }); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 绑定邮箱 |
||||||
|
*/ |
||||||
|
async bindEmail(email: string, code: string): Promise<void> { |
||||||
|
await request.post('/user/bind-email', { email, code }); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 注销账号 |
||||||
|
*/ |
||||||
|
async deleteAccount(): Promise<void> { |
||||||
|
await request.delete('/user/account'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 导出单例
|
||||||
|
export const userService = new UserService(); |
||||||
|
export default userService; |
||||||
|
|
||||||
@ -0,0 +1,147 @@ |
|||||||
|
/** |
||||||
|
* 应用设置状态管理 |
||||||
|
* 使用 Zustand + AsyncStorage 持久化 |
||||||
|
*/ |
||||||
|
|
||||||
|
import { create } from 'zustand'; |
||||||
|
import { persist, createJSONStorage } from 'zustand/middleware'; |
||||||
|
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 主题类型 |
||||||
|
*/ |
||||||
|
export type Theme = 'light' | 'dark' | 'auto'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 语言类型 |
||||||
|
*/ |
||||||
|
export type Language = 'zh-CN' | 'en-US'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 设置状态接口 |
||||||
|
*/ |
||||||
|
interface SettingsState { |
||||||
|
// 状态
|
||||||
|
theme: Theme; |
||||||
|
language: Language; |
||||||
|
notificationsEnabled: boolean; |
||||||
|
soundEnabled: boolean; |
||||||
|
hapticsEnabled: boolean; |
||||||
|
|
||||||
|
// 操作
|
||||||
|
setTheme: (theme: Theme) => void; |
||||||
|
setLanguage: (language: Language) => void; |
||||||
|
setNotificationsEnabled: (enabled: boolean) => void; |
||||||
|
setSoundEnabled: (enabled: boolean) => void; |
||||||
|
setHapticsEnabled: (enabled: boolean) => void; |
||||||
|
resetSettings: () => void; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 默认设置 |
||||||
|
*/ |
||||||
|
const DEFAULT_SETTINGS = { |
||||||
|
theme: 'auto' as Theme, |
||||||
|
language: 'zh-CN' as Language, |
||||||
|
notificationsEnabled: true, |
||||||
|
soundEnabled: true, |
||||||
|
hapticsEnabled: true, |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 设置状态 Store |
||||||
|
*/ |
||||||
|
export const useSettingsStore = create<SettingsState>()( |
||||||
|
persist( |
||||||
|
(set) => ({ |
||||||
|
// 初始状态
|
||||||
|
...DEFAULT_SETTINGS, |
||||||
|
|
||||||
|
// 设置主题
|
||||||
|
setTheme: (theme) => { |
||||||
|
set({ theme }); |
||||||
|
if (__DEV__) { |
||||||
|
console.log('🎨 Theme changed:', theme); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 设置语言
|
||||||
|
setLanguage: (language) => { |
||||||
|
set({ language }); |
||||||
|
if (__DEV__) { |
||||||
|
console.log('🌐 Language changed:', language); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 设置通知开关
|
||||||
|
setNotificationsEnabled: (enabled) => { |
||||||
|
set({ notificationsEnabled: enabled }); |
||||||
|
if (__DEV__) { |
||||||
|
console.log('🔔 Notifications:', enabled ? 'enabled' : 'disabled'); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 设置声音开关
|
||||||
|
setSoundEnabled: (enabled) => { |
||||||
|
set({ soundEnabled: enabled }); |
||||||
|
if (__DEV__) { |
||||||
|
console.log('🔊 Sound:', enabled ? 'enabled' : 'disabled'); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 设置触觉反馈开关
|
||||||
|
setHapticsEnabled: (enabled) => { |
||||||
|
set({ hapticsEnabled: enabled }); |
||||||
|
if (__DEV__) { |
||||||
|
console.log('📳 Haptics:', enabled ? 'enabled' : 'disabled'); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 重置所有设置
|
||||||
|
resetSettings: () => { |
||||||
|
set(DEFAULT_SETTINGS); |
||||||
|
if (__DEV__) { |
||||||
|
console.log('🔄 Settings reset to default'); |
||||||
|
} |
||||||
|
}, |
||||||
|
}), |
||||||
|
{ |
||||||
|
name: 'settings-storage', |
||||||
|
storage: createJSONStorage(() => AsyncStorage), |
||||||
|
} |
||||||
|
) |
||||||
|
); |
||||||
|
|
||||||
|
/** |
||||||
|
* 选择器 Hooks |
||||||
|
*/ |
||||||
|
|
||||||
|
// 获取主题
|
||||||
|
export const useTheme = () => useSettingsStore((state) => state.theme); |
||||||
|
|
||||||
|
// 获取语言
|
||||||
|
export const useLanguage = () => useSettingsStore((state) => state.language); |
||||||
|
|
||||||
|
// 获取通知状态
|
||||||
|
export const useNotificationsEnabled = () => |
||||||
|
useSettingsStore((state) => state.notificationsEnabled); |
||||||
|
|
||||||
|
// 获取声音状态
|
||||||
|
export const useSoundEnabled = () => |
||||||
|
useSettingsStore((state) => state.soundEnabled); |
||||||
|
|
||||||
|
// 获取触觉反馈状态
|
||||||
|
export const useHapticsEnabled = () => |
||||||
|
useSettingsStore((state) => state.hapticsEnabled); |
||||||
|
|
||||||
|
// 获取设置操作方法
|
||||||
|
export const useSettingsActions = () => |
||||||
|
useSettingsStore((state) => ({ |
||||||
|
setTheme: state.setTheme, |
||||||
|
setLanguage: state.setLanguage, |
||||||
|
setNotificationsEnabled: state.setNotificationsEnabled, |
||||||
|
setSoundEnabled: state.setSoundEnabled, |
||||||
|
setHapticsEnabled: state.setHapticsEnabled, |
||||||
|
resetSettings: state.resetSettings, |
||||||
|
})); |
||||||
|
|
||||||
@ -0,0 +1,142 @@ |
|||||||
|
/** |
||||||
|
* 用户状态管理 |
||||||
|
* 使用 Zustand + AsyncStorage 持久化 |
||||||
|
*/ |
||||||
|
|
||||||
|
import { create } from 'zustand'; |
||||||
|
import { persist, createJSONStorage } from 'zustand/middleware'; |
||||||
|
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 用户信息接口 |
||||||
|
*/ |
||||||
|
export interface User { |
||||||
|
id: string; |
||||||
|
username: string; |
||||||
|
email: string; |
||||||
|
avatar?: string; |
||||||
|
nickname?: string; |
||||||
|
phone?: string; |
||||||
|
createdAt?: string; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 用户状态接口 |
||||||
|
*/ |
||||||
|
interface UserState { |
||||||
|
// 状态
|
||||||
|
user: User | null; |
||||||
|
isLoggedIn: boolean; |
||||||
|
token: string | null; |
||||||
|
|
||||||
|
// 操作
|
||||||
|
setUser: (user: User) => void; |
||||||
|
setToken: (token: string) => void; |
||||||
|
login: (user: User, token: string) => void; |
||||||
|
logout: () => void; |
||||||
|
updateUser: (updates: Partial<User>) => void; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 用户状态 Store |
||||||
|
*/ |
||||||
|
export const useUserStore = create<UserState>()( |
||||||
|
persist( |
||||||
|
(set, get) => ({ |
||||||
|
// 初始状态
|
||||||
|
user: null, |
||||||
|
isLoggedIn: false, |
||||||
|
token: null, |
||||||
|
|
||||||
|
// 设置用户信息
|
||||||
|
setUser: (user) => { |
||||||
|
set({ user, isLoggedIn: true }); |
||||||
|
}, |
||||||
|
|
||||||
|
// 设置 token
|
||||||
|
setToken: (token) => { |
||||||
|
set({ token }); |
||||||
|
}, |
||||||
|
|
||||||
|
// 登录
|
||||||
|
login: (user, token) => { |
||||||
|
set({ |
||||||
|
user, |
||||||
|
token, |
||||||
|
isLoggedIn: true, |
||||||
|
}); |
||||||
|
|
||||||
|
// 同时保存 token 到 AsyncStorage（用于 API 请求）
|
||||||
|
AsyncStorage.setItem('auth_token', token); |
||||||
|
|
||||||
|
if (__DEV__) { |
||||||
|
console.log('✅ User logged in:', user.username); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 登出
|
||||||
|
logout: () => { |
||||||
|
set({ |
||||||
|
user: null, |
||||||
|
token: null, |
||||||
|
isLoggedIn: false, |
||||||
|
}); |
||||||
|
|
||||||
|
// 清除 AsyncStorage 中的 token
|
||||||
|
AsyncStorage.removeItem('auth_token'); |
||||||
|
|
||||||
|
if (__DEV__) { |
||||||
|
console.log('👋 User logged out'); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 更新用户信息
|
||||||
|
updateUser: (updates) => { |
||||||
|
const currentUser = get().user; |
||||||
|
if (currentUser) { |
||||||
|
set({ |
||||||
|
user: { ...currentUser, ...updates }, |
||||||
|
}); |
||||||
|
|
||||||
|
if (__DEV__) { |
||||||
|
console.log('📝 User updated:', updates); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
}), |
||||||
|
{ |
||||||
|
name: 'user-storage', // AsyncStorage 中的键名
|
||||||
|
storage: createJSONStorage(() => AsyncStorage), |
||||||
|
// 可以选择性地持久化某些字段
|
||||||
|
partialize: (state) => ({ |
||||||
|
user: state.user, |
||||||
|
token: state.token, |
||||||
|
isLoggedIn: state.isLoggedIn, |
||||||
|
}), |
||||||
|
} |
||||||
|
) |
||||||
|
); |
||||||
|
|
||||||
|
/** |
||||||
|
* 选择器 Hooks（优化性能，避免不必要的重渲染） |
||||||
|
*/ |
||||||
|
|
||||||
|
// 获取用户信息
|
||||||
|
export const useUser = () => useUserStore((state) => state.user); |
||||||
|
|
||||||
|
// 获取登录状态
|
||||||
|
export const useIsLoggedIn = () => useUserStore((state) => state.isLoggedIn); |
||||||
|
|
||||||
|
// 获取 token
|
||||||
|
export const useToken = () => useUserStore((state) => state.token); |
||||||
|
|
||||||
|
// 获取用户操作方法
|
||||||
|
export const useUserActions = () => |
||||||
|
useUserStore((state) => ({ |
||||||
|
setUser: state.setUser, |
||||||
|
setToken: state.setToken, |
||||||
|
login: state.login, |
||||||
|
logout: state.logout, |
||||||
|
updateUser: state.updateUser, |
||||||
|
})); |
||||||
|
|
||||||
@ -0,0 +1,81 @@ |
|||||||
|
/** |
||||||
|
* 全局类型定义 |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* API 响应基础接口 |
||||||
|
*/ |
||||||
|
export interface ApiResponse<T = any> { |
||||||
|
code: number; |
||||||
|
message: string; |
||||||
|
data: T; |
||||||
|
timestamp?: number; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 分页参数 |
||||||
|
*/ |
||||||
|
export interface PaginationParams { |
||||||
|
page: number; |
||||||
|
pageSize: number; |
||||||
|
sortBy?: string; |
||||||
|
sortOrder?: 'asc' | 'desc'; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 分页响应 |
||||||
|
*/ |
||||||
|
export interface PaginatedResponse<T> { |
||||||
|
items: T[]; |
||||||
|
total: number; |
||||||
|
page: number; |
||||||
|
pageSize: number; |
||||||
|
totalPages: number; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 错误响应 |
||||||
|
*/ |
||||||
|
export interface ErrorResponse { |
||||||
|
code: number; |
||||||
|
message: string; |
||||||
|
errors?: Record<string, string[]>; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 上传文件响应 |
||||||
|
*/ |
||||||
|
export interface UploadResponse { |
||||||
|
url: string; |
||||||
|
filename: string; |
||||||
|
size: number; |
||||||
|
mimeType: string; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 导航参数类型 |
||||||
|
*/ |
||||||
|
export type RootStackParamList = { |
||||||
|
Home: undefined; |
||||||
|
Profile: { userId: string }; |
||||||
|
Settings: undefined; |
||||||
|
Login: undefined; |
||||||
|
Register: undefined; |
||||||
|
// 添加更多路由...
|
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 环境变量类型 |
||||||
|
*/ |
||||||
|
declare global { |
||||||
|
namespace NodeJS { |
||||||
|
interface ProcessEnv { |
||||||
|
EXPO_PUBLIC_API_URL: string; |
||||||
|
EXPO_PUBLIC_APP_NAME: string; |
||||||
|
EXPO_PUBLIC_APP_VERSION: string; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export {}; |
||||||
|
|
||||||
@ -0,0 +1,144 @@ |
|||||||
|
/** |
||||||
|
* Axios API 配置 |
||||||
|
* 统一管理 HTTP 请求 |
||||||
|
*/ |
||||||
|
|
||||||
|
import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'; |
||||||
|
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||||
|
|
||||||
|
// API 基础配置
|
||||||
|
const API_CONFIG = { |
||||||
|
baseURL: process.env.EXPO_PUBLIC_API_URL || 'https://api.example.com', |
||||||
|
timeout: 10000, |
||||||
|
headers: { |
||||||
|
'Content-Type': 'application/json', |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
// 创建 axios 实例
|
||||||
|
const api = axios.create(API_CONFIG); |
||||||
|
|
||||||
|
/** |
||||||
|
* 请求拦截器 |
||||||
|
* 在请求发送前添加 token 等信息 |
||||||
|
*/ |
||||||
|
api.interceptors.request.use( |
||||||
|
async (config) => { |
||||||
|
try { |
||||||
|
// 从本地存储获取 token
|
||||||
|
const token = await AsyncStorage.getItem('auth_token'); |
||||||
|
|
||||||
|
if (token) { |
||||||
|
config.headers.Authorization = `Bearer ${token}`; |
||||||
|
} |
||||||
|
|
||||||
|
// 打印请求信息（开发环境）
|
||||||
|
if (__DEV__) { |
||||||
|
console.log('📤 API Request:', { |
||||||
|
method: config.method?.toUpperCase(), |
||||||
|
url: config.url, |
||||||
|
data: config.data, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
return config; |
||||||
|
} catch (error) { |
||||||
|
console.error('Request interceptor error:', error); |
||||||
|
return config; |
||||||
|
} |
||||||
|
}, |
||||||
|
(error) => { |
||||||
|
console.error('Request error:', error); |
||||||
|
return Promise.reject(error); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
/** |
||||||
|
* 响应拦截器 |
||||||
|
* 统一处理响应和错误 |
||||||
|
*/ |
||||||
|
api.interceptors.response.use( |
||||||
|
(response: AxiosResponse) => { |
||||||
|
// 打印响应信息（开发环境）
|
||||||
|
if (__DEV__) { |
||||||
|
console.log('📥 API Response:', { |
||||||
|
url: response.config.url, |
||||||
|
status: response.status, |
||||||
|
data: response.data, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// 返回响应数据
|
||||||
|
return response.data; |
||||||
|
}, |
||||||
|
async (error: AxiosError) => { |
||||||
|
// 打印错误信息
|
||||||
|
console.error('❌ API Error:', { |
||||||
|
url: error.config?.url, |
||||||
|
status: error.response?.status, |
||||||
|
message: error.message, |
||||||
|
data: error.response?.data, |
||||||
|
}); |
||||||
|
|
||||||
|
// 处理不同的错误状态码
|
||||||
|
if (error.response) { |
||||||
|
switch (error.response.status) { |
||||||
|
case 401: |
||||||
|
// 未授权，清除 token 并跳转到登录页
|
||||||
|
await AsyncStorage.removeItem('auth_token'); |
||||||
|
// TODO: 导航到登录页
|
||||||
|
// router.replace('/login');
|
||||||
|
break; |
||||||
|
|
||||||
|
case 403: |
||||||
|
// 禁止访问
|
||||||
|
console.error('Access forbidden'); |
||||||
|
break; |
||||||
|
|
||||||
|
case 404: |
||||||
|
// 资源不存在
|
||||||
|
console.error('Resource not found'); |
||||||
|
break; |
||||||
|
|
||||||
|
case 500: |
||||||
|
// 服务器错误
|
||||||
|
console.error('Server error'); |
||||||
|
break; |
||||||
|
|
||||||
|
default: |
||||||
|
console.error('Unknown error'); |
||||||
|
} |
||||||
|
} else if (error.request) { |
||||||
|
// 请求已发送但没有收到响应
|
||||||
|
console.error('No response received'); |
||||||
|
} else { |
||||||
|
// 请求配置出错
|
||||||
|
console.error('Request configuration error'); |
||||||
|
} |
||||||
|
|
||||||
|
return Promise.reject(error); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
/** |
||||||
|
* 通用请求方法 |
||||||
|
*/ |
||||||
|
export const request = { |
||||||
|
get: <T = any>(url: string, config?: AxiosRequestConfig) =>
|
||||||
|
api.get<T, T>(url, config), |
||||||
|
|
||||||
|
post: <T = any>(url: string, data?: any, config?: AxiosRequestConfig) =>
|
||||||
|
api.post<T, T>(url, data, config), |
||||||
|
|
||||||
|
put: <T = any>(url: string, data?: any, config?: AxiosRequestConfig) =>
|
||||||
|
api.put<T, T>(url, data, config), |
||||||
|
|
||||||
|
delete: <T = any>(url: string, config?: AxiosRequestConfig) =>
|
||||||
|
api.delete<T, T>(url, config), |
||||||
|
|
||||||
|
patch: <T = any>(url: string, data?: any, config?: AxiosRequestConfig) =>
|
||||||
|
api.patch<T, T>(url, data, config), |
||||||
|
}; |
||||||
|
|
||||||
|
export default api; |
||||||
|
|
||||||
@ -0,0 +1,219 @@ |
|||||||
|
/** |
||||||
|
* Day.js 日期工具函数 |
||||||
|
* 统一管理日期格式化和处理 |
||||||
|
*/ |
||||||
|
|
||||||
|
import dayjs from 'dayjs'; |
||||||
|
import relativeTime from 'dayjs/plugin/relativeTime'; |
||||||
|
import calendar from 'dayjs/plugin/calendar'; |
||||||
|
import duration from 'dayjs/plugin/duration'; |
||||||
|
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'; |
||||||
|
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'; |
||||||
|
import 'dayjs/locale/zh-cn'; |
||||||
|
|
||||||
|
// 扩展插件
|
||||||
|
dayjs.extend(relativeTime); |
||||||
|
dayjs.extend(calendar); |
||||||
|
dayjs.extend(duration); |
||||||
|
dayjs.extend(isSameOrBefore); |
||||||
|
dayjs.extend(isSameOrAfter); |
||||||
|
|
||||||
|
// 设置默认语言为中文
|
||||||
|
dayjs.locale('zh-cn'); |
||||||
|
|
||||||
|
/** |
||||||
|
* 日期格式常量 |
||||||
|
*/ |
||||||
|
export const DATE_FORMATS = { |
||||||
|
FULL: 'YYYY-MM-DD HH:mm:ss', |
||||||
|
DATE: 'YYYY-MM-DD', |
||||||
|
TIME: 'HH:mm:ss', |
||||||
|
DATE_TIME: 'YYYY-MM-DD HH:mm', |
||||||
|
MONTH_DAY: 'MM-DD', |
||||||
|
HOUR_MINUTE: 'HH:mm', |
||||||
|
YEAR_MONTH: 'YYYY-MM', |
||||||
|
CHINESE_DATE: 'YYYY年MM月DD日', |
||||||
|
CHINESE_FULL: 'YYYY年MM月DD日 HH:mm:ss', |
||||||
|
} as const; |
||||||
|
|
||||||
|
/** |
||||||
|
* 格式化日期 |
||||||
|
* @param date 日期（Date、时间戳或字符串） |
||||||
|
* @param format 格式（默认：YYYY-MM-DD HH:mm:ss） |
||||||
|
*/ |
||||||
|
export const formatDate = ( |
||||||
|
date: Date | string | number, |
||||||
|
format: string = DATE_FORMATS.FULL |
||||||
|
): string => { |
||||||
|
return dayjs(date).format(format); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 格式化为相对时间（如：3分钟前、2小时前） |
||||||
|
*/ |
||||||
|
export const formatRelativeTime = (date: Date | string | number): string => { |
||||||
|
return dayjs(date).fromNow(); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 格式化为日历时间（如：今天、昨天、上周） |
||||||
|
*/ |
||||||
|
export const formatCalendarTime = (date: Date | string | number): string => { |
||||||
|
return dayjs(date).calendar(null, { |
||||||
|
sameDay: '[今天] HH:mm', |
||||||
|
lastDay: '[昨天] HH:mm', |
||||||
|
lastWeek: 'MM-DD HH:mm', |
||||||
|
sameElse: 'YYYY-MM-DD HH:mm', |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 格式化聊天时间 |
||||||
|
* 今天：显示时间 |
||||||
|
* 昨天：显示"昨天 + 时间" |
||||||
|
* 本年：显示"月-日 时间" |
||||||
|
* 往年：显示"年-月-日" |
||||||
|
*/ |
||||||
|
export const formatChatTime = (timestamp: number | string | Date): string => { |
||||||
|
const date = dayjs(timestamp); |
||||||
|
const now = dayjs(); |
||||||
|
|
||||||
|
if (date.isSame(now, 'day')) { |
||||||
|
// 今天
|
||||||
|
return date.format('HH:mm'); |
||||||
|
} else if (date.isSame(now.subtract(1, 'day'), 'day')) { |
||||||
|
// 昨天
|
||||||
|
return '昨天 ' + date.format('HH:mm'); |
||||||
|
} else if (date.isSame(now, 'year')) { |
||||||
|
// 本年
|
||||||
|
return date.format('MM-DD HH:mm'); |
||||||
|
} else { |
||||||
|
// 往年
|
||||||
|
return date.format('YYYY-MM-DD'); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 获取时间差（返回对象） |
||||||
|
*/ |
||||||
|
export const getTimeDiff = ( |
||||||
|
startDate: Date | string | number, |
||||||
|
endDate: Date | string | number = new Date() |
||||||
|
) => { |
||||||
|
const start = dayjs(startDate); |
||||||
|
const end = dayjs(endDate); |
||||||
|
const diff = end.diff(start); |
||||||
|
|
||||||
|
const duration = dayjs.duration(diff); |
||||||
|
|
||||||
|
return { |
||||||
|
years: duration.years(), |
||||||
|
months: duration.months(), |
||||||
|
days: duration.days(), |
||||||
|
hours: duration.hours(), |
||||||
|
minutes: duration.minutes(), |
||||||
|
seconds: duration.seconds(), |
||||||
|
milliseconds: duration.milliseconds(), |
||||||
|
totalDays: Math.floor(duration.asDays()), |
||||||
|
totalHours: Math.floor(duration.asHours()), |
||||||
|
totalMinutes: Math.floor(duration.asMinutes()), |
||||||
|
totalSeconds: Math.floor(duration.asSeconds()), |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 判断是否是今天 |
||||||
|
*/ |
||||||
|
export const isToday = (date: Date | string | number): boolean => { |
||||||
|
return dayjs(date).isSame(dayjs(), 'day'); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 判断是否是昨天 |
||||||
|
*/ |
||||||
|
export const isYesterday = (date: Date | string | number): boolean => { |
||||||
|
return dayjs(date).isSame(dayjs().subtract(1, 'day'), 'day'); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 判断是否是本周 |
||||||
|
*/ |
||||||
|
export const isThisWeek = (date: Date | string | number): boolean => { |
||||||
|
return dayjs(date).isSame(dayjs(), 'week'); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 判断是否是本月 |
||||||
|
*/ |
||||||
|
export const isThisMonth = (date: Date | string | number): boolean => { |
||||||
|
return dayjs(date).isSame(dayjs(), 'month'); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 判断是否是本年 |
||||||
|
*/ |
||||||
|
export const isThisYear = (date: Date | string | number): boolean => { |
||||||
|
return dayjs(date).isSame(dayjs(), 'year'); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 获取日期范围的开始和结束 |
||||||
|
*/ |
||||||
|
export const getDateRange = (type: 'day' | 'week' | 'month' | 'year') => { |
||||||
|
const now = dayjs(); |
||||||
|
return { |
||||||
|
start: now.startOf(type).toDate(), |
||||||
|
end: now.endOf(type).toDate(), |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 添加时间 |
||||||
|
*/ |
||||||
|
export const addTime = ( |
||||||
|
date: Date | string | number, |
||||||
|
amount: number, |
||||||
|
unit: dayjs.ManipulateType |
||||||
|
): Date => { |
||||||
|
return dayjs(date).add(amount, unit).toDate(); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 减去时间 |
||||||
|
*/ |
||||||
|
export const subtractTime = ( |
||||||
|
date: Date | string | number, |
||||||
|
amount: number, |
||||||
|
unit: dayjs.ManipulateType |
||||||
|
): Date => { |
||||||
|
return dayjs(date).subtract(amount, unit).toDate(); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 判断日期是否在范围内 |
||||||
|
*/ |
||||||
|
export const isBetween = ( |
||||||
|
date: Date | string | number, |
||||||
|
startDate: Date | string | number, |
||||||
|
endDate: Date | string | number |
||||||
|
): boolean => { |
||||||
|
const target = dayjs(date); |
||||||
|
return target.isAfter(startDate) && target.isBefore(endDate); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 获取当前时间戳（毫秒） |
||||||
|
*/ |
||||||
|
export const now = (): number => { |
||||||
|
return dayjs().valueOf(); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 获取当前时间戳（秒） |
||||||
|
*/ |
||||||
|
export const nowInSeconds = (): number => { |
||||||
|
return Math.floor(dayjs().valueOf() / 1000); |
||||||
|
}; |
||||||
|
|
||||||
|
export default dayjs; |
||||||
|
|
||||||
Loading…
Reference in new issue