react-native导航

创建navigation文件夹，创建bottomTab.tsx文件

import React from 'react'
import { RouteProp, TabNavigationState } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '@/pages/home'
import Listen from '@/pages/listen'
import Found from '@/pages/found'
import Account from '@/pages/account'
import { stackParamsList } from '@/navigator/createStackNavigation'
import { StackNavigationProp } from '@react-navigation/stack';
import { navigationProp } from '@/navigator/createStackNavigation'
type bottomParamsList = {
    Home: undefined;
    Listen: undefined;
    Found: undefined;
    Account: undefined;
}
// type navigationProp=StackNavigationProp<bottomParamsList>
const Tab = createBottomTabNavigator<bottomParamsList>();
type Route = RouteProp<stackParamsList, 'BottomTab'> & {
    state?: TabNavigationState;
}
interface Iprops {
    route: Route,
    navigation: navigationProp
}
function getHeaderTitle(route: Route) {
    const routeName = route.state ? route.state.routes[route.state.index].name : route.params?.screen || 'Home'
    switch (routeName) {
        case 'Home':
            return '首页';
        case 'Listen':
            return '我听';
        case 'Found':
            return '发现';
        case 'Account':
            return '账户';
        default:
            return '首页'
    }
}
class BottomTab extends React.Component<Iprops>{

    componentDidUpdate() {
        const { route, navigation } = this.props
        console.log(route)
        navigation.setOptions({
            headerTitle: getHeaderTitle(route)
        })
    }
    render() {
        return (
            <Tab.Navigator
                tabBarOptions={{
                    activeTintColor:'orange'
                }}
                >
                <Tab.Screen
                    name="Home"
                    component={Home}
                    options={{
                        tabBarLabel: '首页'
                    }} />
                <Tab.Screen
                    name="Listen"
                    component={Listen}
                    options={{
                        tabBarLabel: '我听'
                    }} />
                <Tab.Screen
                    name="Found"
                    component={Found}
                    options={{
                        tabBarLabel: '发现'
                    }} />
                <Tab.Screen
                    name="Account"
                    component={Account}
                    options={{
                        tabBarLabel: "账户"
                    }} />
            </Tab.Navigator>
        )
    }
}
export default BottomTab

index.tsx

import React from 'react'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator,StackNavigationProp, CardStyleInterpolators } from '@react-navigation/stack';
import Detail from '@/pages/detail'
import { StyleSheet ,Platform} from 'react-native';
import BottomTab from '@/navigator/bottomTab'
export type stackParamsList={
    BottomTab:{
        screen?:string
    };
    Detail:{
        id:number
    };
}
export type navigationProp=StackNavigationProp<stackParamsList>
const Stack=createStackNavigator<stackParamsList>()
function CreateStack(){
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerTitleAlign:'center',
                    cardStyleInterpolator:CardStyleInterpolators.forHorizontalIOS,
                    gestureEnabled:true,
                    gestureDirection:"horizontal",
                    headerStyle:{
                        ...Platform.select({
                            android:{
                                elevation:0,
                                borderBottom:StyleSheet.hairlineWidth
                            }
                        })
                    }
                }}
            >
                <Stack.Screen name="BottomTab" options={{
                    headerTitle:'首页'
                }} component={BottomTab}/>
                <Stack.Screen name="Detail" component={Detail}/>
            </Stack.Navigator>
        </NavigationContainer>
    )
}
export default CreateStack