为React Navigation Nested Stack v6正确添加类型

Question

我正在从

react-navigation v5

迁移到

v6

我正在尝试添加类型检查，并且我鼓励了一个无法从文档中找到解决方案的问题

    import { StackScreenProps } from '@react-navigation/stack';
    
    export type RootStackParamList = {
      Home: StackScreenProps<HomeStackParamList>;
      Users: StackScreenProps<UsersStackParamList>;
      //other stacks that I have
    };
    
    export type HomeStackParamList = {
      Home: undefined;
      Bets: { id: string };
    }
    
    export type UsersStackParamList = {
      Profile: undefined;
      ProfileCreate: undefined;
    };
    
    //get global type safety I'm using this as recommended in docs
    declare global {
      namespace ReactNavigation {
        interface RootParamList extends RootStackParamList {}
      }
    }

当我尝试使用

useNavigation()

钩子时出现问题 假设我想从

Home

组件导航到

Users ProfilCreate

，如下所示

    import { useNavigation } from '@react-navigation/native';
    const navigation = useNavigation();
    
    //as I understood it should work like this
    navigation.navigate('Users',{screen:'ProfileCreate'})

但问题是我不能在这里使用

{screen:'ProfileCreate'}

它允许我传递这个对象。

即使我使用如下导航和 intialRouteName

     navigation.navigate('Users');

“string”类型的参数不可分配给“{ key: string;”类型的参数参数？：StackScreenProps |不明确的;合并？：布尔值 |不明确的; } | { 名称：“用户”；键？： 字符串 |不明确的;参数：StackScreenProps<...>；合并？：布尔值 |不明确的; } | ... 7 更多... | { ...; }'.

请注意，我使用的是

Stack

导航，而不是

NativeStack

导航。

我还有一个问题。假设我们有一个包含不包含任何参数的路由（例如：

SomeStackParamList

）的堆栈。即使没有参数，我们是否仍然需要将它们添加到 RootStackParamList 中才能接收全局级别的类型建议？

export type SomeStackParamList = {
   OneRote: undefined;
   TwoRoute: undefined;
 }

Answer 1

您的类型不正确。

StackScreenProps

不应该这样使用。你需要使用

NavigatorScreenParams

:

export type RootStackParamList = {
  Home: NavigatorScreenParams<HomeStackParamList>;
  Users: NavigatorScreenParams<UsersStackParamList>;
  //other stacks that I have
};

请按照文档进行 TypeScript 设置 https://reactnavigation.org/docs/typescript/#nesting-navigators