49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { ActivityIndicator, View, Text, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
|
import { Colors, Spacing, FontSize } from '@/constants/theme';
|
|
|
|
export interface LoadingStateProps {
|
|
text?: string;
|
|
subText?: string;
|
|
size?: 'small' | 'large';
|
|
color?: string;
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
export function LoadingState({
|
|
text = '加载中...',
|
|
subText,
|
|
size = 'large',
|
|
color = Colors.brand.primary,
|
|
style,
|
|
}: LoadingStateProps) {
|
|
return (
|
|
<View style={[styles.container, style]}>
|
|
<ActivityIndicator size={size} color={color} />
|
|
{text && <Text style={styles.text}>{text}</Text>}
|
|
{subText && <Text style={styles.subText}>{subText}</Text>}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: Colors.background.secondary,
|
|
paddingHorizontal: Spacing.xl,
|
|
},
|
|
text: {
|
|
marginTop: Spacing.lg,
|
|
fontSize: FontSize.sm,
|
|
color: Colors.text.secondary,
|
|
textAlign: 'center',
|
|
},
|
|
subText: {
|
|
marginTop: Spacing.sm,
|
|
fontSize: FontSize.xs,
|
|
color: Colors.text.tertiary,
|
|
textAlign: 'center',
|
|
},
|
|
});
|