添加空间tab和发动态按钮

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}