react-navigation with TypeScript

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

為了對路由名和參數進行類型檢查，首先要創建帶有路由名到其參數的映射的對象類型

index.js

export type stackParamsList={
    BottomTab:{
        screen?:string
    };
    Detail:{
        id:number
    };
}

 export type navigationProp=StackNavigationProp<stackParamsList> 導出

這將為Navigator和Screen組件提供類型檢查和intelliSense。

 const Stack=createStackNavigator<stackParamsList>() 

注釋 navigation prop

import  { navigationProp } from '@/navigator/index'
interface Iprops{
    navigation:navigationProp
}

注釋route prop

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