tiefen_space_app/components/StreamerNavigatorModal/index.jsx

96 lines
3.1 KiB
JavaScript

import {
View,
Text,
Modal,
TouchableOpacity,
Image as NativeImage,
} from "react-native";
import React from "react";
import { useTailwind } from "tailwind-rn";
import { Button } from "@rneui/themed";
import { Image } from "expo-image";
import { useNavigation } from "@react-navigation/native";
export default function StreamerNavigatorModal({ status, setStatus }) {
const tailwind = useTailwind();
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
const navigation = useNavigation();
return (
<Modal
visible={status.open}
transparent={true}
statusBarTranslucent
animationType="fade"
>
<TouchableOpacity
activeOpacity={1}
onPress={() => setStatus({ ...status, open: false })}
style={{
backgroundColor: "#00000080",
...tailwind("flex-1 justify-center items-center"),
}}
>
<TouchableOpacity
activeOpacity={1}
style={tailwind(
"rounded-2xl bg-[#1E1C29] items-center w-3/4 overflow-hidden"
)}
>
<View style={tailwind("flex flex-col w-full")}>
<Image
source={status.data?.cover?.images[0]?.urls[0]}
contentFit="cover"
transition={1000}
placeholder={blurhash}
cachePolicy="disk"
style={{ aspectRatio: 1, ...tailwind("w-full") }}
/>
<View style={tailwind("p-4")}>
<View style={tailwind("flex flex-row items-center")}>
<Text
style={tailwind("text-xl text-white font-medium mr-1")}
numberOfLines={1}
ellipsizeMode="tail"
>
{status.data?.name}
</Text>
<NativeImage
source={require("../../assets/icon/others/verification.png")}
/>
</View>
<Text style={tailwind("text-sm text-[#FFFFFFB2] mt-1")}>
{status.data?.bio}
</Text>
<Button
onPress={
status.data?.zones?.length === 0
? () => {
navigation.navigate("StreamerProfile", {
mid: status.data?.mid,
});
setStatus({ ...status, open: false });
}
: () => {
navigation.navigate("SpaceIntroduce", {
mid: status.data?.mid,
});
setStatus({ ...status, open: false });
}
}
color="#FF669E"
radius="999"
size="md"
titleStyle={tailwind("text-base")}
containerStyle={tailwind("w-full px-4 mt-4")}
>
{status.data?.zones?.length === 0 ? "查看主页" : "查看空间"}
</Button>
</View>
</View>
</TouchableOpacity>
</TouchableOpacity>
</Modal>
);
}