82 lines
3.7 KiB
TypeScript
82 lines
3.7 KiB
TypeScript
import UserSvg from '@/assets/icons/svg/ataver.svg';
|
||
import { ThemedText } from '@/components/ThemedText';
|
||
import { UserInfoDetails } from '@/types/user';
|
||
import { useState } from 'react';
|
||
import { Image, ScrollView, View } from 'react-native';
|
||
export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
|
||
// 添加状态来跟踪图片加载状态
|
||
const [imageError, setImageError] = useState(false);
|
||
return (
|
||
<View className='flex flex-row justify-between items-center mt-[1rem] gap-[1rem] w-full'>
|
||
{/* 用户名 */}
|
||
<View className='flex flex-col gap-4 w-[75%]'>
|
||
<View className='flex flex-row items-center justify-between w-full'>
|
||
<View className='flex flex-row items-center gap-2 w-full'>
|
||
<ThemedText
|
||
className='max-w-[80%] !text-textSecondary !font-semibold !text-2xl'
|
||
numberOfLines={1} // 限制为1行
|
||
ellipsizeMode="tail"
|
||
>
|
||
{userInfo?.user_info?.nickname}
|
||
</ThemedText>
|
||
<ScrollView
|
||
className='max-w-[20%]'
|
||
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>
|
||
<View>
|
||
<ScrollView
|
||
className='max-w-[85%]'
|
||
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>
|
||
{/* <CopyButton textToCopy={userInfo?.user_info?.user_id || ""} /> */}
|
||
</View>
|
||
|
||
</View>
|
||
{/* 头像 */}
|
||
<View className='w-auto'>
|
||
{userInfo?.user_info?.avatar_file_url && !imageError ? (
|
||
<Image
|
||
source={{ uri: userInfo.user_info.avatar_file_url }}
|
||
style={{ width: 80, height: 80, borderRadius: 40 }}
|
||
onError={() => {
|
||
console.log('图片加载失败:', userInfo.user_info.avatar_file_url);
|
||
setImageError(true);
|
||
}}
|
||
onLoad={() => {
|
||
console.log('图片加载成功');
|
||
}}
|
||
/>
|
||
) : (
|
||
<UserSvg width={80} height={80} />
|
||
)}
|
||
</View>
|
||
</View >
|
||
);
|
||
}
|
||
|