33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { Colors } from '@/constants/Colors';
|
|
import { FontColor, Fonts } from '@/constants/Fonts';
|
|
import { useThemeColor } from '@/hooks/useThemeColor';
|
|
import { View, type ViewProps } from 'react-native';
|
|
import { ColorValue, isFontColorKey, ThemeColor } from './ThemedText';
|
|
|
|
type ThemedViewProps = ViewProps & {
|
|
className?: string;
|
|
bgColor?: FontColor | ColorValue | string;
|
|
};
|
|
|
|
export function ThemedView({ className, style, bgColor, ...props }: ThemedViewProps) {
|
|
const themeColor = useThemeColor({ light: bgColor, dark: bgColor }, 'background');
|
|
|
|
const bgColorValue = (() => {
|
|
if (!bgColor) return themeColor;
|
|
|
|
// 检查是否是主题颜色
|
|
const themeColors = Object.keys(Colors.light) as ThemeColor[];
|
|
if (themeColors.includes(bgColor as ThemeColor)) {
|
|
return useThemeColor({ light: bgColor, dark: bgColor }, bgColor as ThemeColor);
|
|
}
|
|
// 检查是否是 Fonts 中定义的颜色
|
|
if (isFontColorKey(bgColor)) {
|
|
return Fonts[bgColor];
|
|
}
|
|
// 返回自定义颜色值
|
|
return bgColor;
|
|
})();
|
|
|
|
return <View className={className} style={[{ backgroundColor: bgColorValue }, style]} {...props} />;
|
|
}
|