How to combine tab and stack navigation props in reactnavigation typescript react native

别来无恙 提交于 2021-01-29 10:03:51

问题


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

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.

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

来源:https://stackoverflow.com/questions/64156569/how-to-combine-tab-and-stack-navigation-props-in-reactnavigation-typescript-reac

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!