反应导航：如何在打字稿中使用 NavigationStackScreenComponent 类型传递 redux 道具

Question

我开始在我的 react native 项目（typescript 新手）中使用 typescript，并在使用 typescript 的功能组件中遇到了 navigationOptions 问题，感谢这篇文章 here 我解决了这个问题，但是当我尝试传递 redux 道具时它告诉我

Property 'authType' does not exist on type 'PropsWithChildren<NavigationStackScreenProps<Params, Props>>

这是我的代码

interface Props {
 authType: string;
}

interface Params {
 routeName: string;
}

const Customer: NavigationStackScreenComponent<Params, Props> = ({
 navigation,
 authType,
 }) => {
 .... Component
 }

 Customer.navigationOptions = ({ navigation }) => ({
   title: navigation.getParam('routeName'),
 });

我认为这意味着我正在传递的道具没有被读取，尽管我正在传递它。

我使用 NavigationStackScreenComponent 是为了能够使用

Customer.navigationOptions etc

否则它会告诉我

ts] Property 'navigationOptions' does not exist

我真的开始爱上打字稿了，知道如何使用 authType Props 而不会让我尖叫吗？

Answer 1

我最终这样做了

type Params = {
  routeName: string;
};

type Props = {
  authType?: string;
  navigation: NavigationStackProp;
};

const Customer: NavigationStackScreenComponent<Params> = ({
  authType,
  navigation,
}: Props) => {

我只是将传递道具设为可选。

Answer 2

你需要做类似的事情

interface Props {
 authType: string;
}

type CustomerType = React.ComponentType<Props & NavigationStackScreenProps> & { navigationOptions: NavigationStackOptions | ((props: NavigationStackScreenProps) => NavigationStackOptions) }

const Customer: CustomerType = ({
 navigation,
 authType,
}) => {
 .... Component
}