ddcc1320a4
- 在应用中集成引导流程，用户首次启动时显示欢迎页面和个人信息收集页面 - 使用 AsyncStorage 存储用户的引导状态和个人信息 - 在个人页面中添加重置引导流程的功能 - 更新依赖项，添加 @react-native-async-storage/async-storage 库以支持数据存储 - 修改布局以支持新页面的导航和显示
72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { ThemedView } from '@/components/ThemedView';
|
||
import { useThemeColor } from '@/hooks/useThemeColor';
|
||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||
import { router } from 'expo-router';
|
||
import React, { useEffect, useState } from 'react';
|
||
import { ActivityIndicator, Text, View } from 'react-native';
|
||
|
||
const ONBOARDING_COMPLETED_KEY = '@onboarding_completed';
|
||
|
||
export default function SplashScreen() {
|
||
const backgroundColor = useThemeColor({}, 'background');
|
||
const primaryColor = useThemeColor({}, 'primary');
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
checkOnboardingStatus();
|
||
}, []);
|
||
|
||
const checkOnboardingStatus = async () => {
|
||
try {
|
||
const onboardingCompleted = await AsyncStorage.getItem(ONBOARDING_COMPLETED_KEY);
|
||
|
||
// 添加一个短暂的延迟以显示启动画面
|
||
setTimeout(() => {
|
||
if (onboardingCompleted === 'true') {
|
||
router.replace('/(tabs)');
|
||
} else {
|
||
router.replace('/onboarding');
|
||
}
|
||
setIsLoading(false);
|
||
}, 1000);
|
||
} catch (error) {
|
||
console.error('检查引导状态失败:', error);
|
||
// 如果出现错误，默认显示引导页面
|
||
setTimeout(() => {
|
||
router.replace('/onboarding');
|
||
setIsLoading(false);
|
||
}, 1000);
|
||
}
|
||
};
|
||
|
||
if (!isLoading) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<ThemedView style={{
|
||
flex: 1,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
backgroundColor
|
||
}}>
|
||
<View style={{
|
||
width: 80,
|
||
height: 80,
|
||
borderRadius: 40,
|
||
backgroundColor: primaryColor,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
marginBottom: 20,
|
||
}}>
|
||
<Text style={{
|
||
fontSize: 32,
|
||
}}>
|
||
🧘♀️
|
||
</Text>
|
||
</View>
|
||
<ActivityIndicator size="large" color={primaryColor} />
|
||
</ThemedView>
|
||
);
|
||
}
|