tiefen_space_app/components/StreamerCard/index.jsx

211 lines
7.0 KiB
JavaScript
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 {
View,
Text,
TouchableOpacity,
Image as NativeImage,
} from "react-native";
import React, { memo } from "react";
import { useTailwind } from "tailwind-rn";
import { Image } from "expo-image";
import { useNavigation } from "@react-navigation/native";
function StreamerCard({ data }) {
const navigation = useNavigation();
const tailwind = useTailwind();
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
return (
<View style={tailwind("flex flex-col")}>
<TouchableOpacity
activeOpacity={1}
style={tailwind("flex-1 flex-col justify-around")}
onPress={() =>
navigation.navigate("StreamerProfile", { mid: data?.mid })
}
>
{/* 上方信息区域 */}
<View style={tailwind("flex-row items-center h-[4.5rem] px-4")}>
<Image
source={data?.avatar?.images[0]?.urls[0]}
contentFit="cover"
transition={100}
placeholder={blurhash}
cachePolicy="disk"
style={tailwind("w-12 h-12 rounded-full")}
/>
<View style={tailwind("flex-col ml-2 items-start")}>
<View style={tailwind("flex-row items-center")}>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={tailwind("text-base font-medium text-white")}
>
{data?.name}
</Text>
<View
style={{
backgroundColor: "#FFFFFF26",
...tailwind(
"flex-row py-0.5 px-1 rounded-full items-center ml-1"
),
}}
>
{data?.gender === 1 ? (
<NativeImage
source={require("../../assets/icon/12DP/female.png")}
/>
) : (
<NativeImage
source={require("../../assets/icon/12DP/male.png")}
/>
)}
<Text style={tailwind("text-xs text-white")}>
{data?.age}
</Text>
</View>
<View
style={{
backgroundColor: "#FFFFFF26",
...tailwind(
"flex-row py-0.5 px-1 rounded-full items-center ml-1"
),
}}
>
<NativeImage
source={require("../../assets/icon/12DP/location.png")}
/>
<Text style={tailwind("text-xs text-white")}>{data?.city}</Text>
</View>
</View>
<Text style={{ ...tailwind("text-xs"), color: "#FFFFFF80" }}>
全网粉丝{data?.fans}
</Text>
</View>
</View>
{/* 中部媒体区域 */}
<View
style={{
aspectRatio: "86/57",
...tailwind("flex-row mx-4 rounded-2xl overflow-hidden"),
}}
>
<View
style={{
aspectRatio: "1/1",
...tailwind("h-full rounded-r overflow-hidden"),
}}
>
<Image
source={data?.cover?.images[0]?.urls[0]}
contentFit="cover"
transition={100}
placeholder={blurhash}
cachePolicy="disk"
style={tailwind("w-full h-full")}
/>
</View>
<View style={tailwind("flex-col flex-1 ml-1")}>
{data?.album?.images.map((item, index) => {
if (index > 1) return;
return (
<View
key={index}
style={{
aspectRatio: "1/1",
...tailwind("w-full mb-1"),
}}
>
<Image
source={item?.urls[0]}
contentFit="cover"
transition={100}
placeholder={blurhash}
cachePolicy="disk"
style={tailwind("w-full h-full rounded-l")}
/>
{index === 1 && data?.album?.images.length > 2 && (
<View
style={{
backgroundColor: "rgba(0,0,0,0.5)",
...tailwind(
"items-center justify-center absolute w-full h-full"
),
}}
>
<Text
style={tailwind("text-white text-3xl font-semibold ")}
>
+{data?.album?.images.length - 2}
</Text>
</View>
)}
</View>
);
})}
</View>
</View>
{/* 下方标签区 */}
<View
style={tailwind("flex-row h-12 justify-between items-center mx-4")}
>
<View style={{ ...tailwind("flex-row"), gap: 4 }}>
{data?.is_active_within_a_week === 1 && (
<NativeImage
source={require("../../assets/icon/others/space_active.png")}
/>
)}
{data?.tag?.map((item, index) => {
if (index > 2) return;
if (data?.is_active_within_a_week === 1 && index > 1) return;
return (
<View
key={index}
style={{
...tailwind("py-1 px-2 rounded-full"),
backgroundColor: "#FF61B030",
}}
>
<Text style={{ color: "#FF669E", fontSize: 11 }}>{item}</Text>
</View>
);
})}
</View>
<View style={{ ...tailwind("flex-row flex-nowrap"), gap: 8 }}>
{data?.platforms?.map((item, index) => {
if (index > 4) return;
return (
<View key={index} style={{ height: 18 }}>
<Image
source={item?.icon?.images[0]?.urls[0]}
style={{ aspectRatio: "1/1", ...tailwind("h-full") }}
/>
{index === 4 && data?.platforms.length > 5 && (
<View
style={{
backgroundColor: "rgba(0,0,0,0.5)",
...tailwind(
"items-center justify-center absolute w-full h-full rounded"
),
}}
>
<Text
style={tailwind("text-white text-xs font-semibold")}
>
+{data?.platforms.length - 5}
</Text>
</View>
)}
</View>
);
})}
</View>
</View>
</TouchableOpacity>
<View style={tailwind("h-[3px] rounded-full mx-4 bg-[#FFFFFF26]")}></View>
</View>
);
}
export default memo(StreamerCard);