react-navigation v5 中的 Typescript StackNavigatonProps 和 Screen props

Question

为屏幕的 navigation 定义类型的最佳方法是什么？ Prop ，当屏幕在路由器的不同文件中时？假设我有一个文件，我在其中定义了路由:

//Router.tsx

type RootStackParamList = {
  Home: undefined;
  Profile: undefined;
}

const Stack = createStackNavigator<RootStackParamList>();

// Component rendering navigator
const Router = () => {
   .
   .
   .
}

然后我有单独的屏幕文件:

// Home.tsx


// here has to be the same RootStackParamList
// that we've already defined in Router.tsx
type = HomeScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  "Home"
>;

type Props: {
  navigation: HomeScreenNavigationProp
}


const Home = ({navigation}: Props) => {
  .
  .
  .
}

我要复制吗 RootStackParamList一遍又一遍地播放到每个屏幕或创建类似 types.ts 的内容文件并从那里导入？有没有更好的处理方法？我正在使用 navigation几乎在每个组件中。

Answer 1

你可以试试这个:

type RootStackComponent<RouteName extends keyof RootStackParamList> = React.FC<
  navigation: StackNavigationProp<RootStackParamList, RouteName>,
  route: RouteProp<RootStackParamList, RouteName>
>

const Home: RootStackComponent<'Home'> = ({ navigation, route }) => {}