javascript - goBack 导航调用后未调用 componentDidMount

Question

我已经设置了一个 StackNavigator，它会触发一个 redux 操作来获取 componentDidMount 上的数据，在导航到另一个屏幕并返回到上一个屏幕后，componentDidMount不再开火，我看到一个白色的屏幕。我尝试使用 StackActions.reset 重置 StackNavigator，但这只会导致我的其他屏幕也无法安装，进而显示一个空屏幕。有没有办法在 this.props.navigation.goBack() 之后强制执行 componentDidMount？

返回功能

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

到新屏幕的导航功能

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

编辑:嗨，我仍然坚持这个问题，想知道 SO 社区是否有一个解决方案来强制在调用 Navigation.goBack() 之后调用 componentDidMount 或者更确切地说如何在 this.props.navigation.navigate 之后卸载组件叫

Answer 1

当导航发生变化时，组件不会被移除，所以 componentDidMount 只会在第一次渲染时被调用。

你可以使用 this alternative approach相反:

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;
    }

    // ...
  }
}