如何在 reactnavigation typescript react native 中结合标签和堆栈导航道具 [英] How to combine tab and stack navigation props in reactnavigation typescript react native

问题描述

我正在尝试组合两个导航道具但我不知道如何做到这一点.早些时候，当我只定义一条路线时，我经常做这样的事情.

I am trying to combine two navigation props But I am not sure how to do this. Earlier when I used to define only one route I used to do something like this.

    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>

我曾经这样声明的内部组件

And Inside component I used to declare like this

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

这很好用，但现在我需要组合两个路由堆栈和 bottomTab 道具显示我可以以类似的方式在我的组件中使用.我不知道该怎么做，任何帮助都会很棒.

This works fine But Now I am in need to combine two routes stack and bottomTab props show that I can use in my component in similar way. I am not sure how to do that any help would be great.

这是我的 Tab 和堆栈导航未组合时的完整代码

Here Is my Complete Code of both Tab And stack navigation when it is not combined

    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>
  );
};

推荐答案

你的组件仍然接收相同的两个标准 props route 和 navigation 但navigation<当您同时位于堆栈和选项卡导航器中时，/code> 类型会有所不同.

Your component still receives the same two standard props route and navigation but the navigation type is a little bit different when you are inside of both a stack and a tab navigator.

React Navigation 包括一个实用程序类型 CompositeNavigationProp 专门用于合并 navigation 道具类型.

React Navigation includes a utility type CompositeNavigationProp specifically for the purpose of merging the navigation prop types.

CompositeNavigationProp 类型有 2 个参数，第一个参数是主要导航类型(拥有此屏幕的导航器的类型，在我们的例子中是包含配置文件屏幕的选项卡导航器)，第二个参数是辅助导航类型(类型为父导航器).主要导航类型应始终将屏幕的路线名称作为第二个参数.

The CompositeNavigationProp type takes 2 parameters, first parameter is the primary navigation type (type for the navigator that owns this screen, in our case the tab navigator which contains the Profile screen) and second parameter is the secondary navigation type (type for a parent navigator). The primary navigation type should always have the screen's route name as it's second parameter.

在您的情况下，主导航器是选项卡导航器，辅助导航器是堆栈.不需要为辅助导航器设置路线名称，但在您的情况下，它始终是 Matrimony"，因为所有选项卡都在 Matrimony 屏幕上.

In your case, the primary navigator is the tab navigator and the secondary navigator is the stack. It is not required to set the route name for the secondary navigator, but in your case it is always "Matrimony" since all of the tabs are on the Matrimony screen.

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.

We use this type TabScreenProps to describe the props for the three tabs: Groom, Bride, and Vendors.

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

代码沙盒演示

这篇关于如何在 reactnavigation typescript react native 中结合标签和堆栈导航道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！