tiefen_space_app/screeens/StreamerProfile/skeleton.jsx

import { View, Text, ScrollView } from "react-native";
import React from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Skeleton } from "@rneui/themed";

export default function StreamerProfileSkeleton() {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  return (
    <View
      style={{
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <ScrollView>
        <Skeleton
          style={tailwind("w-full bg-[#13121F]")}
          skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
          animation="pulse"
          height={375}
        />
        <View style={tailwind("flex flex-1 mt-4")}>
          <View style={tailwind("flex-1 px-4")}>
            {/* 昵称、认证 */}
            <Skeleton
              style={tailwind("bg-[#13121F] rounded-md")}
              skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
              animation="pulse"
              width={150}
              height={35}
            />
            {/* tag*/}
            <View style={tailwind("flex-row my-2.5")}>
              <Skeleton
                style={tailwind("bg-[#13121F] rounded-md mr-2")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width={60}
                height={25}
              />
              <Skeleton
                style={tailwind("bg-[#13121F] rounded-md mr-2")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width={60}
                height={25}
              />
              <Skeleton
                style={tailwind("bg-[#13121F] rounded-md mr-2")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width={60}
                height={25}
              />
            </View>
            {/* 标签 */}
            <View style={tailwind("flex-row flex-wrap pb-4")}>
              <Skeleton
                style={tailwind("bg-[#13121F] rounded-full mr-2 my-1 ")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width={70}
                height={20}
              />
              <Skeleton
                style={tailwind("bg-[#13121F] rounded-full mr-2 my-1 ")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width={100}
                height={20}
              />
              <Skeleton
                style={tailwind("bg-[#13121F] rounded-full mr-2 my-1 ")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width={50}
                height={20}
              />
              <Skeleton
                style={tailwind("bg-[#13121F] rounded-full mr-2 my-1 ")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width={70}
                height={20}
              />
              <Skeleton
                style={tailwind("bg-[#13121F] rounded-full mr-2 my-1 ")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width={60}
                height={20}
              />
              <Skeleton
                style={tailwind("bg-[#13121F] rounded-full mr-2 my-1 ")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width={70}
                height={20}
              />
              <Skeleton
                style={tailwind("bg-[#13121F] rounded-full mr-2 my-1 ")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                width={70}
                height={20}
              />
            </View>
            <View
              style={tailwind("h-[3px] rounded-full bg-[#FFFFFF26]")}
            ></View>
            {/* 个性签名 */}
            <View style={tailwind("my-4")}>
              <Text style={tailwind("text-base font-medium text-white mb-2")}>
                个性签名
              </Text>
              <Skeleton
                style={tailwind("bg-[#13121F] w-full rounded-md")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                height={30}
              />
            </View>
            <View
              style={tailwind("h-[3px] rounded-full bg-[#FFFFFF26]")}
            ></View>
            {/* 平台 */}
            <View style={tailwind("my-4")}>
              <Text style={tailwind("text-base text-white font-medium mb-2")}>
                来这找我玩
              </Text>
              <Skeleton
                style={tailwind("bg-[#13121F] w-full rounded-xl")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                height={40}
              />
              <Skeleton
                style={tailwind("bg-[#13121F] w-full rounded-xl mt-2")}
                skeletonStyle={tailwind("bg-[#FFFFFF1A]")}
                animation="pulse"
                height={40}
              />
            </View>
          </View>
        </View>
      </ScrollView>
      {/* 关注、私聊、查看微信 */}
      <View
        style={{
          borderTopColor: "#FFFFFF26",
          ...tailwind(
            "flex-row py-2 px-4 h-[4.5rem] border-t items-center justify-between"
          ),
        }}
      >
        <View
          style={{
            backgroundColor: "#FFFFFF1A",
            ...tailwind(
              "flex-row items-center justify-center h-10 px-6 rounded-full mr-4"
            ),
          }}
        >
          <Text style={tailwind("text-base text-white font-medium")}>关注</Text>
        </View>
        <View
          style={tailwind(
            "flex-row bg-[#FFFFFF1A] items-center justify-center h-10 px-6 rounded-full mr-4"
          )}
        >
          <Text style={tailwind("text-base text-white font-medium")}>私聊</Text>
        </View>
        <View
          style={tailwind(
            "flex-row flex-1 bg-[#FF669E] items-center justify-center h-10 rounded-full"
          )}
        >
          <Text style={tailwind("text-base text-white font-medium")}>
            添加微信
          </Text>
        </View>
      </View>
    </View>
  );
}