77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
import React, { useMemo } from "react";
|
||
import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
|
||
import { ThemedText } from "../ThemedText";
|
||
|
||
interface CreateCountProps {
|
||
title: string;
|
||
icon: React.ReactNode;
|
||
number: number;
|
||
style?: StyleProp<ViewStyle>;
|
||
}
|
||
|
||
// 使用React.memo优化组件，避免不必要的重渲染
|
||
const CreateCountComponent = React.memo((props: CreateCountProps) => {
|
||
// 预计算样式以提高性能
|
||
const containerStyle = useMemo(() => [
|
||
styles.container,
|
||
props.style
|
||
], [props.style]);
|
||
|
||
return (
|
||
<View style={containerStyle}>
|
||
<View style={styles.header}>
|
||
<ThemedText type="sfPro" weight="bold" color="textSecondary" size="xxs" style={{ lineHeight: 16 }}>{props.title}</ThemedText>
|
||
{props.icon}
|
||
</View>
|
||
<ThemedText weight="bold" color="textSecondary" size="title" style={{ lineHeight: 36, textAlign: "right" }}>{props.number}</ThemedText>
|
||
</View>
|
||
);
|
||
});
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
// alignItems: "center",
|
||
justifyContent: "center",
|
||
gap: 8,
|
||
backgroundColor: "#FAF9F6",
|
||
paddingVertical: 16,
|
||
paddingRight: 16,
|
||
borderRadius: 12,
|
||
shadowColor: "#000",
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 2,
|
||
},
|
||
shadowOpacity: 0.25,
|
||
shadowRadius: 3.84,
|
||
// elevation: 1,
|
||
},
|
||
header: {
|
||
width: "90%",
|
||
display: "flex",
|
||
flexDirection: "row",
|
||
paddingHorizontal: 16,
|
||
alignItems: "flex-start",
|
||
gap: 4,
|
||
},
|
||
title: {
|
||
fontSize: 20,
|
||
fontWeight: "700",
|
||
// 允许换行
|
||
flexWrap: "wrap",
|
||
},
|
||
number: {
|
||
fontSize: 32,
|
||
fontWeight: "400",
|
||
paddingTop: 8,
|
||
width: "100%",
|
||
textAlign: "center",
|
||
color: "#4C320C"
|
||
},
|
||
});
|
||
|
||
export default CreateCountComponent;
|