goBack导航调用后未调用componentDidMount

Question

我设置了一个StackNavigator，它将componentDidMount导航到另一个屏幕并返回上一个屏幕后，将触发redux动作以在其上获取数据，componentDidMount不再触发，并且显示白色屏幕。我尝试过使用重置StackNavigator，StackActions.reset但这只会导致我的其他屏幕无法安装好，从而呈现空白屏幕。有没有一种办法，迫使componentDidMount后this.props.navigation.goBack()？

返回功能

_goBack = () => {
  this.props.navigation.goBack();
};

导航功能到新屏幕

_showQuest = (questId, questTitle ) => {
  this.props.navigation.navigate("Quest", {
    questId,
    questTitle,
  });
};

编辑：嗨，我仍然对此事保持怀疑，并且想知道SO社区是否有解决方案来强制在调用Navigation.goBack（）之后调用componentDidMount，或者更确切地说，如何在this.props.navigation之后卸载组件。导航称为

Answer 1

导航更改时不会删除组件，因此 componentDidMount仅在第一次渲染时才被调用。

您可以改用这种替代方法：

class MyComponent 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() {
    if (!this.state.isFocused) {
      return null;
    }

    // ...
  }
}

Answer 2

事件didFocus监听器对我不起作用。

我找到了一个不同的监听器，focus它终于起作用了！

componentDidMount() {
    const { navigation } = this.props;
    
    this.focusListener = navigation.addListener('focus', () => {
        // call your refresh method here
    });
}

componentWillUnmount() {
    // Remove the event listener
    if (this.focusListener != null && this.focusListener.remove) {
        this.focusListener.remove();
    }
}