react navigation: hur man skickar redux-propps med NavigationStackScreenComponent-typ i typescript

Jag började använda TypeScript i mitt React Native-projekt (TypeScript-nybörjare) och stötte på ett problem med navigationOptions i en funktionell komponent med TypeScript, jag löste det tack vare detta inlägg här, men när jag försöker skicka Redux-props säger det till mig

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

det här är min kod

interface Props {
 authType: string;
}

interface Params {
 routeName: string;
}

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

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

Jag tror att detta betyder att den prop jag skickar inte läses även om jag skickar den.

Jag använde NavigationStackScreenComponent för att kunna använda

Customer.navigationOptions etc

annars kommer det att säga mig

ts] Property 'navigationOptions' does not exist

Jag börjar verkligen älska TypeScript. Har du någon idé om hur man använder authType Props utan att det skriker åt mig?

Svar #1

Du behöver göra något som

interface Props {
 authType: string;
}

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

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

Svar #2

Jag slutade med att göra detta

type Params = {
  routeName: string;
};

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

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

Jag gjorde precis de passerande egenskaperna valfria.