我如何自定义反应导航 v5 材料底部导航器？

Question

我试图自定义我的材料底部导航选项卡，但就我搜索而言，互联网上没有足够的资源。你能帮我解决这个问题吗？

这是我当前的底部导航标签：

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

interface IAppTabsProps extends IAppStackNavigationProps<'AppTabs'> {}

const Tabs = createMaterialBottomTabNavigator<AppTabsParamList>();

const AppTabs: React.FC<IAppTabsProps> = () => {
  return (
    <Tabs.Navigator labeled keyboardHidesNavigationBar initialRouteName="Home" shifting sceneAnimationEnabled>
      <Tabs.Screen
        name="Home"
        component={Home}
        options={{
          tabBarIcon: ({ focused, ...props }) => (
            <Ionicons name={focused ? 'home' : 'home-outline'} size={24} {...props} />
          ),
          tabBarBadge: true,
          tabBarLabel: 'Home',
        }}
      />
      <Tabs.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarIcon: props => <Ionicons name="ios-person" size={24} {...props} />,
          tabBarLabel: 'Profile',
        }}
      />
      <Tabs.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarIcon: ({ focused, ...props }) => (
            <FontistoIcons name={focused ? 'bell-alt' : 'bell'} size={24} {...props} />
          ),
          tabBarLabel: 'Notifications',
          tabBarBadge: 4,
        }}
      />
      <Tabs.Screen
        name="Preferences"
        component={Preferences}
        options={{
          tabBarIcon: props => <SimpleLineIcons name="settings" size={24} {...props} />,
          tabBarLabel: 'Preferences',
        }}
      />
    </Tabs.Navigator>
  );
};