react-navigation with TypeScript

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

为了对路由名和参数进行类型检查，首先要创建带有路由名到其参数的映射的对象类型

index.js

1 export type stackParamsList={
2     BottomTab:{
3         screen?:string
4     };
5     Detail:{
6         id:number
7     };
8 }

 1 export type navigationProp=StackNavigationProp<stackParamsList> 导出

这将为Navigator和Screen组件提供类型检查和intelliSense。

 1 const Stack=createStackNavigator<stackParamsList>() 

注释 navigation prop

1 import  { navigationProp } from '@/navigator/index'
2 interface Iprops{
3     navigation:navigationProp
4 }

注释route prop

1 import { RouteProp } from '@react-navigation/native';
2 import {stackParamsList} from '@/navigator/index'
3 type  routeProp=RouteProp<stackParamsList,'Detail'>
4 interface Iprops{
5     route:routeProp
6 }