Как определить вложенную навигационную поддержку react-native v5?

#typescript #react-navigation-v5

#typescript #react-navigation-v5

Вопрос:

Я пытаюсь определить типы react-навигации (реквизит навигации и маршрута), чтобы упростить автоматическое заполнение VS-кода.

Приложение (стек)> Главная (нижняя вкладка)> [Главная страница (стек) {Сообщение}, профиль (стек) {Пользовательский профиль}] В этом состоянии вложенной навигации я хочу перейти от Post (Home) к UserProfile (Profile).

Вот мой список параметров стека и нижней вкладки.

 /* App Navigation Types */
export type AppStackParamList = {
  Landing: undefined;
  Main: undefined;
};

/* Main Navigation Types */
export type MainTabParamList = {
  Home: undefined;
  Crypto: undefined;
  Posting: undefined;
  Chat: undefined;
  Profile: undefined;
};

/* Home Navigation Type */
export type HomeStackParamList = {
  Post: { id: string } | undefined;
  CategoryFilter: undefined;
  Feed: undefined;
  Search: undefined;
  SetLocation: undefined;
};

/* Profile Navigation Type */
export type ProfileStackParamList = {
  EditProfile: undefined;
  MyPage: undefined;
  UserProfile: { id: string } | undefined;
};
 

И это типы навигационных реквизитов для каждого экрана

 export type PostNavProp = CompositeNavigationProp<
  StackNavigationProp<HomeStackParamList, 'Post'>,
  BottomTabNavigationProp<MainTabParamList>
>;

export type UserProfileNavProp = CompositeNavigationProp<
  StackNavigationProp<ProfileStackParamList, 'UserProfile'>,
  BottomTabNavigationProp<MainTabParamList>
>;
 

С этим определением типа navigation.navigate('Profile') работает. но начальный экранный маршрут профиля не является «UserProfile».
Когда я пытаюсь получить доступ к UserProfile со 2-м параметром функции navigate (), как будто navigation.navigate('Profile', {screen:'UserProfile'}) он говорит об ошибке..

работает только 1-й параметр
сообщение об ошибке

Могу ли я получить несколько советов по этой проблеме? Мне немедленно нужна помощь.. Пожалуйста..

Ответ №1:

Ваша настройка кажется правильной. Похоже, что существует известная ошибка типа, когда дело доходит до вложенных навигаторов с react-navigation:

https://github.com/react-navigation/react-navigation/issues/6931