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

feat: update

Browse Source
This commit is contained in:
echo
2025-11-06 16:37:01 +08:00
parent c0d54b8513
commit 855f289579
59 changed files with 3398 additions and 572 deletions
Download Patch File Download Diff File Expand all files Collapse all files

317
app/theme-test.tsx Normal file
View File

@@ -0,0 +1,317 @@
import { StyleSheet, ScrollView, TouchableOpacity, View, Text, useColorScheme as useSystemColorScheme } from 'react-native';
import { Stack } from 'expo-router';
import { useState, useEffect, useMemo } from 'react';
import { useTheme, useSettingsActions } from '@/stores';
import { useHaptics } from '@/hooks';
import Colors from '@/constants/Colors';
export default function ThemeTestScreen() {
const currentTheme = useTheme();
const { setTheme } = useSettingsActions();
const haptics = useHaptics();
const systemColorScheme = useSystemColorScheme();
// 强制重新渲染的状态
const [renderKey, setRenderKey] = useState(0);
// 直接计算实际应用的主题 - 不使用 useColorScheme hook
const actualTheme: 'light' | 'dark' = useMemo(() => {
return currentTheme === 'auto'
? (systemColorScheme === 'dark' ? 'dark' : 'light')
: currentTheme;
}, [currentTheme, systemColorScheme]);
// 使用 useMemo 确保颜色对象在主题改变时重新计算
const colors = useMemo(() => {
console.log('🎨 Recalculating colors for theme:', actualTheme);
return Colors[actualTheme] as Record<string, any>;
}, [actualTheme]);
// 监听主题变化
useEffect(() => {
console.log('🎨 Theme changed:', { currentTheme, systemColorScheme, actualTheme, renderKey });
setRenderKey(prev => prev + 1);
}, [currentTheme, systemColorScheme, actualTheme]);
const handleThemeChange = (newTheme: 'light' | 'dark' | 'auto') => {
haptics.selection();
console.log('🎨 Changing theme to:', newTheme);
setTheme(newTheme);
};
return (
<>
<Stack.Screen
options={{
title: '主题测试',
headerStyle: {
backgroundColor: colors.background,
},
headerTintColor: colors.text,
}}
/>
<ScrollView
style={[styles.container, { backgroundColor: colors.background }]}
>
{/* 主题信息 */}
<View style={[styles.section, { backgroundColor: colors.backgroundSecondary }]}>
<Text style={[styles.title, { color: colors.text }]}>
当前主题信息
</Text>
<Text style={[styles.infoText, { color: colors.textSecondary }]}>
用户设置: {currentTheme}
</Text>
<Text style={[styles.infoText, { color: colors.textSecondary }]}>
系统主题: {systemColorScheme || 'light'}
</Text>
<Text style={[styles.infoText, { color: colors.textSecondary }]}>
实际应用: {actualTheme}
</Text>
<Text style={[styles.infoText, { color: colors.textSecondary }]}>
渲染次数: {renderKey}
</Text>
</View>
{/* 主题切换按钮 */}
<View style={[styles.section, { backgroundColor: colors.backgroundSecondary }]}>
<Text style={[styles.title, { color: colors.text }]}>
切换主题
</Text>
<View style={styles.buttonRow}>
<TouchableOpacity
style={[
styles.themeButton,
{
backgroundColor: currentTheme === 'light' ? colors.primary : colors.backgroundTertiary,
borderColor: colors.border,
}
]}
onPress={() => handleThemeChange('light')}
>
<Text style={[
styles.buttonText,
{ color: currentTheme === 'light' ? '#fff' : colors.text }
]}>
☀️ 浅色
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.themeButton,
{
backgroundColor: currentTheme === 'dark' ? colors.primary : colors.backgroundTertiary,
borderColor: colors.border,
}
]}
onPress={() => handleThemeChange('dark')}
>
<Text style={[
styles.buttonText,
{ color: currentTheme === 'dark' ? '#fff' : colors.text }
]}>
🌙 深色
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.themeButton,
{
backgroundColor: currentTheme === 'auto' ? colors.primary : colors.backgroundTertiary,
borderColor: colors.border,
}
]}
onPress={() => handleThemeChange('auto')}
>
<Text style={[
styles.buttonText,
{ color: currentTheme === 'auto' ? '#fff' : colors.text }
]}>
🔄 自动
</Text>
</TouchableOpacity>
</View>
</View>
{/* 文本颜色展示 */}
<View style={[styles.section, { backgroundColor: colors.backgroundSecondary }]}>
<Text style={[styles.title, { color: colors.text }]}>
文本颜色
</Text>
<Text style={[styles.colorText, { color: colors.text }]}>
Primary Text - {colors.text}
</Text>
<Text style={[styles.colorText, { color: colors.textSecondary }]}>
Secondary Text - {colors.textSecondary}
</Text>
<Text style={[styles.colorText, { color: colors.textTertiary }]}>
Tertiary Text - {colors.textTertiary}
</Text>
</View>
{/* 背景颜色展示 */}
<View style={[styles.section, { backgroundColor: colors.backgroundSecondary }]}>
<Text style={[styles.title, { color: colors.text }]}>
背景颜色
</Text>
<View style={[styles.colorBox, { backgroundColor: colors.background }]}>
<Text style={[styles.colorText, { color: colors.text }]}>
Primary Background - {colors.background}
</Text>
</View>
<View style={[styles.colorBox, { backgroundColor: colors.backgroundSecondary, borderWidth: 1, borderColor: colors.border }]}>
<Text style={[styles.colorText, { color: colors.text }]}>
Secondary Background - {colors.backgroundSecondary}
</Text>
</View>
<View style={[styles.colorBox, { backgroundColor: colors.backgroundTertiary }]}>
<Text style={[styles.colorText, { color: colors.text }]}>
Tertiary Background - {colors.backgroundTertiary}
</Text>
</View>
</View>
{/* 主题颜色展示 */}
<View style={[styles.section, { backgroundColor: colors.backgroundSecondary }]}>
<Text style={[styles.title, { color: colors.text }]}>
主题颜色
</Text>
<View style={styles.colorGrid}>
<View style={[styles.colorBox, { backgroundColor: colors.primary }]}>
<Text style={[styles.colorText, { color: '#fff' }]}>Primary - {colors.primary}</Text>
</View>
<View style={[styles.colorBox, { backgroundColor: colors.secondary }]}>
<Text style={[styles.colorText, { color: '#fff' }]}>Secondary - {colors.secondary}</Text>
</View>
<View style={[styles.colorBox, { backgroundColor: colors.success }]}>
<Text style={[styles.colorText, { color: '#fff' }]}>Success - {colors.success}</Text>
</View>
<View style={[styles.colorBox, { backgroundColor: colors.warning }]}>
<Text style={[styles.colorText, { color: '#fff' }]}>Warning - {colors.warning}</Text>
</View>
<View style={[styles.colorBox, { backgroundColor: colors.error }]}>
<Text style={[styles.colorText, { color: '#fff' }]}>Error - {colors.error}</Text>
</View>
<View style={[styles.colorBox, { backgroundColor: colors.info }]}>
<Text style={[styles.colorText, { color: '#fff' }]}>Info - {colors.info}</Text>
</View>
</View>
</View>
{/* UI 元素展示 */}
<View style={[styles.section, { backgroundColor: colors.backgroundSecondary }]}>
<Text style={[styles.title, { color: colors.text }]}>
UI 元素
</Text>
<View style={[styles.card, { backgroundColor: colors.card, borderColor: colors.border }]}>
<Text style={[styles.cardText, { color: colors.text }]}>
这是一个卡片组件
</Text>
<Text style={[styles.cardSubtext, { color: colors.textSecondary }]}>
卡片背景色: {colors.card}
</Text>
</View>
<View style={[styles.input, { backgroundColor: colors.inputBackground, borderColor: colors.inputBorder }]}>
<Text style={[styles.inputText, { color: colors.textSecondary }]}>
输入框样式预览
</Text>
</View>
<View style={[styles.separator, { backgroundColor: colors.separator }]} />
<TouchableOpacity style={[styles.button, { backgroundColor: colors.buttonPrimary }]}>
<Text style={[styles.buttonText, { color: '#fff' }]}>
按钮示例
</Text>
</TouchableOpacity>
</View>
</ScrollView>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
section: {
margin: 16,
padding: 16,
borderRadius: 12,
},
title: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 16,
},
infoText: {
fontSize: 16,
marginBottom: 8,
},
buttonRow: {
flexDirection: 'row',
gap: 12,
},
themeButton: {
flex: 1,
paddingVertical: 12,
paddingHorizontal: 16,
borderRadius: 8,
borderWidth: 2,
alignItems: 'center',
},
buttonText: {
fontSize: 16,
fontWeight: '600',
},
colorText: {
fontSize: 14,
marginBottom: 8,
fontFamily: 'monospace',
},
colorBox: {
padding: 16,
borderRadius: 8,
marginBottom: 8,
alignItems: 'center',
},
colorGrid: {
gap: 8,
},
card: {
padding: 16,
borderRadius: 8,
borderWidth: 1,
marginBottom: 12,
},
cardText: {
fontSize: 16,
fontWeight: '600',
marginBottom: 4,
},
cardSubtext: {
fontSize: 12,
fontFamily: 'monospace',
},
input: {
padding: 12,
borderRadius: 8,
borderWidth: 1,
marginBottom: 12,
},
inputText: {
fontSize: 14,
},
separator: {
height: 1,
marginVertical: 12,
},
button: {
padding: 16,
borderRadius: 8,
alignItems: 'center',
},
});