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  }

 

查看更多关于react-navigation with TypeScript的详细内容...