如何使用 react-navigation 更改抽屉位置 [英] How to Change Drawer Position by using react-navigation

问题描述

我正在使用 react navigation 3.9.1.我想根据条件从右侧或左侧打开抽屉.

I'm using react navigation 3.9.1 .I want to open drawer from right or from left based on condition.

如果我尝试了以下条件但它不起作用drawerPosition : isArabic ?'右左'随着路线被加载，它不会改变 isArabic 的值，所以抽屉位置不会改变，因为我想改变抽屉的位置.

if i have tried following condition but it doesn't work drawerPosition : isArabic ? 'right' : 'left' as routes is get loaded it does not get changed value of isArabic so the drawer position is not changing as i want to change the position of drawer.

推荐答案

似乎没有动态改变抽屉位置的官方"方式.尽管如此，该功能仍对公关开放https://react-navigation.canny.io/feature-requests/p/动态抽屉位置

Seems there's no 'official' way of changing the drawer position dynamically. Still, the feature was left open for PR https://react-navigation.canny.io/feature-requests/p/dynamic-drawerposition

与此同时，解决方法是在应用程序中创建两个抽屉导航器，如果语言是阿拉伯语，您可以打开正确的抽屉，反之亦然.

Meanwhile, the workaround will be creating two drawer navigators in the app and you can open the right drawer if the language is Arabic and vice-versa.

参考:https://github.com/react-navigation/react-navigation/issues/780#issuecomment-370635948

基本的代码结构是这样的.

The basic code structure would go like this.

import RightSideMenu from '~/RightSideMenu';
import LeftSideMenu from '~/LeftSideMenu';
import { .. } '~/screens'

const MainStack = StackNavigator(
  {

    Main: {
      screen: Main,
      navigationOptions: { header: null },
    },
    Screen1: {
      screen:  Screen1,
      navigationOptions: { header: null },
    },
  },
  {
    initialRouteName: 'Main',
    navigationOptions: {
      gesturesEnabled: false,
      headerStyle: {
        backgroundColor: '#fff',
        elevation: 0,
        shadowOpacity: 0,
      },
    },
  },
);

const MainDrawer = DrawerNavigator(
  {
    MainStack,
  },
  {
    initialRouteName: 'MainStack',
    drawerWidth: Dimensions.get('window').width,
    drawerPosition: 'left',
    contentComponent: props => <LeftSideMenu {...props} />,
    drawerOpenRoute: 'LeftSideMenu',
    drawerCloseRoute: 'LeftSideMenuClose',
    drawerToggleRoute: 'LeftSideMenuToggle',
  },
);

const RootRoute = DrawerNavigator(
  {
    MainDrawer: {
      screen: MainDrawer,
    },
  },
  {
    navigationOptions: {
    },
    drawerPosition: 'right',
    drawerWidth: Dimensions.get('window').width,
    contentComponent: props => <RightSideMenu {...props} />,
    drawerOpenRoute: 'RightSideMenu',
    drawerCloseRoute: 'RightSideMenuClose',
    drawerToggleRoute: 'RightSideMenuToggle',
  },
);

export default AppRoute;

通过这些选项，您可以控制打开哪个抽屉.

With these options, you can control which drawer to open.

drawerOpenRoute: 'LeftSideMenu',
drawerCloseRoute: 'LeftSideMenuClose',
drawerToggleRoute: 'LeftSideMenuToggle',

说...

'isArabic' ?this.props.navigation.navigate('RightSideMenuToggle') : this.props.navigation.navigate('LeftSideMenuToggle')

希望对你有帮助.

这篇关于如何使用 react-navigation 更改抽屉位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！