tiefen_space_app/screeens/SpaceIntroduce/index.jsx

import {
  View,
  Text,
  Image as NativeImage,
  TouchableOpacity,
  Dimensions,
  ScrollView,
} from "react-native";
import React, { useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Toast from "react-native-toast-message";
import { Image } from "expo-image";
import { useHeaderHeight } from "@react-navigation/elements";

const placeholder = "https://via.placeholder.com/1024x1024.png";

export default function SpaceIntroduce({ navigation, route }) {
  const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";

  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
  const headerHeight = useHeaderHeight();

  //设置header右侧按钮功能
  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity onPress={() => console.log("space setting")}>
          <NativeImage
            source={require("../../assets/icon/others/setting.png")}
          />
        </TouchableOpacity>
      ),
    });
  }, []);

  return (
    <View
      style={{
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <ScrollView>
        <View style={tailwind("absolute top-0 left-0")}>
          <Image
            source={placeholder}
            contentFit="cover"
            transition={1000}
            placeholder={blurhash}
            cachePolicy="disk"
            style={{
              aspectRatio: "25/17",
              ...tailwind("w-full"),
            }}
          />
          <View
            style={{
              backgroundColor: "#000000B2",
              ...tailwind("absolute w-full h-full"),
            }}
          ></View>
        </View>
        <View
          style={{
            marginTop: headerHeight,
            ...tailwind("flex flex-row items-center px-4 h-24"),
          }}
        >
          <Image
            style={tailwind(
              "w-[4.6rem] h-[4.6rem] rounded-full border-2 border-white"
            )}
            source={placeholder}
            placeholder={blurhash}
            contentFit="cover"
            transition={1000}
            cachePolicy="disk"
          />
          <View style={tailwind("flex flex-col shrink mx-2 justify-between")}>
            <Text
              style={{ fontSize: 22, ...tailwind("text-white font-medium") }}
              numberOfLines={1}
              ellipsizeMode="tail"
            >
              阿巴阿巴
            </Text>
            <View style={tailwind("flex-row flex-wrap mt-1.5")}>
              <View
                style={tailwind(
                  "flex-row items-center py-0.5 px-2 mr-2 bg-[#FFFFFF1A] rounded-full"
                )}
              >
                <NativeImage
                  source={require("../../assets/icon/12DP/ID.png")}
                />
                <Text style={tailwind("text-white text-xs font-medium ml-0.5")}>
                  666666
                </Text>
              </View>
              <View
                style={tailwind(
                  "flex-row items-center py-0.5 px-2 mr-2 bg-[#FFFFFF1A] rounded-full"
                )}
              >
                <NativeImage
                  source={require("../../assets/icon/12DP/edit.png")}
                />
                <Text style={tailwind("text-white text-xs font-medium ml-0.5")}>
                  24
                </Text>
              </View>
            </View>
          </View>
          <TouchableOpacity
            onPress={() => console.log("check wechat")}
            style={tailwind("flex flex-col items-center ml-auto")}
          >
            <NativeImage
              source={require("../../assets/icon/others/wechat_bg.png")}
            />
            <Text style={tailwind("text-white text-xs font-medium mt-0.5")}>
              查看微信
            </Text>
          </TouchableOpacity>
        </View>
        <View
          style={tailwind(
            "flex flex-col w-full rounded-t-3xl bg-[#07050A] mt-4 p-4"
          )}
        >
          <View style={tailwind("flex flex-col items-start")}>
            <View>
              <Text style={tailwind("text-white text-lg font-medium mt-0.5")}>
                空间介绍
              </Text>
              <NativeImage
                style={{ right: -5, bottom: 1, ...tailwind("absolute") }}
                source={require("../../assets/icon/others/pinkline.png")}
              />
            </View>
          </View>
          <Text style={tailwind("text-white text-base mt-4")}>
            阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿
          </Text>
          <View style={tailwind("flex flex-row flex-wrap mt-2")}>
            <View style={tailwind("basis-1/3 pr-1")}>
              <Image
                style={{
                  aspectRatio: "1/1",
                  ...tailwind("w-full rounded"),
                }}
                source={placeholder}
                placeholder={blurhash}
                contentFit="cover"
                transition={1000}
                cachePolicy="disk"
              />
            </View>
            <View style={tailwind("basis-1/3 pr-1")}>
              <Image
                style={{
                  aspectRatio: "1/1",
                  ...tailwind("w-full rounded"),
                }}
                source={placeholder}
                placeholder={blurhash}
                contentFit="cover"
                transition={1000}
                cachePolicy="disk"
              />
            </View>
            <View style={tailwind("basis-1/3 pr-1")}>
              <Image
                style={{
                  aspectRatio: "1/1",
                  ...tailwind("w-full rounded"),
                }}
                source={placeholder}
                placeholder={blurhash}
                contentFit="cover"
                transition={1000}
                cachePolicy="disk"
              />
            </View>
          </View>
          <View style={tailwind("flex flex-col items-start mt-8")}>
            <View>
              <Text style={tailwind("text-white text-lg font-medium mt-0.5")}>
                付费须知
              </Text>
              <NativeImage
                style={{ right: -5, bottom: 1, ...tailwind("absolute") }}
                source={require("../../assets/icon/others/pinkline.png")}
              />
            </View>
          </View>
          <Text style={tailwind("text-white text-base mt-4")}>
            阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿
          </Text>
        </View>
      </ScrollView>
      <View
        style={tailwind(
          "flex flex-row h-[4.5rem] py-2 px-6 items-center justify-center border-t border-[#FFFFFF26]"
        )}
      >
        <TouchableOpacity
          onPress={() => console.log("join")}
          style={tailwind(
            "flex flex-row items-center justify-center h-12 rounded-full px-10 bg-[#FF669E]"
          )}
        >
          <NativeImage source={require("../../assets/icon/others/money.png")} />
          <Text style={tailwind("text-base text-white font-medium")}>
            99元立即加入
          </Text>
          <NativeImage source={require("../../assets/icon/32DP/link.png")} />
        </TouchableOpacity>
      </View>
    </View>
  );
}