Как изменить положение ящика с помощью реагирования

Question

Я использую реагирующую навигацию 3.9.1. Я хочу открыть ящик справа или слева в зависимости от условия.

если я пробовал выполнить следующее условие, но оно не работает ящикПоложение: арабский? 'правый левый' при загрузке маршрутов значение isArabic не изменяется, поэтому положение ящика не меняется, так как я хочу изменить положение ящика.

Answer 1

Кажется, что нет никакого «официального» способа динамического изменения положения ящика. Тем не менее, функция была оставлена ​​открытой для пиара https://react -navigation.canny.io / функция-запросов / р / динамическая drawerposition

Между тем, в качестве обходного пути можно создать в приложении два навигатора ящиков, и вы можете открыть нужный ящик, если арабский язык, и наоборот.

Ссылка: https://github.com/react-navigation/react-navigation/issues/780#issuecomment-370635948

Базовая структура кода будет выглядеть следующим образом.

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;

С помощью этих опций вы можете контролировать, какой ящик открывать.

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

Say ...

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

Надеюсь, это поможет вам.