jinyaqiu 828e84710f
All checks were successful
Dev Deploy / Explore-Gitea-Actions (push) Successful in 24s
feat: 个人中心
2025-07-14 10:42:59 +08:00

71 lines
3.1 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import UserSvg from '@/assets/icons/svg/ataver.svg';
import { ThemedText } from '@/components/ThemedText';
import { UserInfoDetails } from '@/types/user';
// import { Image } from 'expo-image';
import { Image, ScrollView, View } from 'react-native';
export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
return (
<View className='flex flex-row items-center mt-[1rem] gap-[1rem]'>
{/* 用户名 */}
<View className='flex flex-col gap-4 w-[68vw]'>
<View className='flex flex-row items-center justify-between w-full'>
<View className='flex flex-row items-center gap-2'>
<ThemedText
className='max-w-[36vw] !text-textSecondary !font-semibold !text-2xl'
numberOfLines={1} // 限制为1行
ellipsizeMode="tail"
>
{userInfo?.user_info?.nickname}
</ThemedText>
<ScrollView
className='max-w-[26vw] '
horizontal // 水平滚动
showsHorizontalScrollIndicator={false} // 隐藏滚动条
contentContainerStyle={{
flexDirection: 'row',
gap: 8, // 间距,
alignItems: 'center',
}}
>
{
userInfo?.medal_infos?.map((item, index) => (
<Image
key={index}
source={{ uri: item.url }}
style={{ width: 24, height: 24 }}
/>
))
}
</ScrollView>
</View>
</View>
<ScrollView
className='max-w-[68vw]'
horizontal // 水平滚动
showsHorizontalScrollIndicator={false} // 隐藏滚动条
contentContainerStyle={{
flexDirection: 'row',
gap: 8 // 间距
}}
>
<ThemedText style={{ color: '#AC7E35', fontSize: 12, fontWeight: '600' }}>User ID{userInfo?.user_info?.user_id}</ThemedText>
</ScrollView>
</View>
{/* 头像 */}
<View>
{userInfo?.user_info?.avatar_file_url
?
<Image
source={{ uri: "http://cdn.fairclip.cn/files/7348942720074911745/original_1752124481039_198d7b9a428c67f2bfd87ec128daad1b.jpg" }}
style={{ width: 80, height: 80, borderRadius: 40 }}
/>
:
<UserSvg width={80} height={80} />
}
</View>
</View >
);
}