Dingdong_client/navigation/BottomTabNavigator.jsx

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from '../screens/Main/HomeScreen';
import OrderScreen from '../screens/Order/OrderScreen';
import UserScreen from '../screens/User/UserScreen';
import Icon from '../components/SvgIcon';
import Text from '../components/Text';

const BottomTab = createBottomTabNavigator();

export default function BottomTabNavigator() {
  return (
    <BottomTab.Navigator initialRouteName="Home">
      <BottomTab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: ({ focused }) => (
            <Text size="c2" bold type={focused ? 'primary' : 'info'}>
              外卖
            </Text>
          ),
          tabBarIcon: ({ focused }) => (
            <Icon
              fillAll={!!focused}
              type={focused ? 'primary' : 'info'}
              width={37}
              name="home"
            />
          ),
        }}
      />
      <BottomTab.Screen
        name="Order"
        component={OrderScreen}
        options={{
          title: ({ focused }) => (
            <Text size="c2" bold type={focused ? 'primary' : 'info'}>
              订单
            </Text>
          ),
          tabBarIcon: ({ focused }) => (
            <Icon name={focused ? 'order1' : 'order2'} />
          ),
        }}
      />
      <BottomTab.Screen
        name="User"
        component={UserScreen}
        options={{
          title: ({ focused }) => (
            <Text size="c2" bold type={focused ? 'primary' : 'info'}>
              我的
            </Text>
          ),
          tabBarIcon: ({ focused }) => (
            <Icon
              type={focused ? 'primary' : 'info'}
              fillAll={!!focused}
              name="user"
            />
          ),
        }}
      />
    </BottomTab.Navigator>
  );
}