react-native - react 导航:检测何时激活屏幕，标签栏/出现/聚焦/模糊

很显然，当我想在打开屏幕时进行一些操作时，我将它们放在componentDidMount中。例如，我可以获取一些数据。

像这样。

componentDidMount() {
  this.updateData();
}

但是，对于react-navigation ，componentDidMount 仅在用户第一次打开屏幕时出现一次，并且如果以后用户再次打开此页面，则不会触发componentDidMount。

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

最佳答案

使用react-navigation，您可以分2个步骤进行操作:

在componentDidMount或componentWillMount中添加侦听器，以挂接事件

删除componentWillUnmount中的侦听器，以避免意外调用

API引用文档v3.x，v4.x，v5.x:

React-navigation v3.x，v4.x :



React-navigation 3.x，4.x 示例:

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

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

引用v4.x https://reactnavigation.org/docs/4.x/navigation-prop/#addlistener---subscribe-to-updates-to-navigation-lifecycle

更新了v5.x

事件已在v5.x中更改



来自reactnavigation.org的示例代码

class Profile extends React.Component {
  componentDidMount() {
    this._unsubscribe = navigation.addListener('focus', () => {
      // do something
    });
  }

  componentWillUnmount() {
    this._unsubscribe();
  }

  render() {
    // Content of the component
  }
}

引用v5.x:https://reactnavigation.org/docs/navigation-events

关于react-native - react 导航:检测何时激活屏幕，标签栏/出现/聚焦/模糊，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50290818/