react-native - 在一个项目中使用 2 Drawer Navigator

问题描述

我有 2 个 DrawerNavigators，其中一个（PaymentHistoryDrawer）在 BottomTabNavigator 内。我将它们绑定到两个按钮 - 第一个用于 HamburgerMenu ，第二个用于付款历史记录中的 FilterButton 。

export const DrawerNavigator = () => (
    <Drawer.Navigator drawerContent={(props) => <Sidebar {...props} />}>
        <Drawer.Screen name={SCREEN_ROOT} component={BottomTabNavigator} />
    </Drawer.Navigator>
);

export const DrawerPaymentHistoryNavigator = () => (
    <PaymentHistoryDrawer.Navigator
        drawerContent={PaymentHistorySidebar}
        drawerPosition="right"
        drawerStyle={{
            zIndex: 0,
            width: 300
        }}
        drawerType="front">
        <PaymentHistoryDrawer.Screen
            name={SCREEN_PAYMENT_HISTORY_DRAWER}
            component={HistoryScreen}
            options={{ title: 'My home' }}
        />
    </PaymentHistoryDrawer.Navigator>
);

我对它们进行了不同的初始化，并将它们不同地绑定为汉堡菜单的“抽屉”，过滤器的“PaymentHistoryDrawer”。但是无论如何，当我单击底部选项卡中的汉堡菜单按钮时，同时有调用 PaymentHistoryDrawer 的 FilterButton，PaymentHistory 就会出来。为什么它们彼此相关？如何解开？

//this code is the beginning of the above written code
type DrawerParamList = {
    [SCREEN_ROOT]: undefined;
};

type PaymentHistoryDrawerParamList = {
    [SCREEN_PAYMENT_HISTORY_DRAWER]: undefined;
};
export type RootScreenNavigationProp = DrawerNavigationProp<
    DrawerParamList,
    'SCREEN_ROOT'
>;

export type PaymentHistoryScreenNavigationProp = DrawerNavigationProp<
    PaymentHistoryDrawerParamList,
    'SCREEN_PAYMENT_HISTORY_DRAWER'
>;

const Drawer = createDrawerNavigator<DrawerParamList>();
const PaymentHistoryDrawer =
    createDrawerNavigator<PaymentHistoryDrawerParamList>();

将 ToggleDrawer 绑定到 FilterButton

export const FilterButton = () => {
    const { toggleDrawer } =
        useNavigation<PaymentHistoryScreenNavigationProp>();

    return (
        <FilterContainer onPress={toggleDrawer}>
            <Image source={FilterIcon} />
            <FilterText>Фильтры</FilterText>
        </FilterContainer>
    );
};

将 ToggleDrawer 绑定到 HamburgerMenuButton

const _Menu = () => {
    const { toggleDrawer } = useNavigation<RootScreenNavigationProp>();

    return <Icon onPress={toggleDrawer} />;
};

export const Menu = memo(_Menu);

附加问题：ToggleDrawer 是 UseNavigation 工具。它可以采取任何额外的论点吗？我阅读了 2 次文档，但没有找到任何关于参数或道具的信息。谢谢！

标签： react-nativereact-navigationreact-navigation-drawerreact-navigation-bottom-tab

react-native - 在一个项目中使用 2 Drawer Navigator

问题描述

解决方案

推荐阅读