У меня есть 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 раза документацию, но ничего не нашел ни о аргументах, ни о реквизитах. Спасибо!
navigation.dangerouslyGetParent().toggleDrawer()
stackoverflow.com/questions/59638040/ - person Someone Special   schedule 18.06.2021