重复页面的 React Native Typescript 上的导航结构答案

【问题标题】：Navigation Structure on React Native Typescript for Duplicate Page重复页面的 React Native Typescript 上的导航结构
【发布时间】：2020-12-26 22:40:27
【问题描述】：

我的 app.tsx 文件中有以下导航结构：

const HomeStack = createStackNavigator<HomeStackParamList>()

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name='Home'
        component={NasaImageList}
        options={{ title: 'NASA Image Search' }}
      />
      <HomeStack.Screen
        name='Details'
        component={NasaImageDetails}
        options={({ route }) => ({ title: route.params.title })}
      />
    </HomeStack.Navigator>
  )
}

const FavouriteStack = createStackNavigator<FavouriteStackParamList>()

function FavouriteStackScreen() {
  return (
    <FavouriteStack.Navigator>
      <FavouriteStack.Screen
        name="Favourites"
        component={NasaImageFavouriteList} />
      <FavouriteStack.Screen
        name="Details"
        component={NasaImageDetails}
        options={({ route }) => ({ title: route.params.title })}} />
    </FavouriteStack.Navigator>
  )
}

const Tab = createBottomTabNavigator()

export default class App extends Component {
  render() {
    return (
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen
            name="Home"
            component={HomeStackScreen}
          />
          <Tab.Screen
            name="Favourites"
            component={FavouriteStackScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    )
  }

路由参数在 HomeStackParamList 和 FavouriteStackParamList 类型中定义，如下所述。目前它们是相同的，但它们可能会发生变化，因此需要将它们分开。

export type HomeStackParamList = {
  Home: undefined
  Details: {
    nasaId: string
    title: string
  }
}

export type FavouriteStackParamList = {
  Favourites: undefined
  Details: {
    nasaId: string
    title: string
  }
}

传递到我的 NasaImageDetails 组件中的导航道具类型构成屏幕组件“详细信息”定义如下：

export type NasaImageDetailsHomeNavigationProp = StackNavigationProp<
HomeStackParamList,
  'Details'
>

export type NasaImageDetailsFavouriteNavigationProp = StackNavigationProp<
FavouriteStackParamList,
  'Details'
>

我最终从两个参数列表中得到了两种导航道具类型，这并不理想。在反应原生打字稿中这种情况的最佳实践是什么？

【问题讨论】：

标签： typescript react-native react-navigation

【解决方案1】：

没有找到解决这个问题的方法，所以只使用了：

export type NasaImageDetailsHomeNavigationProp = StackNavigationProp<
HomeStackParamList,
  'Details'
> | StackNavigationProp<
FavouriteStackParamList,
  'Details'
>

【讨论】：