142 lines
4.1 KiB
JavaScript
142 lines
4.1 KiB
JavaScript
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
Image as NativeImage,
|
|
} from "react-native";
|
|
import React from "react";
|
|
import { useTailwind } from "tailwind-rn";
|
|
import { Image } from "expo-image";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
|
|
export default function SpaceCard({ data }) {
|
|
const navigation = useNavigation();
|
|
const tailwind = useTailwind();
|
|
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
|
|
|
|
if (data?.last) {
|
|
return (
|
|
<TouchableOpacity
|
|
activeOpacity={1}
|
|
onPress={() => navigation.navigate("Stream")}
|
|
style={tailwind("w-full px-1 mt-2")}
|
|
>
|
|
<View
|
|
style={tailwind(
|
|
"flex flex-col relative rounded-lg overflow-hidden bg-[#FFFFFF1A]"
|
|
)}
|
|
>
|
|
<View
|
|
style={{ aspectRatio: "1/1", ...tailwind("w-full z-0") }}
|
|
></View>
|
|
<View style={{ height: 42, ...tailwind("w-full z-0") }}></View>
|
|
<View
|
|
style={{
|
|
paddingLeft: 22,
|
|
paddingTop: 30,
|
|
...tailwind("flex flex-col absolute w-full h-full"),
|
|
}}
|
|
>
|
|
<Text
|
|
style={{ fontSize: 22, ...tailwind("text-white font-medium") }}
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
发现更多
|
|
</Text>
|
|
<Text
|
|
style={{ fontSize: 22, ...tailwind("text-[#FFFFFF40] text-sm") }}
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
缘分就在不经意间
|
|
</Text>
|
|
<NativeImage
|
|
style={tailwind("mt-4")}
|
|
source={require("../../assets/icon/others/rightarrow_border.png")}
|
|
/>
|
|
<NativeImage
|
|
style={{ right: 0, ...tailwind("absolute bottom-0") }}
|
|
source={require("../../assets/icon/others/magnifier.png")}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
activeOpacity={1}
|
|
onPress={() => navigation.navigate("StreamerSpace", { mid: data.mid })}
|
|
style={tailwind("w-full px-1 mt-2")}
|
|
>
|
|
<View style={tailwind("flex flex-col rounded-lg overflow-hidden")}>
|
|
<Image
|
|
source={data.streamer_ext.cover.images[0].urls[0]}
|
|
contentFit="cover"
|
|
transition={1000}
|
|
placeholder={blurhash}
|
|
cachePolicy="disk"
|
|
style={{ aspectRatio: "1/1", ...tailwind("w-full z-0") }}
|
|
/>
|
|
{data.is_unread_zone_moment_exist === 1 && (
|
|
<NativeImage
|
|
style={{ right: 2, ...tailwind("absolute top-0") }}
|
|
source={require("../../assets/icon/others/space_new.png")}
|
|
/>
|
|
)}
|
|
<View
|
|
style={{
|
|
height: 42,
|
|
gap: 4,
|
|
...tailwind(
|
|
"flex flex-row w-full items-center px-2.5 bg-[#FFFFFF1A]"
|
|
),
|
|
}}
|
|
>
|
|
<Text
|
|
style={tailwind("shrink text-white text-sm font-medium")}
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
{data.streamer_ext.name}
|
|
</Text>
|
|
{data.admission_price !== 0 && (
|
|
<View
|
|
style={{
|
|
paddingHorizontal: 3,
|
|
height: 14,
|
|
borderRadius: 2,
|
|
...tailwind("flex items-center justify-center bg-[#FF669E]"),
|
|
}}
|
|
>
|
|
<Text
|
|
style={{ fontSize: 9, ...tailwind("text-white font-medium") }}
|
|
>
|
|
付费
|
|
</Text>
|
|
</View>
|
|
)}
|
|
{data.visitor_role === 3 && (
|
|
<View
|
|
style={{
|
|
paddingHorizontal: 3,
|
|
height: 14,
|
|
borderRadius: 2,
|
|
...tailwind("flex items-center justify-center bg-[#FF669E]"),
|
|
}}
|
|
>
|
|
<Text
|
|
style={{ fontSize: 9, ...tailwind("text-white font-medium") }}
|
|
>
|
|
创建者
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|