React-Navigation：每当导航到页面时调用函数

Question

我正在使用 React-Navigation 开发 React-Native 应用程序，并且我正在使用堆栈导航器。

导航到页面时如何调用函数，包括 goBack() 事件？ 如果我将方法放在我的构造函数中，它只会在其初始创建时触发，而不会在通过 goBack() 获得时触发。

Answer 1

使用导航事件我相信你可以使用 did focus 并且会模糊

<NavigationEvents
      onWillFocus={payload => console.log('will focus', payload)}
      onDidFocus={payload => console.log('did focus', payload)}
      onWillBlur={payload => console.log('will blur', payload)}
      onDidBlur={payload => console.log('did blur', payload)}
    />

https://reactnavigation.org/docs/en/navigation-events.html

编辑 2021

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

const isFocused = useIsFocused();

React.useEffect(()=>{
 if(isFocused){

   // callback
 }
},[isFocused])

Answer 2

正如您所指出的，在更改页面时永远不会卸载组件，因此您不能依赖构造函数甚至componentDidMount 。 本期有很多关于这个话题的讨论。

例如，您可以收听didFocus和willBlur事件，并且仅在页面获得焦点时才呈现您的页面。

例子

class MyPage extends React.Component {
  state = {
    isFocused: false
  };

  componentDidMount() {
    this.subs = [
      this.props.navigation.addListener("didFocus", () => {
        this.setState({ isFocused: true })
      }),
      this.props.navigation.addListener("willBlur", () => {
        this.setState({ isFocused: false })
      })
    ];
  }

  componentWillUnmount() {
    this.subs.forEach(sub => sub.remove());
  }

  render() {
    const { isFocused } = this.state;

    if (!isFocused) {
      return null;
    }

    return <MyComponent />;
  }
}