Блог

Я пытаюсь объединить два элемента навигации, но я не уверен, как это сделать. Раньше, когда я определял только один маршрут, я делал что-то вроде этого.

     export type MatrimonyStackRoutes = {
      Matrimony: undefined;
      GroomDetail: undefined;
    };
    
    
    export type MatrimonyStackNavigationProps<
      T extends keyof MatrimonyStackRoutes
    > = {
      navigation: StackNavigationProp<MatrimonyStackRoutes, T>;
      route: RouteProp<MatrimonyStackRoutes, T>;
    };
 <Stack.Navigator>
      <Stack.Screen name="Matrimony" component={MatrimonyTab} />
      <Stack.Screen name="GroomDetail" component={GroomDetail} />
    </Stack.Navigator>
  

И внутри компонента, который я использовал, чтобы объявить так

 const Groom = ({ navigation }: MatrimonyStackNavigationProps<"Matrimony">) => {
  return (
    //////////
  );
};
  

Это работает нормально, но теперь мне нужно объединить два стека маршрутов, а реквизит bottomTab показывает, что я могу использовать в своем компоненте аналогичным образом.
Я не уверен, как это сделать, любая помощь была бы отличной.

Вот мой полный код навигации по вкладкам и стеку, когда он не объединен

     export type MatrimonyTabRoutes = {
      Groom: undefined;
      Bride: undefined;
      Vendors: undefined;
    };
    export type MatrimonyStackRoutes = {
      Matrimony: undefined;
      GroomDetail: undefined;
    };
    
    
    export type MatrimonyStackNavigationProps<
      T extends keyof MatrimonyStackRoutes
    > = {
      navigation: StackNavigationProp<MatrimonyStackRoutes, T>;
      route: RouteProp<MatrimonyStackRoutes, T>;
    };
    export type MatrimonyTabNavigationProps<T extends keyof MatrimonyTabRoutes> = {
      navigation: BottomTabNavigationProp<MatrimonyTabRoutes, T>;
      route: RouteProp<MatrimonyTabRoutes, T>;
    };

const MatrimonyTab = ({}) => {
  const theme = useTheme();
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: theme.colors.primaryText,
        inactiveTintColor: theme.colors.grey,
        indicatorStyle: {
          backgroundColor: theme.colors.mainIconColor,
        },
      }}
    >
      <Tab.Screen name="Groom" component={Groom} />
      <Tab.Screen name="Bride" component={Bride} />
      <Tab.Screen name="Vendors" component={Vendors} />
    </Tab.Navigator>
  );
};

const MatrimonyStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Matrimony" component={MatrimonyTab} />
      <Stack.Screen name="GroomDetail" component={GroomDetail} />
    </Stack.Navigator>
  );
};
  

Ваш компонент по-прежнему получает те же два стандартных реквизита route , navigation но navigation его тип немного отличается, когда вы находитесь внутри как стека, так и навигатора вкладок.

React Navigation включает в себя тип утилиты CompositeNavigationProp , специально предназначенный для объединения navigation типов реквизитов.

Тип CompositeNavigationProp принимает 2 параметра, первый параметр — это основной тип навигации (тип для навигатора, которому принадлежит этот экран, в нашем случае навигатора вкладок, который содержит экран профиля), а второй параметр — это вторичный тип навигации (тип для родительского навигатора). Основной тип навигации всегда должен иметь имя маршрута экрана в качестве второго параметра.

В вашем случае основным навигатором является навигатор вкладок, а вспомогательным — стек. Не требуется устанавливать имя маршрута для дополнительного навигатора, но в вашем случае это всегда "Matrimony" так, поскольку все вкладки находятся на экране супружества.

 export type TabScreenProps<T extends keyof MatrimonyTabRoutes> = {
  // combine the types for navigation
  navigation: CompositeNavigationProp<
    // the navigator which owns this screen comes first
    BottomTabNavigationProp<MatrimonyTabRoutes, T>,
    // the outer navigator comes second
    StackNavigationProp<MatrimonyStackRoutes, "Matrimony">
  >;
  // route props just depend on the inner navigator
  route: BottomTabScreenProps<MatrimonyTabRoutes, T>;
};
  

Мы используем этот тип TabScreenProps для описания реквизитов для трех вкладок: Groom , Bride , и Vendors .

 const Bride = ({ navigation, route }: TabScreenProps<"Bride">) => {
  /* ... */
};
  

Демонстрация Code Sandbox