在一个屏幕上 React Native 两个抽屉

Question

我有一个应用程序需要能够使用两个抽屉导航器，一个在标题的左侧，一个在右侧。

我现在可以通过滑动手势打开两个抽屉，但是我需要能够以编程方式打开它。我发现navigation.openDrawer() 函数只适用于其中一个抽屉，而不适用于另一个，因为它只能使用我的抽屉导航器中的一个导航道具（以先到者为准）。

以下是我的渲染函数：

const LeftStack = createStackNavigator(
  {
    LeftDrawerStack
  },
  {
    navigationOptions: ({navigation}) => ({
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <Icon style={{marginLeft: 10}} name='menu'/>
        </TouchableOpacity>
      )
    })
  }
);

const RightStack = createStackNavigator(
  {
    RightDrawerStack
  },
  {
    navigationOptions: ({navigation}) => ({
      headerRight: (
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <Icon style={{marginRight: 10}} name='ios-bulb'/>
        </TouchableOpacity>
      )
    })
  }
);

export const RouteStack = createStackNavigator(
  {
    screen: LoginScreen,
    navigationOptions: ({navigation}) => ({
      header: null
    }),
    LeftStack,
    RightStack
  }
);

这是我的抽屉路线：

export const LeftDrawerStack = createDrawerNavigator(
  {
    Dashboard: {
      screen: DashboardScreen
    },
    History: {
      screen: HistoryScreen
    },
    Privacy: {
      screen: PrivacyPolicyScreen
    },
    TermsAndConditions: {
      screen: TermsAndConditionsScreen
    }
  }, {
    initialRouteName: 'Dashboard',
    contentComponent: LeftDrawerScreen
  }
);

export const RightDrawerStack = createDrawerNavigator(
  {
    LeftDrawerStack,
    Settings: {
      screen: SettingsScreen
    }
  }, {
    drawerPosition: 'right',
    contentComponent: RightDrawerScreen
  }
);

这是我目前的导航图，但是两个汉堡菜单都在右侧打开同一个菜单，而不是在各自的两侧打开一个菜单。

我可能遗漏了一些部分，但如果我忘记了，我一定会发布更多信息！

Answer 1

我能够通过以下设置做到这一点（尝试将您的结构更改为这样）：

const LeftDrawer = createDrawerNavigator(
{
    LeftDrawer: MyStackNavigator,
},
    {
        getCustomActionCreators: (route, stateKey) => { return { toggleLeftDrawer: () => DrawerActions.toggleDrawer({ key: stateKey }) }; },
        drawerPosition: 'left',
        contentComponent: MyLeftDrawer
    }
);

const RightDrawer = createDrawerNavigator(
{
    Drawer: LeftDrawer,
},
    {
        getCustomActionCreators: (route, stateKey) => { return { toggleRightDrawer: () => DrawerActions.toggleDrawer({ key: stateKey }) }; },
        drawerPosition: 'right',
        contentComponent: MyRightDrawer
    }
);

export const RootNavigator = createStackNavigator(
{
    Login: Login,
    Home: RightDrawer
},
    {
        initialRouteName: 'Login',
        navigationOptions: { header: null, gesturesEnabled: false }
    }
);

关键是getCustomActionCreators。它允许您从MyStackNavigator 中的任何屏幕调用该函数，如下所示：this.props.navigation.toggleLeftDrawer();。

Answer 2

这是我的解决方案

第 1 步：创建两个抽屉式导航并将它们嵌套在一起

第 2 步：将第一个抽屉导航存储在其他位置（单例）

// Drawer 1
import ContentLeftMenu from '@components/ContentLeftMenu';
import { createDrawerNavigator } from '@react-navigation/drawer';
import * as React from 'react';
import DrawerCart from './DrawerCart';
import { setNavigationDrawerHome } from './RootNavigation';
import { isTablet } from 'react-native-device-info';
import MainStack from './MainStack';

const Drawer = createDrawerNavigator();

export default function DrawerHome() {
  return (
    <Drawer.Navigator
      initialRouteName="DrawerCart"
      drawerContent={() => <ContentLeftMenu />}
      screenOptions={({ navigation, route }) => {
        setNavigationDrawerHome(navigation)
      }}
    >
      <Drawer.Screen name="DrawerCart" component={isTablet ? DrawerCart : MainStack} />
    </Drawer.Navigator>
  );
}

// Drawer 2
import CartScreen from '@features/cart/CartScreen';
import { createDrawerNavigator } from '@react-navigation/drawer';
import * as React from 'react';
import MainStack from './MainStack';

const Drawer = createDrawerNavigator();

export default function DrawerCart(props) {
  return (
    <Drawer.Navigator
      initialRouteName="MainStackCart"
      drawerContent={() => <CartScreen />}
      drawerPosition='right'
    >
      <Drawer.Screen name="MainStackCart" component={MainStack} />
    </Drawer.Navigator>
  );
}

// set navigation of drawer 1 with navigationDrawerHome
let navigationDrawerHome = null

export const setNavigationDrawerHome = (navigation) => {
  navigationDrawerHome = navigation
}

export const getNavigationDrawerHome = () => {
  return navigationDrawerHome
}

当我在 Mainstack 中使用时，我在左侧打开抽屉 1 时使用 navigationDrawerHome，而抽屉 2 只使用导航道具

const Stack = createStackNavigator();

function MainStack() {
  const navigationDrawerHome = getNavigationDrawerHome()
  return (
    <Stack.Navigator
      screenOptions={({ navigation, route }) => ({
        headerLeft: () => <HeaderLeft />,
        headerTitleAlign: 'center',
      })}>
      <Stack.Screen
        name="home_user_tab"
        component={HomeUserTabs}
        options={({ navigation, route }) => ({
          headerLeft: () => {
            return (
              <ButtonIcon
                onPress={() => navigationDrawerHome.openDrawer()}
                style={styles.buttonLeft}
                icon={images.ic_left_menu}
              />
            )
          },
          headerTitle: () => <LogoHeader />,
          headerRight: () => (<HeaderCardSearch
            navigation={navigation}
          />),
          // header: null
        })}
      />
    </Stack.Navigator>
  );
}

const HeaderCardSearch = (props) => {
  const { navigation } = props;
  return (
    <View style={styles.headerRight}>
      <ButtonIcon
        onPress={() => navigation.openDrawer()}
        style={styles.buttonCart}
        icon={images.ic_cart}
      />
      <ButtonIcon
        onPress={() => navigate('search')}
        style={styles.buttonSearch}
        icon={images.ic_search}
      />
    </View>
  )
};

Answer 3

我设法以这种方式以编程方式打开两个抽屉：

// Opens left drawer
this.props.navigation.openDrawer();

// Opens right drawer
this.props.navigation.dangerouslyGetParent().dangerouslyGetParent().openDrawer();

我的导航容器看起来像这样：

static container = (): NavigationContainer => createDrawerNavigator({
    right: createDrawerNavigator({
        left: DeviceControlContainer
    }, {
        contentComponent: HistoryDrawerContainer,
        overlayColor: drawerOverlayColor()
    })
}, {
    drawerPosition: 'right',
    overlayColor: drawerOverlayColor(),
    navigationOptions: DeviceControlScreen.navigationOptions,
    contentComponent: DeviceControlDrawer
});

Answer 4

从 Anh Devit 解决方案中获得灵感，这是我的。我在没有 Stack Navigator 的情况下在整个应用程序中使用标题栏，所以不得不走一条稍微不同的路线。

对于我的RootNavigator，我将标题放在我的第一个抽屉上方。我使用useState，所以当我将导航对象作为道具传递时，AppHeader 可以在抽屉初始化后正确重新渲染。

import React, { useState } from "react";
import { NavigationContainer } from "@react-navigation/native";

import LeftDrawer from "./LeftDrawer";
import AppHeader from "./AppHeader";

const RootNavigator = () => {
  const [navigationLeftDrawer, setNavigationLeftDrawer] = useState(null);
  const [navigationRightDrawer, setNavigationRightDrawer] = useState(null);

  return (
    <NavigationContainer>
      <AppHeader
        navigationLeftDrawer={navigationLeftDrawer}
        navigationRightDrawer={navigationRightDrawer}
      />
      <LeftDrawer
        navigationLeftDrawer={(navigation) =>
          setNavigationLeftDrawer(navigation)
        }
        navigationRightDrawer={(navigation) =>
          setNavigationRightDrawer(navigation)
        }
      />
    </NavigationContainer>
  );
};

export default RootNavigator;

我在这里创建我的LeftDrawer，RightDrawer 将嵌套在其中。注意在抽屉初始化时设置navigationLeftDrawer。此外，navigationRightDrawer必须作为参数而不是道具传递。

import React, { useContext } from "react";
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItem,
} from "@react-navigation/drawer";

import RightDrawer from "./RightDrawer";

const LeftDrawer = ({ navigationLeftDrawer, navigationRightDrawer }) => {
  const Drawer = createDrawerNavigator();

  return (
    <Drawer.Navigator
      screenOptions={({ navigation }) => {
        navigationLeftDrawer(navigation);
      }}
      drawerContent={(props) => {
        const { navigate } = props.navigation;
        return (<RightDrawerItems />)
        );
      }}
    >
      <Drawer.Screen
        name="AccountDrawer"
        component={RightDrawer}
        initialParams={{ navigationRightDrawer }}
      />
    </Drawer.Navigator>
  );

export default LeftDrawer;

同样在RightDrawer 中，将navigationRightDrawer 传递给正确的导航对象。

import React from "react";

const RightDrawer = ({ route }) => {
  const Drawer = createDrawerNavigator();
  const { navigationRightDrawer } = route.params;

  return (
    <Drawer.Navigator
      drawerPosition="right"
      screenOptions={({ navigation }) => {
        navigationRightDrawer(navigation);
      }}
      drawerContent={(props) => {
        const { navigate } = props.navigation;
        return ( <RightDrawerItems />);
      }}
    >
      {userAuth ? (
        <>
          <Drawer.Screen name={routes.dashboard} component={DashboardScreen} />
        </>
      ) : (
        <Drawer.Screen name={routes.home} component={HomeStack} />
      )}
      <Drawer.Screen name={routes.about} component={AboutScreen} />
      <Drawer.Screen name={routes.language} component={LanguageScreen} />
    </Drawer.Navigator>
  );
};

export default RightDrawer;

最后，AppHeader：

import React, { useContext } from "react";

const AppHeader = ({ navigationRightDrawer, navigationLeftDrawer }) => {

  if (navigationRightDrawer == null || navigationLeftDrawer == null)
    return null;

  return (
    <View style={styles.container}>
      <Icon
        name="menu"
        color={colors.white}
        onPress={() => {
          navigationRightDrawer.closeDrawer();
          navigationLeftDrawer.toggleDrawer();
        }}
      />
      {userAuth ? (
        <TouchableWithoutFeedback
          onPress={() => {
            navigationLeftDrawer.closeDrawer();
            navigationRightDrawer.toggleDrawer();
          }}
        >
          <Image
            style={styles.image}
            source={{ uri: userProfile.profilePicture }}
          />
        </TouchableWithoutFeedback>
      ) : (
        <Icon
          name="person"
          color={colors.secondary}
          onPress={() => navigationLeftDrawer.navigate(routes.login)}
        />
      )}
    </View>
  );
};

export default AppHeader;