为什么 componentWillUnmount() 不执行？答案

【问题标题】：Why does componentWillUnmount() not execute?为什么 componentWillUnmount() 不执行？
【发布时间】：2019-08-28 21:42:20
【问题描述】：

在一个项目中，我使用的是 wix 的 RNN。我在其中有一个屏幕，我们称它为“Screen1”。 Screen1 有一个按钮，调用Navigation.push() 并移至“Screen2”。 Screen1 在componentWillUnmount() 中设置了警报。但是当屏幕改变时，警报永远不会显示。

export default class Screen1 extends React.Component {
  componentDidMount() {
    Navigation.events().bindComponent(this);
  }
  componentWillUnmount() {
    alert("Goodbye screen1");
  }
  nextScreen = () => {
    Navigation.push(this.props.componentId)
  }
  render() {
    <View style={{height: '100%', width='100%'}}>
      <TouchableOpacity onPress={this.nextScreen}>
        <Text>Test Button</Text>
      </TouchableOpacity>
    </View>
  }
}

我希望在移动到下一个屏幕时触发警报。但是，该组件似乎仍然被挂载，因为没有触发警报，并且screen1 的 componentDidMount() 中有一个函数（未显示）正在从下一个屏幕执行。那么 wix 是如何处理屏幕变化时的组件生命周期的呢？

【问题讨论】：

如果您注意到.. 您正在拨打Navigation.push 电话。这是一堆屏幕，所以前一个屏幕实际上并没有卸载，而只是在下一个被推送的屏幕下方运行。我必须查看 api 文档（我使用它已经 2 年了），但我相信 replace 方法可以清除堆栈。

标签： reactjs react-native react-native-navigation

【解决方案1】：

发生的情况是您的组件仍处于挂载状态。你只是在它上面推了另一个屏幕。它不可见，但仍已安装。

我不是 RNN 方面的专家，但我认为您要寻找的是 componentDidDisappear 事件。

希望对你有帮助。

【讨论】：