jinyaqiu
828e84710f
All checks were successful
Dev Deploy / Explore-Gitea-Actions (push) Successful in 24s
83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
import { Image, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
|
|
import { ThemedText } from "../ThemedText";
|
|
|
|
interface CategoryProps {
|
|
title: string;
|
|
data: { title: string, number: string | number }[];
|
|
bgSvg: string | null;
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
const CategoryComponent = ({ title, data, bgSvg, style }: CategoryProps) => {
|
|
return (
|
|
<View style={[styles.container, style]}>
|
|
<View style={styles.backgroundContainer}>
|
|
<Image
|
|
source={bgSvg !== "" && bgSvg !== null ? { uri: bgSvg } : require('@/assets/images/png/owner/animals.png')}
|
|
style={{ width: '100%', height: '100%' }}
|
|
resizeMode="cover"
|
|
/>
|
|
<View style={styles.overlay} />
|
|
</View>
|
|
<View style={styles.content}>
|
|
<ThemedText style={styles.title}>{title}</ThemedText>
|
|
{data.map((item, index) => (
|
|
<View style={styles.item} key={index}>
|
|
<ThemedText style={styles.itemTitle}>{item.title}</ThemedText>
|
|
<ThemedText style={styles.itemNumber}>{item.number}</ThemedText>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
borderRadius: 32,
|
|
overflow: 'hidden',
|
|
position: 'relative',
|
|
},
|
|
backgroundContainer: {
|
|
...StyleSheet.absoluteFillObject,
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
overlay: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.4)', // 0% 不透明度的黑色
|
|
},
|
|
content: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 8,
|
|
justifyContent: 'space-between',
|
|
flex: 1
|
|
},
|
|
title: {
|
|
width: '100%',
|
|
textAlign: "center",
|
|
color: 'white',
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
textShadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
textShadowOffset: { width: 1, height: 1 },
|
|
textShadowRadius: 2,
|
|
},
|
|
item: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
itemTitle: {
|
|
color: 'white',
|
|
fontSize: 10,
|
|
fontWeight: '700',
|
|
},
|
|
itemNumber: {
|
|
color: 'white',
|
|
fontSize: 10,
|
|
}
|
|
});
|
|
|
|
export default CategoryComponent;
|