组件准备

@react-navigation/native
@react-navigation/stack
@react-navigation/bottom-tabs
react-native-vector-icons/Ionicons

核心代码

import React, {Component} from 'react';

import {NavigationContainer} from "@react-navigation/native";
import {createStackNavigator} from "@react-navigation/stack";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import Ionicons from "react-native-vector-icons/Ionicons";
import HomePage from "./pages/Home";
import ListPage from "./pages/List";
import DetailPage from "./pages/Detail";
import Logo from "./components/Logo/index"
function BottonTab () {
    const Tab = createBottomTabNavigator();
    return (
        <Tab.Navigator
            screenOptions={({route}) => ({
                tabBarIcon: ({focused, color, size}) => {
                    let iconName;
                    switch (route.name){
                        case "首页":
                            iconName = "ios-home";
                            break;
                        case "列表":
                            iconName = "ios-list";
                            break;
                    }
                    return (
                        <Ionicons
                            name={iconName}
                            color={color}
                            size={size}
                        />
                    )
                }
            })}
            tabBarOptions={{
                activeTintColor: "#23b8ff",
                inactiveTintColor: "#999999"
            }}
        >
            <Tab.Screen
                name="首页"
                component={HomePage}
            />
            <Tab.Screen
                name="列表"
                component={ListPage}
            />
        </Tab.Navigator>
    )
}

class Txclass extends Component {
    constructor(props){
        super(props);
    }
    render(){
       const Stack = createStackNavigator();
        return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen
                        name="Tab"
                        component={BottonTab}
                        options={{
                            headerTitle: props => <Logo {...props}/>
                        }}
                    />
                    <Stack.Screen
                        name="Detail"
                        component={DetailPage}
                        options={{
                            headerTitle: props => <Logo {...props}/>,
                            headerBackTitle: "返回"
                        }}
                    />
                </Stack.Navigator>
            </NavigationContainer>
        )
    }
}
export default Txclass;

Logo 为头部navbar组件
createStackNavigator 是创建导航路由

最终效果