React Navigation v6 NavigationContainer 链接属性与嵌套导航打字稿问题

Question

我正在使用 React navigation 6 和包含选项卡导航器的根堆栈导航器。我的链接属性配置在应用程序组件中如下所示：

export default function App() {
    const linking = {
        prefixes: [prefix],
        config: {
            screens: {
                Roundups: 'roundups',
                Account: 'account',
                TabNavigator: {
                    screens: {
                        Tab1: 'tab1',
                        Tab2: 'tab2',
                    },
                },
            },
        },
    };

    return (
        <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
            <QueryClientProvider client={queryClient}>
                <Stack.Navigator>
                    <Stack.Screen name="RoundUps" component={RoundUps} />
                    <Stack.Screen name="Account" component={Account} />
                    <Stack.Screen name="LoggedIn" component={TabNavigator} />
                </Stack.Navigator>
            </QueryClientProvider>
        </NavigationContainer>
     );
}

我的 TabNavigator 组件如下所示：

const Tab = createBottomTabNavigator();

type Props = NativeStackScreenProps<RootStackParamList, 'TabNavigator'>;

const TabNavigator = ({ navigation }: Props) => {
    return (
        <Tab.Navigator>
            <Tab.Screen name="Tab1" component={Tab1Screen} />
            <Tab.Screen name="Tab2" component={Tab2Screen} />
        </Tab.Navigator>
    );
};

export default TabNavigator;

参考有关此属性的反应导航文档，我相信这是正确的设置，但我收到此打字稿错误并且我不知所措。

Type '{ prefixes: string[]; config: { screens: { Roundups: string; Account: string; TabNavigator: { screens: { Tab1: string; Tab2: string; }; }; }; }; }' is not assignable to type 'LinkingOptions<{ Roundups: unknown; Account: unknown; TabNavigator: unknown; }>'.
  The types of 'config.screens.TabNavigator' are incompatible between these types.
    Type '{ screens: { Tab1: string; Tab2: string; }; }' is not assignable to type 'string | Omit<PathConfig<{}>, "screens" | "initialRouteName"> | undefined'.
      Type '{ screens: { Tab1: string; Tab2: string; }; }' has no properties in common with type 'Omit<PathConfig<{}>, "screens" | "initialRouteName">'.ts(2322)

我在这里遗漏了一些明显的东西吗？谢谢

Answer 1

我也遇到了这个。要修复它，请尝试像这样注释链接对象：

const linking: LinkingOptions<RootStackParamList> = {
  ...
};

然后，确保这RootStackParamList是嵌套结构和参数的正确表示：

type TabsParamList = {
  Tab1: undefined
  Tab2: undefined
}

type RootStackParamList = {
  RoundUps: undefined
  Account: undefined
  LoggedIn: NavigatorScreenParams<TabsParamList>
}