tiefen_space_app/screeens/HomeTab/index.jsx

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({ 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={() => ({
        tabBarActiveTintColor: "#FF669E",
        tabBarInactiveTintColor: "gray",
        tabBarStyle: {
          backgroundColor: "#07050A",
          borderTopColor: "#FFFFFF26",
        },
      })}
    >
      <Tab.Screen
        name="Posts"
        component={Posts}
        options={{
          title: "动态",
          headerShown: false,
          tabBarIcon: ({ focused, color, size }) => {
            if (focused) {
              return (
                <Image
                  source={require("../../assets/icon/others/postfocus.png")}
                />
              );
            } else {
              return (
                <Image
                  source={require("../../assets/icon/others/postblur.png")}
                />
              );
            }
          },
        }}
      />
      <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}
        options={{
          title: "发现",
          headerShown: false,
          tabBarIcon: ({ focused, color, size }) => {
            if (focused) {
              return (
                <Image
                  source={require("../../assets/icon/others/streamfocus.png")}
                />
              );
            } else {
              return (
                <Image
                  source={require("../../assets/icon/others/streamblur.png")}
                />
              );
            }
          },
        }}
      />
      <Tab.Screen
        name="My"
        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")}
                />
              );
            }
          },
        }}
      />
    </Tab.Navigator>
  );
}