Question

我开始在我的React Native项目（打字稿新手）中使用打字稿，并在打字稿的功能组件中遇到了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

您需要做类似的事情

interface Props {
 authType: string;
}

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

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

Answer 2

我最终这样做了

type Params = {
  routeName: string;
};

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

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

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

反应导航：如何通过打字稿

2 个答案: