diff --git a/screeens/HomeTab/index.jsx b/screeens/HomeTab/index.jsx index a71a12b..5f30136 100644 --- a/screeens/HomeTab/index.jsx +++ b/screeens/HomeTab/index.jsx @@ -1,13 +1,138 @@ -import React from "react"; -import { Image } from "react-native"; +import React, { useState, useEffect, useCallback } from "react"; +import { Image, TouchableOpacity, View, Modal, Text } from "react-native"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; +import { useTailwind } from "tailwind-rn"; import Stream from "../Stream"; import My from "../My"; import Posts from "../Posts"; +import { get } from "../../utils/storeInfo"; +import { Icon } from "@rneui/themed"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; const Tab = createBottomTabNavigator(); -export default function HomeTab() { +export default function HomeTab({ navigation, route }) { + const tailwind = useTailwind(); + const insets = useSafeAreaInsets(); + + const [isCreatePostTabVisible, setIsCreatePostTabVisible] = useState(false); + useEffect(() => { + const checkRole = async () => { + const account = await get("account"); + if (account.role === 3) setIsCreatePostTabVisible(true); + }; + checkRole(); + }, []); + + const CustomTabBarButton = useCallback(({ children }) => { + const [visible, setVisible] = useState(false); + return ( + <TouchableOpacity + style={{ + top: -10, + justifyContent: "center", + alignItems: "center", + }} + onPress={() => setVisible(!visible)} + > + <View + style={{ + width: 70, + height: 70, + borderRadius: 35, + }} + > + {children} + </View> + <Modal + visible={visible} + transparent={true} + statusBarTranslucent + animationType="slide" + > + <TouchableOpacity + activeOpacity={1} + style={tailwind("flex flex-1")} + onPress={() => setVisible(false)} + > + <TouchableOpacity + activeOpacity={1} + style={{ + paddingBottom: insets.bottom, + paddingLeft: insets.left, + paddingRight: insets.right, + ...tailwind( + "absolute bottom-0 left-0 h-48 w-full bg-[#13121F] rounded-t-2xl" + ), + }} + > + <View style={tailwind("flex flex-1 flex-col")}> + <View + style={tailwind( + "flex flex-1 flex-row justify-between items-center" + )} + > + <TouchableOpacity + style={tailwind("flex flex-col items-center basis-1/3")} + > + <Icon type="ionicon" name="image" size={30} color="white" /> + <Text + style={tailwind("text-base text-[#FFFFFF80] font-medium")} + > + 发图片 + </Text> + </TouchableOpacity> + <TouchableOpacity + style={tailwind("flex flex-col items-center basis-1/3")} + > + <Icon + type="ionicon" + name="videocam" + size={30} + color="white" + /> + <Text + style={tailwind("text-base text-[#FFFFFF80] font-medium")} + > + 发视频 + </Text> + </TouchableOpacity> + <TouchableOpacity + onPress={() => { + navigation.navigate("CreatePost"); + setVisible(false); + }} + style={tailwind("flex flex-col items-center basis-1/3")} + > + <Icon + type="ionicon" + name="aperture" + size={30} + color="white" + /> + <Text + style={tailwind("text-base text-[#FFFFFF80] font-medium")} + > + 广场动态 + </Text> + </TouchableOpacity> + </View> + <Icon + style={tailwind("mb-2")} + onPress={() => setVisible(false)} + type="ionicon" + name="close-outline" + size={30} + color="#FFFFFF80" + /> + </View> + </TouchableOpacity> + </TouchableOpacity> + </Modal> + </TouchableOpacity> + ); + }, []); + return ( <Tab.Navigator screenOptions={() => ({ @@ -42,6 +167,45 @@ export default function HomeTab() { }, }} /> + <Tab.Screen + name="Space" + component={My} + options={{ + title: "空间", + headerShown: false, + tabBarIcon: ({ focused, color, size }) => { + if (focused) { + return ( + <Image + source={require("../../assets/icon/others/myfocus.png")} + /> + ); + } else { + return ( + <Image + source={require("../../assets/icon/others/myblur.png")} + /> + ); + } + }, + }} + /> + {isCreatePostTabVisible && ( + <Tab.Screen + name="CreatePost" + component={Stream} + options={{ + title: "", + headerShown: false, + tabBarIcon: ({ focused, color, size }) => ( + <Image + source={require("../../assets/icon/others/createpost.png")} + /> + ), + tabBarButton: (props) => <CustomTabBarButton {...props} />, + }} + /> + )} <Tab.Screen name="Stream" component={Stream}