接着学习，自定义底部TabBar

要使用此导航器，请确保您具有 @react-navigation/native 及其依赖项（按照本指南操作），然后安装 @react-navigation/bottom-tabs ：

npm install @react-navigation/bottom-tabs

D:\react\rnApp\components\MyTabBar\index.ts

import * as React from 'react';
import type {PropsWithChildren} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';

type SectionProps = PropsWithChildren<{
  state?: any;
  navigation?: any;
  route?: any;
  descriptors?: any;
}>;

function MyTabBar({
  state,
  descriptors,
  navigation,
}: SectionProps): React.JSX.Element {
  return (
    <View style={{flexDirection: 'row'}}>
      {state.routes.map((route: any, index: number) => {
        const {options} = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? {selected: true} : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            key={index}
            style={{
              flex: 1,
              height: 60,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text
              style={{
                color: isFocused ? '#673ab7' : '#222',
                fontWeight: 'bold',
              }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

export default MyTabBar;

App.tsx

import * as React from 'react';
import {View, Text, Button} from 'react-native';
import type {PropsWithChildren} from 'react';

import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

import MyTabBar from './components/MyTabBar/index';

type SectionProps = PropsWithChildren<{
  state?: any;
  navigation?: any;
  route?: any;
  descriptors?: any;
}>;

function HomeScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen({navigation}: SectionProps): React.JSX.Element {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
    </View>
  );
}

function DetailsScreen({navigation}: SectionProps): React.JSX.Element {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
    </View>
  );
}

const Tab = createBottomTabNavigator();
const SettingsStack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" options={{headerShown: true}}>
          {() => (
            <SettingsStack.Navigator>
              <SettingsStack.Screen
                name="SettingsHome"
                component={SettingsScreen}
              />
              <SettingsStack.Screen name="Details" component={DetailsScreen} />
            </SettingsStack.Navigator>
          )}
        </Tab.Screen>
      </Tab.Navigator>
    </NavigationContainer>
  );
}