如何联合类型反应导航道具？

Question

联合类型反应导航道具？

大家好，

我在 react native 上使用 typescript 和 react-navigation 模块，我正在尝试键入一个子组件 Navigation prop，它可以由两个不同的导航使用。

我当前的导航结构是一个主选项卡导航器，由两个堆栈导航器组成，两个导航器的屏幕都使用子组件， onPress导航到MovieDetailsScreen ：

├── tabs
│  ├── SearchStack   ├── SearchScreen
│                    ├── MovieDetailsScreen
│ 
│  ├── FavoritesStack├── FavoritesScreen
                     ├── MovieDetailsScreen

这是我当前为我的子组件道具输入的内容：

type Props = {
  navigation: SearchNavigationProp | FavoritesNavigationProp;
  ...
};

export default function DisplayMoviesList(props: Props) {
  ...

  function _navigateToMovieDetails(id: Id) {
    navigation.navigate('MovieDetails', { id: id });
  }

  return (
...
)
}

两个Stack都拥有MovieDetails路由：

export type FavoritesStackParamList = {
  Favorites: undefined;
  MovieDetails: { id: Id };
};

export type SearchStackParamList = {
  Search: undefined;
  MovieDetails: { id: Id };
};

我的问题出在我的子组件中，该行navigation.navigate('MovieDetails', { id: id }); 出现 typescript 错误：

This expression is not callable.
  Each member of the union type '{ <RouteName extends keyof FavoritesStackParamList | keyof RootTabParamList>(...args: undefined extends (FavoritesStackParamList & RootTabParamList)[RouteName] ? [screen: ...] | [screen: ...] : [screen: ...]): void; <RouteName extends keyof FavoritesStackParamList | keyof RootTabParamList>(options: { ...; } | { ...;...' has signatures, but none of those signatures are compatible with each other.

我不确定如何解决这个问题，在这种情况下有没有更好的联合类型方法？ 还是我的导航结构不正确？ 除了 Typescript 错误外，我的应用程序按预期工作。

Answer 1

我设法使用用户定义的类型保护快速解决了这个问题：

function isSearchNavigationProp(
  navigation: Navigation
): navigation is SearchNavigationProp {
  return (navigation as SearchNavigationProp).navigate !== undefined;
}


export default function DisplayMoviesList(props: Props) {
  ...

  function _navigateToMovieDetails(id: Id) {
    if (isSearchNavigationProp(navigation)) {
      navigation.navigate('MovieDetails', { id: id });
    } else {
      navigation.navigate('MovieDetails', { id: id });
    }
  }

然而，这并不是真正正确的，因为我的类型都拥有navigate方法，所以else实际上是无用的。 但是 TypeScript 很高兴:)。

在映射联合类型 object 时，我已经看到与 typescript 类似的情况。

如果有人有更好的方法，我真的很好奇。