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

Posted 2023-03-13

【中文标题】React Navigation v6 NavigationContainer 链接属性与嵌套导航打字稿问题

【英文标题】：React Navigation v6 NavigationContainer linking attribute with nested navigation typescript issue

【发布时间】：2021-11-14 19:24:52

【问题描述】：

我正在使用带有一个包含选项卡导航器的根堆栈导航器的反应导航 6。我的链接属性配置在 App 组件中如下所示：

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;

参考此属性上的react navigation docs，我相信这是正确的设置，但我收到此打字稿错误，我不知所措。

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)

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

【参考方案1】：

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

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

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

type TabsParamList = 
  Tab1: undefined
  Tab2: undefined


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