如何在 React Navigation 堆栈中定义路由类型？

Question

我需要在堆栈中定义路由类型（而不是在组件中），我知道您可以在组件本身中使用 RouteProp 来做到这一点，但我只是不知道如何在堆栈上应用它。

<Stack.Screen
    name="MarketAssetDetailsPage"
    options={({ route }) =>
      HeaderWithBackTitle({
        title: `${route.params.routeName} Market Details`,
        bgColor: route.params.data.assetColor,
        textColor: 'white',
      })
    }
    component={MarketAssetDetailsPage}
  />

这里我有一个屏幕接收 routeName 和一个数据。 Eslint 和 typescript 在这里抱怨，如何在这里定义类型？谢谢。

Answer 1

你应该为道具创建一个类型。

export type StackParamList = {
  MarketAssetDetailsPage: {
    routeName: string,
    data: any // Change to be the type of data.
  }
}

在你的组件内部你可以做这样的事情

import { StackNavigationProp } from '@react-navigation/stack';

type NavigationProps = StackNavigationProp<StackParamList, 'MarketAssetDetailsPage'>;

interface Props {
  navigation: NavigationProps
}

const MarketAssetDetailsPage = ({ navigation }: Props) => {

}

React Navigation 网站上有一个很好的 TypeScript 支持指南 - https://reactnavigation.org/docs/typescript/