Блог

Главная - Вопросы по программированию - Где вызвать addListener в react native

Где вызвать addListener в react native

#javascript #react-native #navigation-drawer #react-navigation-drawer

#javascript #реагировать-родной #навигационный ящик #реагирует-навигация-ящик #react-native #панель навигации #react-навигация-ящик

Вопрос:

Мы работаем над проектом React Native. В этом случае мы показываем панель вкладок, а также боковую панель. Итак, для этой боковой панели мы добавили библиотеку react-navigation. Но в Android, если пользователь нажимает на кнопку «Назад» на этом устройстве, если ящик открывается, мы должны закрыть его.

Итак, мы добавляем addListener в componentDidMount() и удаляем его в componentWillUnmount() .

Но проблема в том, что если я переключусь на другую вкладку и вернусь к предыдущей вкладке, И если мы нажмем на кнопку возврата устройства, обработчик кнопки возврата, который не вызывается из-за прослушивателя, будет удален.

Есть ли какая-либо альтернатива, метод которой будет вызываться всегда, как только мы переключимся на предыдущий экран.

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

Мы знаем, что можем вызвать метод render, но мы ожидаем, что вызовем его с хорошей практикой.

И есть ли какой-либо способ сделать это глобальным способом вместо записи вызова закрывающего ящика классов.

Код:

 componentDidMount() {
    BackHandler.addEventListener('backTapped', this.backButtonTap);
}
  componentWillUnmount() {
    BackHandler.removeEventListener('backTapped', this.backButtonTap);

}

 backButtonTap = () => {
   navigation.dispatch(DrawerActions.closeDrawer());
}

Есть предложения?

Комментарии:

1. Изменение активной вкладки должно изменить состояние родительского компонента, так что вы можете прослушать это изменение и повторно подключить прослушиватель, может быть?

2. Большое спасибо за ваш быстрый ответ @ChrisG, Но я ищу любой другой метод по умолчанию или какое-либо свойство, которое могло бы вызвать это как положено по практике. И есть ли какой-либо способ сделать это глобальным способом вместо записи вызова закрывающего ящика классов.

Ответ №1:

Я бы предложил использовать собственный прослушиватель жизненного цикла навигации react-navigation, чтобы вы также могли обрабатывать разное поведение кнопки возврата на разных страницах. 

 componentDidMount() {
    this.willFocusListener = navigation.addListener('willFocus', () => {
      BackHandler.addEventListener('backTapped', this.backButtonTap);
    });
    this.willBlurListener = navigation.addListener('willBlur', () => {
      BackHandler.removeEventListener('backTapped', this.backButtonTap);
    });
}

componentWillUnmount() {
    this.willFocusListener.remove();
    this.willBlurListener.remove();
}

Тогда компонент NavigationEvents также может быть полезен