реагировать-навигация: определить, когда экран, панель вкладок активирована / появляются / фокус / размытие

Question

Очевидно, что когда я хотел сделать некоторые действия при открытом экране, я помещал их в componentDidMount. Например, я могу получить некоторые данные.

вот так.

componentDidMount() {
  this.updateData();
}

Но с реагирующей навигацией componentDidMount происходит только один раз, когда пользователь впервые открывает экран, и если позже пользователь снова откроет эту страницу, он не будет вызывать componentDidMount.

Как правильно определить, когда страница (экран) активирована, и выполнить действия?

Answer 1

componentDidMount / componentWillUnmount работает не во всех случаях навигации (например, вкладки).

Вам необходимо использовать addListener с событиями didFocus и didBlur для выполнения таких действий. Подробнее см. документация

Answer 2

Это может быть поздно, но я так решил. Смотрите код ниже. Не забудьте импортировать с помощью Navigation и обернуть экспорт по умолчанию с помощью Navigation.

import { withNavigation } from "react-navigation";
 componentDidMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener("didFocus", () => {
      // The screen is focused
      // Call any action
    });
  }

  componentWillUnmount() {
    // Remove the event listener
    this.focusListener.remove();
  }

export default withNavigation(Your Class Name);

Answer 3

С react-navigation вы можете сделать это.

1. Добавить слушателей в componentDidMount или componentWillMount

   this.subs = [
     this.props.navigation.addListener('didFocus', (payload) => this.componentDidFocus(payload)),
   ]; 
   

   или

   this.subs = [
     this.props.navigation.addListener('didFocus', this.componentDidFocus),
     this.props.navigation.addListener('willBlur', this.componentWillBlur),
   ];
   

   Затем вы можете сделать что-нибудь в componentDidFocus, как выборка данных, обновление данных, ...

2. В componentWillUnmount, удалить прослушиватели

   componentWillUnmount() {
     this.subs.forEach(sub => sub.remove());
   }
   

Подробнее см.PR: https://github.com/react-navigation/react-navigation/pull/3345

Обновлено 3.x:

addListener - Подписаться на обновления жизненного цикла навигации

React Navigation генерирует события для компонентов экрана, которыеподписаться на них:

• willBlur - экран будет не сфокусированным

• willFocus - экран будет сфокусирован

• didFocus - экран сфокусирован (если был переход, переход завершен)

• didBlur - экран не сфокусирован (если был переходпереход завершен)

Ссылка: https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

Обновлен пример 3.x:

const didBlurSubscription = this.props.navigation.addListener(
  'didBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);

// Remove the listener when you are done
didBlurSubscription.remove();

Полезная нагрузка JSON:

{
  action: { type: 'Navigation/COMPLETE_TRANSITION', key: 'StackRouterRoot' },
  context: 'id-1518521010538-2:Navigation/COMPLETE_TRANSITION_Root',
  lastState: undefined,
  state: undefined,
  type: 'didBlur',
};