Блог

Я использую 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;
 

Ссылаясь на навигационные документы react по этому атрибуту, я считаю, что это правильная настройка, но я получаю эту ошибку машинописи, и я в растерянности.

 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)
 

Я упускаю здесь что-то очевидное? Спасибо

Я тоже столкнулся с этим. Чтобы исправить это, попробуйте аннотировать объект ссылки следующим образом:

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

Затем убедитесь, что RootStackParamList это правильное представление вашей структуры вложенности и параметров:

 type TabsParamList = {
  Tab1: undefined
  Tab2: undefined
}

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