从React Navigation 5中的按钮打开两个抽屉之一

Question

以前在React Navigation v5之前，可以使用getCustomActionCreators通过按钮打开特定的抽屉。

一个这样做的例子在这里：React Native two drawers on one screen

但是，似乎该功能已被删除。在React Navigation 5中有没有办法做到这一点？

Answer 1

这可以通过创建自定义路由器来实现。

以下是一些重要的见解：

• 导航员冒出了他们无法处理的动作。这意味着我们需要为每个抽屉创建一个自定义动作。
• 为了创建自定义动作，我们需要创建自定义路由器。
• 为了使用自定义路由器，我们需要构建一个新的导航器。

自定义操作：

export const openMenuDrawerAction = { type: 'OPEN_MENU_DRAWER' };

帮助程序功能，以分派自定义操作（可选）

export const openMenuDrawer = navigation => {
    navigation.dispatch(openMenuDrawerAction);
};

自定义路由器

const MenuDrawerRouter = options => {
    const router = DrawerRouter(options);

    const oldGetStateForAction = router.getStateForAction;

    return {
        ...router,
        getStateForAction: (state, action, options) => {
            switch (action.type) {
                case 'OPEN_MENU_DRAWER':
                    return oldGetStateForAction(state, DrawerActions.openDrawer(), options);
                default:
                    return oldGetStateForAction(state, action, options);
            }
        }
    };
};

自定义导航器>>

这是基于createDrawerNavigator中的代码。

const createDrawerNavigatorWithRouter = router => {
    // eslint-disable-next-line react/prop-types
    function DrawerNavigator({ initialRouteName, openByDefault, backBehavior, children, screenOptions, ...rest }) {
        const { state, descriptors, navigation } = useNavigationBuilder(router, {
            initialRouteName,
            openByDefault,
            backBehavior,
            children,
            screenOptions
        });

        return <DrawerView {...rest} state={state} descriptors={descriptors} navigation={navigation} />;
    }

    return createNavigatorFactory(DrawerNavigator)();
};
创建导航器实例

现在，我们不用const Drawer = createDrawerNavigator()创建导航器，而是用const Drawer = createDrawerNavigatorWithRouter(MenuDrawerRouter)创建导航器。

重复

上述步骤将创建一个抽屉。现在，您将上述内容（具有不同的动作名称）复制到第二个抽屉中。 createDrawerNavigatorWithRouter可以重复使用而无需重复，因为它是抽屉式导航器的通用属性。