tiefen_space_app/screeens/HomeTab/index.jsx

import React, { useState, useEffect, useCallback } from "react";
import { Image, TouchableOpacity, View, Text } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Badge } from "@rneui/themed";
// import Stream from "../Stream";
import NoticeDetail from "../NoticeDetail/NoticeNav";
import My from "../My";
import Posts from "../Posts";
import Space from "../Space";
import { get } from "../../utils/storeInfo";
import CreatePostModal from "../../components/CreatePostModal";
import { connect } from "react-redux";
import Toast from "react-native-toast-message";
import baseRequest from "../../utils/baseRequest";
import { generateSignature } from "../../utils/crypto";
import { getNoticeCount } from "../../store/reducer";
import { useFocusEffect } from "@react-navigation/native";
const Tab = createBottomTabNavigator();

function HomeTab({ changeCount, noticeCount, authInfo }) {
  const [isCreatePostTabVisible, setIsCreatePostTabVisible] = useState(false);
  // useEffect(() => {
  //   // checkRole();
  // }, [noticeCount, authInfo]);
  useFocusEffect(
    useCallback(() => {
      checkRole();
    }, [])
  );
  const checkRole = async () => {
    const account = await get("account");
    if (account.role === 3) setIsCreatePostTabVisible(true);
    const base = await baseRequest();
    const apiUrl = process.env.EXPO_PUBLIC_API_URL;
    const body = {
      mid: base.b_mid,
      ...base,
    };
    const signature = await generateSignature(body);
    const _response = await fetch(
      `${apiUrl}/api/notification/get_unread_count?signature=${signature}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(body),
      }
    );
    const _data = await _response.json();
    if (_data.ret === -1) {
      Toast.show({
        type: "error",
        text1: _data.msg,
        topOffset: 60,
      });
      return;
    }
    changeCount(_data.data.total);
  };
  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>
        <CreatePostModal visible={visible} setVisible={setVisible} />
      </TouchableOpacity>
    );
  }, []);

  const EmptyComponent = () => <></>;

  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={Space}
          options={{
            title: "空间",
            headerShown: false,
            tabBarIcon: ({ focused, color, size }) => {
              if (focused) {
                return (
                  <Image
                    source={require("../../assets/icon/others/space_focus.png")}
                  />
                );
              } else {
                return (
                  <Image
                    source={require("../../assets/icon/others/space_blur.png")}
                  />
                );
              }
            },
          }}
        />
        {isCreatePostTabVisible && (
          <Tab.Screen
            name="Publish"
            component={EmptyComponent}
            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="NoticeDetail"
          component={NoticeDetail}
          options={{
            title: "消息",
            headerShown: false,

            tabBarIcon: ({ focused, color, size }) => {
              if (focused) {
                return (
                  <View>
                    <Image
                      source={require("../../assets/icon/others/streamfocus.png")}
                    />
                    {!!noticeCount && (
                      <Badge
                        status="error"
                        value={noticeCount > 99 ? "99+" : noticeCount}
                        containerStyle={{
                          position: "absolute",
                          top: 0,
                          right: 0,
                        }}
                        badgeStyle={{
                          borderWidth: 0,
                          backgroundColor: "#FF669E",
                        }}
                      />
                    )}
                  </View>
                );
              } else {
                return (
                  <View>
                    <Image
                      source={require("../../assets/icon/others/streamblur.png")}
                    />
                    {!!noticeCount && (
                      <Badge
                        status="error"
                        value={noticeCount > 99 ? "99+" : noticeCount}
                        containerStyle={{
                          position: "absolute",
                          top: 0,
                          right: 0,
                        }}
                        badgeStyle={{
                          borderWidth: 0,
                          backgroundColor: "#FF669E",
                        }}
                      />
                    )}
                  </View>
                );
              }
            },
          }}
        />
        <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>
    </>
  );
}

// 获取store中的数据的方法
const mapstateFromProps = (state) => {
  // state: store仓库中的数据
  return {
    noticeCount: state.noticeCount,
    authInfo: state.authInfo,
  };
};
// 修改store中的数据的方法
const mapDispatchFromProps = (dispatch) => {
  return {
    changeCount: (num) => {
      // 调用dispatch方法，传递actions
      dispatch(getNoticeCount(num));
    },
  };
};

export default connect(mapstateFromProps, mapDispatchFromProps)(HomeTab);