Открытие SideMenu при нажатии кнопки

В настоящее время я пытаюсь перейти на React-native-navigation V2 с V1 и застрял, пытаясь найти способ переключать боковые меню при нажатии кнопки на верхней панели.

Мое приложение начинается с

Navigation.setRoot({
        root: {
          sideMenu: {
            left: {
              component: {
                name: 'testApp.SideDrawer',
                passProps: {
                  text: 'This is a left side menu screen'
                }
              }
            },
            center: {
              bottomTabs: {
                ...
              }
            },
          },
        },

      });

Есть ли способ сделать это в текущей версии?


react-native-navigation react-native-navigation-v2
person Dmitry Oleinik    schedule 30.06.2018    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Выяснилось, что вы не можете использовать this.props.navigator.toggleDrawer в V2 и вместо этого должны использовать Navigator.mergeOptions, чтобы изменить видимость ящика. В моем случае:

1) Сначала назначьте идентификатор ящику (id: leftSideDrawer)

Navigation.setRoot({
            root: {
              sideMenu: {
                left: {
                  component: {
                    name: 'testApp.SideDrawer',
                    id: 'leftSideDrawer'
                  }
                },
                center: {
                  bottomTabs: {
                    ...
                  }
                },
              },
            },
          });

2) Используйте его, чтобы изменить видимость ящика

Navigation.mergeOptions('leftSideDrawer', {
      sideMenu: {
        left: {
          visible: true
        }
      }
});
person Dmitry Oleinik    schedule 02.07.2018
comment
как его закрыть? как проверить, виден ли он уже и сделать его невидимым? - person Zorox; 17.10.2018
comment
@Zorox, вы пытались изменить видимость обратно на ложь? В моем приложении я закрываю боковой ящик, проводя пальцем влево. - person Dmitry Oleinik; 18.10.2018
comment
@Zorox Я борюсь с тем же. Кнопка Burger должна сначала открыть его, а при втором нажатии снова закрыть. Надеялся на какое-то состояние, из которого мы могли бы читать ... вы нашли хорошее решение для этого? - person Philipp Kyeck; 07.11.2018

arrow_upward
2
arrow_downward

Вы можете установить логическое значение в своем компоненте, чтобы определить текущее состояние экрана бокового ящика, а затем вы можете использовать это логическое значение, чтобы установить видимость ящика с помощью mergeOptions. В основном переключаться! Ниже приведен фрагмент для достижения этой цели.

constructor(props) {
   super(props);
   this.isSideDrawerVisible = false; 
   Navigation.events().bindComponent(this);
}

navigationButtonPressed({ buttonId }) {
   if (buttonId === "openSideDrawer") {
   (!this.isSideDrawerVisible) ? this.isSideDrawerVisible = true : this.isSideDrawerVisible = false
   Navigation.mergeOptions(this.props.componentId, {
    sideMenu: {
      left: {
        visible: this.isSideDrawerVisible,
      }
    }
  });
 }
}
person codvlpr    schedule 08.11.2018
comment
IT работает только при нажатии на кнопку переключения, но вне ее не работает. - person Harleen Kaur Arora; 25.02.2019
comment
Чтобы немного уточнить ответ @HarleenKaurArora. Помимо DRYness, небольшая проблема с сохранением состояния sideMenu в компоненте заключается в том, что если sideMenu открывается или закрывается событиями за пределами какого-либо явного прослушивания в компоненте, то локальное состояние выходит из синхронизации с тем, что отображается РНН. Например; когда sideMenu открывается, то закрытие его с помощью кнопки (неправильно) требует двух нажатий. В то время как если он был закрыт прикосновением к области sideMenu, то последующее повторное открытие (некорректно) требует двух касаний. - person shufflingb; 06.03.2019