Dingdong_client/navigation/BottomTabNavigator.jsx

import * as React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import HomeScreen from '../screens/Home/HomeScreen'
import LinksScreen from '../screens/Home/LinksScreen'
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 type={focused ? 'primary' : 'info'} name="home" />
          ),
        }}
      />
      <BottomTab.Screen
        name="Links"
        component={LinksScreen}
        options={{
          title: ({ focused }) => (
            <Text size="c2" bold type={focused ? 'primary' : 'info'}>
              订单
            </Text>
          ),
          tabBarIcon: ({ focused }) => (
            <Icon type={focused ? 'primary' : 'info'} name="order" />
          ),
        }}
      />
      <BottomTab.Screen
        name="User"
        component={LinksScreen}
        options={{
          title: ({ focused }) => (
            <Text size="c2" bold type={focused ? 'primary' : 'info'}>
              我的
            </Text>
          ),
          tabBarIcon: ({ focused }) => (
            <Icon type={focused ? 'primary' : 'info'} name="user" />
          ),
        }}
      />
    </BottomTab.Navigator>
  )
}