jinyaqiu
828e84710f
All checks were successful
Dev Deploy / Explore-Gitea-Actions (push) Successful in 24s
102 lines
3.0 KiB
TypeScript
102 lines
3.0 KiB
TypeScript
import RightArrowSvg from "@/assets/icons/svg/rightArrow.svg";
|
|
import { TitleRankings } from "@/types/user";
|
|
import { useRouter } from "expo-router";
|
|
import { useTranslation } from "react-i18next";
|
|
import { FlatList, StyleSheet, TouchableOpacity, View } from "react-native";
|
|
import { ThemedText } from "../ThemedText";
|
|
|
|
const Ranking = ({ data }: { data: TitleRankings[] }) => {
|
|
const router = useRouter();
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<TouchableOpacity style={styles.headerItem} onPress={() => {
|
|
router.push('/top')
|
|
}}>
|
|
<ThemedText style={styles.headerTitle}>{t('generalSetting.rank', { ns: 'personal' })}</ThemedText>
|
|
<RightArrowSvg />
|
|
</TouchableOpacity>
|
|
</View>
|
|
<FlatList
|
|
data={data}
|
|
showsVerticalScrollIndicator={false}
|
|
contentContainerStyle={{ width: "100%" }}
|
|
keyExtractor={(item) => item.display_name}
|
|
renderItem={({ item }) => (
|
|
<View style={styles.item}>
|
|
<ThemedText style={styles.rank}>No.{item.ranking}</ThemedText>
|
|
<ThemedText style={styles.title}>{item.region}</ThemedText>
|
|
<ThemedText style={styles.title}>{item.display_name}</ThemedText>
|
|
<ThemedText style={styles.number}>{item.value}</ThemedText>
|
|
</View>
|
|
)}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: "column",
|
|
justifyContent: "space-between",
|
|
gap: 8,
|
|
backgroundColor: "#FAF9F6",
|
|
padding: 16,
|
|
borderRadius: 12,
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
elevation: 5,
|
|
},
|
|
header: {
|
|
flex: 1,
|
|
width: "100%",
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
headerItem: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
},
|
|
headerTitle: {
|
|
fontSize: 14,
|
|
fontWeight: '700',
|
|
color: '#4C320C',
|
|
},
|
|
item: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
width: "100%",
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 8, // 建议加行高
|
|
},
|
|
rank: {
|
|
fontSize: 20,
|
|
fontWeight: '700',
|
|
color: '#4C320C',
|
|
minWidth: 80, // 新增
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
color: '#4C320C',
|
|
flex: 1,
|
|
marginHorizontal: 8, // 新增
|
|
},
|
|
number: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
color: '#AC7E35',
|
|
minWidth: 60, // 新增
|
|
textAlign: 'right'
|
|
},
|
|
});
|
|
|
|
export default Ranking;
|