反应导航:检测何时激活屏幕，选项卡/出现/聚焦/模糊 [英] react-navigation: Detect when screen, tabbar is activated / appear / focus / blur

问题描述

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

Perviously when I wanted to make some actions when screen is opened I put them inside componentDidMount. For example I can fetch some data.

像这样.

componentDidMount() {
  this.updateData();
}

但是使用react-navigation componentDidMount 只会在用户第一次打开屏幕时发生一次，并且如果以后用户再次打开该页面，则不会触发componentDidMount.

But with react-navigation componentDidMount occurs only one time when user open screen first time, and if later user open this page again it will not trigger componentDidMount.

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

What is proper way to detect when page(screen) is activated and do actions?

推荐答案

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

With react-navigation, you can do that in 2 steps:

1. 在componentDidMount或componentWillMount中添加侦听器以挂钩事件

1. Add listeners in componentDidMountor componentWillMount, to hook events

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

Remove listeners in componentWillUnmount, to avoid unexpected calling

API参考文档v3.x，v4.x，v5.x:

反应导航v3.x，v4.x :

addListener-订阅导航生命周期的更新

addListener - Subscribe to updates to navigation lifecycle

反应导航向订阅的屏幕组件发出事件 他们:

React Navigation emits events to screen components that subscribe to them:

• willFocus-屏幕将聚焦
• didFocus-屏幕聚焦(如果存在过渡，则过渡完成)
• willBlur-屏幕将无法对焦
• didBlur-屏幕未聚焦(如果存在过渡，则过渡完成)

• willFocus - the screen will focus
• didFocus - the screen focused (if there was a transition, the transition completed)
• willBlur - the screen will be unfocused
• didBlur - the screen unfocused (if there was a transition, the transition completed)

反应导航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();

Ref v4.x

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

更新了v5.x

事件已在v5.x中更改

The events had been changed in v5.x

屏幕可以在 类似于React Navigation中的导航道具.默认情况下，有2 可用事件:

Screens can add listeners on the navigation prop like in React Navigation. By default, there are 2 events available:

• focus-屏幕聚焦时会发出此事件
• 模糊-屏幕失焦时会发出此事件
• 状态(高级)-导航器的状态更改时，会发出此事件

• focus - This event is emitted when the screen comes into focus
• blur - This event is emitted when the screen goes out of focus
• state (advanced) - This event is emitted when the navigator's state changes

reactnavigation.org的示例代码

Sample code from 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

这篇关于反应导航:检测何时激活屏幕，选项卡/出现/聚焦/模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！