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

 1 import React from 'react'
 2 import { RouteProp, TabNavigationState } from '@react-navigation/native';
 3 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 4 import Home from '@/pages/home'
 5 import Listen from '@/pages/listen'
 6 import Found from '@/pages/found'
 7 import Account from '@/pages/account'
 8 import { stackParamsList } from '@/navigator/createStackNavigation'
 9 import { StackNavigationProp } from '@react-navigation/stack';
10 import { navigationProp } from '@/navigator/createStackNavigation'
11 type bottomParamsList = {
12     Home: undefined;
13     Listen: undefined;
14     Found: undefined;
15     Account: undefined;
16 }
17 // type navigationProp=StackNavigationProp<bottomParamsList>
18 const Tab = createBottomTabNavigator<bottomParamsList>();
19 type Route = RouteProp<stackParamsList, 'BottomTab'> & {
20     state?: TabNavigationState;
21 }
22 interface Iprops {
23     route: Route,
24     navigation: navigationProp
25 }
26 function getHeaderTitle(route: Route) {
27     const routeName = route.state ? route.state.routes[route.state.index].name : route.params?.screen || 'Home'
28     switch (routeName) {
29         case 'Home':
30             return '首页';
31         case 'Listen':
32             return '我听';
33         case 'Found':
34             return '发现';
35         case 'Account':
36             return '账户';
37         default:
38             return '首页'
39     }
40 }
41 class BottomTab extends React.Component<Iprops>{
42 
43     componentDidUpdate() {
44         const { route, navigation } = this.props
45         console.log(route)
46         navigation.setOptions({
47             headerTitle: getHeaderTitle(route)
48         })
49     }
50     render() {
51         return (
52             <Tab.Navigator
53                 tabBarOptions={{
54                     activeTintColor:'orange'
55                 }}
56                 >
57                 <Tab.Screen
58                     name="Home"
59                     component={Home}
60                     options={{
61                         tabBarLabel: '首页'
62                     }} />
63                 <Tab.Screen
64                     name="Listen"
65                     component={Listen}
66                     options={{
67                         tabBarLabel: '我听'
68                     }} />
69                 <Tab.Screen
70                     name="Found"
71                     component={Found}
72                     options={{
73                         tabBarLabel: '发现'
74                     }} />
75                 <Tab.Screen
76                     name="Account"
77                     component={Account}
78                     options={{
79                         tabBarLabel: "账户"
80                     }} />
81             </Tab.Navigator>
82         )
83     }
84 }
85 export default BottomTab

index.tsx

 1 import React from 'react'
 2 import { NavigationContainer } from '@react-navigation/native';
 3 import { createStackNavigator,StackNavigationProp, CardStyleInterpolators } from '@react-navigation/stack';
 4 import Detail from '@/pages/detail'
 5 import { StyleSheet ,Platform} from 'react-native';
 6 import BottomTab from '@/navigator/bottomTab'
 7 export type stackParamsList={
 8     BottomTab:{
 9         screen?:string
10     };
11     Detail:{
12         id:number
13     };
14 }
15 export type navigationProp=StackNavigationProp<stackParamsList>
16 const Stack=createStackNavigator<stackParamsList>()
17 function CreateStack(){
18     return (
19         <NavigationContainer>
20             <Stack.Navigator
21                 screenOptions={{
22                     headerTitleAlign:'center',
23                     cardStyleInterpolator:CardStyleInterpolators.forHorizontalIOS,
24                     gestureEnabled:true,
25                     gestureDirection:"horizontal",
26                     headerStyle:{
27                         ...Platform.select({
28                             android:{
29                                 elevation:0,
30                                 borderBottom:StyleSheet.hairlineWidth
31                             }
32                         })
33                     }
34                 }}
35             >
36                 <Stack.Screen name="BottomTab" options={{
37                     headerTitle:'首页'
38                 }} component={BottomTab}/>
39                 <Stack.Screen name="Detail" component={Detail}/>
40             </Stack.Navigator>
41         </NavigationContainer>
42     )
43 }
44 export default CreateStack