【问题标题】：How to Union Type react navigation prop?如何联合类型反应导航道具？
【发布时间】：2022-01-24 23:17:52
【问题描述】：

联合类型反应导航道具？

大家好，

我在 react native 上使用带有 react-navigation 模块的 typescript，我正在尝试键入一个子组件 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 }); 这一行出现打字稿错误：

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 错误，我的应用程序按预期工作。

【问题讨论】：

标签： reactjs typescript react-native react-navigation

【解决方案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 很高兴 :)。

在映射联合类型对象时，我已经看到使用 typescript 的类似情况。

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

【讨论】：