问题
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