Использование 2 Drawer Navigator в одном проекте

У меня есть 2 DrawerNavigator, один из них (PaymentHistoryDrawer) находится внутри BottomTabNavigator. Я привязываю их к двум кнопкам - 1-я для HamburgerMenu, 2-я для 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>
);

Я инициализирую их по-разному и привязываю по-разному, как «Ящик для меню гамбургеров», «Ящик истории платежей» для фильтров. Но в любом случае, когда я нажимаю, скажем, кнопку «Гамбургерное меню» на вкладке «Нижняя часть», где одновременно находится кнопка FilterButton, вызывающая PaymentHistoryDrawer, открывается 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 раза документацию, но ничего не нашел ни о аргументах, ни о реквизитах. Спасибо!


person Yerassyl Nurlanov    schedule 18.06.2021    source источник
comment
Следуйте этим инструкциям, чтобы создать свой экран и использовать navigation.dangerouslyGetParent().toggleDrawer() stackoverflow.com/questions/59638040/   -  person Someone Special    schedule 18.06.2021


Ответы (1)


Ответ все еще в секрете ... Надеюсь, ты не пользуешься такими ящиками

person Yerassyl Nurlanov    schedule 23.06.2021