React Native中BottomTabNavigator的TypeScript类型不兼容问题求助

问题场景 #

在基于TypeScript的React Native项目中配置BottomTabNavigator时，将HomeScreen组件传入Tab.Screen的component属性时出现TypeScript类型不兼容错误，错误提示如下：

Type '({ route }: HomeScreenProps) => Element' is not assignable to type 'ScreenComponentType<ParamListBase, "Home"> | undefined'.
  Type '({ route }: HomeScreenProps) => Element' is not assignable to type 'FunctionComponent<{}>'.
    Types of parameters '__0' and 'props' are incompatible.
      Type '{}' is missing the following properties from type 'HomeScreenProps': navigation, route

错误原因分析 #

1. TabParamList定义错误：你在TabParamList中加入了TabNavigator这个路由项，但Tab.Navigator的参数列表应该只包含其下属的屏幕路由（Home、Two），不应该把导航器自身作为路由项，这会导致TypeScript无法正确推断屏幕组件的Props类型。
2. TabLayout的Props类型错误：TabLayout是Tab.Navigator的容器组件，不是一个屏幕组件，不需要使用BottomTabScreenProps来定义其Props，错误的类型定义会干扰导航器对下属组件的类型推断。

解决方案 #

步骤1：修正TabParamList定义 #

移除TabNavigator项，只保留实际的屏幕路由：

export type TabParamList = {
  Home: undefined;
  Two: undefined;
};

步骤2：修正TabLayout的Props与navigation获取方式 #

TabLayout不需要接收BottomTabScreenProps，如果需要在screenOptions中使用navigation，可以通过useNavigation钩子获取：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useNavigation } from '@react-navigation/native';

import { RootStackParamList } from '.';
import { HeaderButton } from '../components/HeaderButton';
import { TabBarIcon } from '../components/TabBarIcon';
import Two from '../screens/two';
import HomeScreen from '../screens/home';

const Tab = createBottomTabNavigator();

export type TabParamList = {
  Home: undefined;
  Two: undefined;
};

export default function TabLayout() {
  const navigation = useNavigation();
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: 'black',
      }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerShown: false,
          tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
          headerRight: () => <HeaderButton onPress={() => navigation.navigate('Modal')} />,
        }}
      />
      <Tab.Screen
        name="Two"
        component={Two}
        options={{
          title: 'Agendamentos',
          tabBarIcon: ({ color }) => <TabBarIcon name="folder" color={color} />,
        }}
      />
    </Tab.Navigator>
  );
}

步骤3：确认HomeScreen的Props类型正确性 #

确保HomeScreenProps关联的是修正后的TabParamList，当前代码已经正确，无需修改：

import { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
import type { TabParamList } from '../navigation';

type HomeScreenProps = BottomTabScreenProps<TabParamList, 'Home'>;

export default function HomeScreen({ route }: HomeScreenProps) {
  const [bookings, setBookings] = useState([]);

  useEffect(() => {
    const fetchBooking = async () => {
      try {
        const response = await fetch('http://example.com/booking/');
        const data = await response.json();
        setBookings(data);
      } catch (error) {
        console.error(error);
      }
    };
    fetchBooking();
  }, []);

  return (
    <SafeAreaView style={styles.mainContainer}>
      <View>
        <Text>{route.name}</Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: 'white',
  },
});

验证 #

修正后，TypeScript会正确推断HomeScreen的Props类型，错误提示将消失，导航器可以正常工作。

内容的提问来源于stack exchange，提问作者Cláudio Vitor Dantas