Question

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

无论何时导航到页面（包括goBack（）事件），如何调用函数？如果将方法放在构造函数中，则只会在最初创建该方法时触发，而不是通过goBack（）获得该方法时触发。

Answer 1

您已经注意到，更改页面时永远不会卸载该组件，因此您不能依赖于构造函数，甚至不能依靠componentDidMount。关于该主题in this issue的讨论很多。

您可以例如监听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 />;
  }
}

Answer 2

使用导航事件我相信您可以使用聚焦，并且会模糊

<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

React-Navigation：每当页面导航到

2 个答案: