react-navigation:检测屏幕、标签栏何时被激活/出现/聚焦/模糊 [英] 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:

React-navigation v3.x、v4.x:

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

addListener - Subscribe to updates to navigation lifecycle

React Navigation 向订阅的屏幕组件发出事件他们:

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)

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

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 - 当屏幕进入焦点时触发此事件
• blur - 当屏幕失去焦点时触发此事件
• state (advanced) - 当导航器的状态改变时触发这个事件

来自 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
  }
}

与钩子一起使用

function Profile({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // do something
    });

    return unsubscribe;
  }, [navigation]);

  return <ProfileContent />;
}

屏幕上的听众道具

<Tab.Screen
  name="Chat"
  component={Chat}
  listeners={({ navigation, route }) => ({
    tabPress: e => {
      // Prevent default action
      e.preventDefault();

      // Do something with the `navigation` object
      navigation.navigate('AnotherPlace');
    },
  })}
/>

参考 v5.x:https://reactnavigation.org/docs/navigation-events

在 React navigation V6 中，您需要做的就是参考文档

import { useIsFocused } from '@react-navigation/native';

function Profile() {
  const isFocused = useIsFocused();

  return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}

这篇关于react-navigation:检测屏幕、标签栏何时被激活/出现/聚焦/模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！