react-navigation：检测屏幕，tabbar是否激活/出现/聚焦/模糊

Question

当我想在屏幕打开时做一些动作时，我把它们放在componentDidMount中。例如，我可以获取一些数据。

像这样。

componentDidMount() {
  this.updateData();
}

但是反应导航componentDidMount只在用户第一次打开屏幕时出现一次，如果以后用户再次打开此页面则不会触发componentDidMount。

检测页面（屏幕）何时被激活并执行操作的正确方法是什么？

Answer 1

有了react-navigation，你就可以做到。

1. 在componentDidMountor 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',
};

Answer 2

componentDidMount / componentWillUnmount不适用于所有导航情况（如标签）。

你需要使用addListener和事件didFocus和didBlur来做这样的动作。有关详细信息，请参阅documentation

Answer 3

这可能会迟到，但这就是我解决它的方式。请参阅下面的代码。不要忘记导入withNavigation并将导出默认值包装为导航。

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);