87 lines
2.6 KiB
JavaScript
87 lines
2.6 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={() => {
|
|
navigation.navigate("StreamerProfile", {
|
|
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")}
|
|
>
|
|
查看主页
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
);
|
|
}
|