Question

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

像这样。

componentDidMount() {
  this.updateData();
}

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

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

Answer 1

最新版本的react-navigation提供了自定义挂钩，可让您对焦点和模糊事件做出反应：https://reactnavigation.org/docs/function-after-focusing-screen。

以下是他们的文档中的一个示例，该示例使用onFocusEffect挂钩对焦点进行API调用（当屏幕失焦时会清除效果）：

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

function Profile({ userId }) {
  const [user, setUser] = React.useState(null);

  useFocusEffect(
    React.useCallback(() => {
      const unsubscribe = API.subscribe(userId, user => setUser(data));

      return () => unsubscribe();
    }, [userId])
  );

  return <ProfileContent user={user} />;
}

Answer 2

NavigationEvents是在JSX内部添加事件侦听器的另一种方法。有关详细信息，请参见documentation。

它看起来像这样：

import { NavigationEvents } from 'react-navigation';

return (
  <ScrollView style={styles.container}>
    <NavigationEvents            
      onDidBlur={payload => console.log('did blur', payload)}
    />
    {this.props.children}
  </ScrollView>
);

Answer 3

这可能要晚了，但这就是我解决的方法。请参见下面的代码。不要忘了用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);

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

3 个答案: