Dingdong_help/navigation/BottomTabNavigator.js

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import * as React from "react";

import TabBarIcon from "../components/TabBarIcon";
import HomeScreen from "../screens/HomeScreen";
import LinksScreen from "../screens/LinksScreen";

const BottomTab = createBottomTabNavigator();
const INITIAL_ROUTE_NAME = "Home";

export default function BottomTabNavigator({ navigation, route }) {
    // Set the header title on the parent stack navigator depending on the
    // currently active tab. Learn more in the documentation:
    // https://reactnavigation.org/docs/en/screen-options-resolution.html
    navigation.setOptions({ headerTitle: getHeaderTitle(route) });

    return (
        <BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
            <BottomTab.Screen
                name='Home'
                component={HomeScreen}
                options={{
                    title: "叮咚外卖协助平台用户协作",
                    tabBarIcon: ({ focused }) => (
                        <TabBarIcon focused={focused} name='md-code-working' />
                    ),
                }}
            />
            <BottomTab.Screen
                name='Links'
                component={LinksScreen}
                options={{
                    title: "叮咚外卖协助平台骑手协作",
                    tabBarIcon: ({ focused }) => (
                        <TabBarIcon focused={focused} name='md-book' />
                    ),
                }}
            />
        </BottomTab.Navigator>
    );
}

function getHeaderTitle(route) {
    const routeName =
        route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;

    switch (routeName) {
        case "Home":
            return "用户下单流程";
        case "Links":
            return "骑手接单";
    }
}