Typescript StackNavigatonProps и Screen props в реакции-навигации v5

Question

Каков наилучший способ определения типа для экрана navigation prop, когда screen находится в другом файле этого маршрутизатора? Допустим, у меня есть один файл, в котором я определяю маршруты:

//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 }) => {}