RnMultibundler/src/app/routes/MainTab.tsx

import React, { useCallback, useEffect, useState } from 'react';
import { DeviceEventEmitter, ImageSourcePropType } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {
  DEVICE_ENENT_UPDATE_HOME_FEATURE_LIST_KEY,
  HEADER_TINT_COLOR,
  HEADER_TITLE_FONT_SIZE,
  HEADER_TITLE_FONT_WEIGHT,
  TAB_BAR_ACTIVE_TINT_COLOR,
  TAB_BAR_INACTIVE_TINT_COLOR,
} from '@common//constants';
import { useAuth } from '@common/contexts/useAuth';
import { MainTabParamList } from './MainParamList';
import HomeScreen from '@app/screens/home/home/HomeScreen';
import MineScreen from '@app/screens/mine/mine/MineScreen';
import { Feature } from '@app/screens/home/home/api';
import { useHandleClickFeatureListItem } from '@app/screens/home/home/hooks/useHandleClickFeatureListItem';
import TabBarIcon from '@common/components/TabBarIcon.tsx';

const Tab = createBottomTabNavigator<MainTabParamList>();

export default function MainTab() {
  const {
    state: { userInfo },
  } = useAuth();

  // 【状态】

  const [recommendFeature, setRecommendFeature] = useState<Feature | undefined>(
    undefined,
  ); // 当前推荐的服务

  // 【通知监听】

  useEffect(() => {
    // 监听用户信息的更新
    const listener = DeviceEventEmitter.addListener(
      DEVICE_ENENT_UPDATE_HOME_FEATURE_LIST_KEY,
      (feature?: Feature) => {
        setRecommendFeature(feature);
      },
    );

    return () => {
      listener.remove();
    };
  }, []);

  // 【点击事件】
  const { handleClickFeatureListItem } = useHandleClickFeatureListItem();

  // 【子组件】

  const handleTabBarIcon = useCallback(
    (props: {
      focused: boolean;
      size: number;
      activeImage: ImageSourcePropType;
      inactiveImage: ImageSourcePropType;
      badge?: boolean;
    }) => {
      return (
        <MainTabBarIcon
          focused={props.focused}
          size={props.size}
          activeImage={props.activeImage}
          inactiveImage={props.inactiveImage}
          badge={props.badge}
        />
      );
    },
    [],
  );

  if (userInfo === undefined) {
    return null;
  }

  return (
    <Tab.Navigator
      screenOptions={{
        lazy: false, // 关闭懒加载
        headerTitleAlign: 'center', // 安卓标题居中
        tabBarActiveTintColor: TAB_BAR_ACTIVE_TINT_COLOR,
        tabBarInactiveTintColor: TAB_BAR_INACTIVE_TINT_COLOR,
        headerShadowVisible: false,
        headerTintColor: HEADER_TINT_COLOR,
        headerTitleStyle: {
          fontSize: HEADER_TITLE_FONT_SIZE,
          fontWeight: HEADER_TITLE_FONT_WEIGHT,
        },
      }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: '工作台',
          tabBarIcon: ({ focused, size }) => {
            return handleTabBarIcon({
              focused: focused,
              size: size,
              activeImage: require('@app/assets/images/common/tab_home_s.png'),
              inactiveImage: require('@app/assets/images/common/tab_home.png'),
            });
          },
        }}
      />
      {recommendFeature && (
        <Tab.Screen
          name="Recommend"
          component={RecommendScreen}
          options={{
            title: recommendFeature.name,
            tabBarIcon: ({ focused, size }) => {
              return handleTabBarIcon({
                focused: focused,
                size: size,
                activeImage: require('@app/assets/images/common/tab_recommend.png'),
                inactiveImage: require('@app/assets/images/common/tab_recommend.png'),
                badge: recommendFeature.badge,
              });
            },
          }}
          listeners={{
            tabPress: e => {
              e.preventDefault(); // 阻止默认行为
              handleClickFeatureListItem(recommendFeature);
            },
          }}
        />
      )}
      <Tab.Screen
        name="Mine"
        component={MineScreen}
        options={{
          title: '我的',
          tabBarIcon: ({ focused, size }) => {
            return handleTabBarIcon({
              focused: focused,
              size: size,
              activeImage: require('@app/assets/images/common/tab_mine_s.png'),
              inactiveImage: require('@app/assets/images/common/tab_mine.png'),
            });
          },
        }}
      />
    </Tab.Navigator>
  );
}

function RecommendScreen() {
  return null;
}

// 图标
function MainTabBarIcon(props: {
  focused: boolean;
  size: number;
  inactiveImage: ImageSourcePropType;
  activeImage: ImageSourcePropType;
  badge?: boolean;
}) {
  return (
    <TabBarIcon
      focused={props.focused}
      size={props.size}
      activeImage={props.activeImage}
      inactiveImage={props.inactiveImage}
      // activeTintColor={TAB_BAR_ACTIVE_TINT_COLOR}
      inactiveTintColor={TAB_BAR_INACTIVE_TINT_COLOR}
      badge={props.badge}
    />
  );
}