tiefen_space_app/components/StreamerCard/index.jsx

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")}>
            {data?.tag?.map((item, index) => {
              if (index > 2) return;
              return (
                <View
                  key={index}
                  style={{
                    ...tailwind("py-1 px-2 rounded-full mr-1"),
                    backgroundColor: "#FF61B030",
                  }}
                >
                  <Text style={{ ...tailwind("text-xs"), color: "#FF669E" }}>
                    {item}
                  </Text>
                </View>
              );
            })}
          </View>
          <View style={tailwind("flex-row flex-nowrap")}>
            {data?.platforms?.map((item, index) => {
              if (index > 5) return;
              return (
                <View key={index} style={tailwind("h-5")}>
                  <Image
                    source={item?.icon?.images[0]?.urls[0]}
                    style={{ aspectRatio: "1/1", ...tailwind("h-full ml-2") }}
                  />
                  {index === 5 && data?.platforms.length > 6 && (
                    <View
                      style={{
                        backgroundColor: "rgba(0,0,0,0.5)",
                        ...tailwind(
                          "items-center justify-center absolute w-full h-full rounded ml-1"
                        ),
                      }}
                    >
                      <Text
                        style={tailwind("text-white text-xs font-semibold")}
                      >
                        +{data?.platforms.length - 6}
                      </Text>
                    </View>
                  )}
                </View>
              );
            })}
          </View>
        </View>
      </TouchableOpacity>
      <View style={tailwind("h-[3px] rounded-full mx-4 bg-[#FFFFFF26]")}></View>
    </View>
  );
}

export default memo(StreamerCard);