Question

我想在浏览另一个屏幕后删除事件侦听器，但是componentWillUnmount（）无法正常工作吗？ 我这样导航：

this.props.navigation.navigate（'newScreen'）

导航后，我想使用componentWillUnmount删除监听器

  componentDidMount() {
    this.backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      this.handleBackPress,
    );
  }

  componentWillUnmount() {
    console.warn('removed');
    this.backHandler.remove();
  }

  handleBackPress = () => {
    return true;
  };

Answer 1

在使用StackNavigator时，如果执行navigate，则不会卸载上一屏幕。

例如在一个Stack中放置3个屏幕：

Screen1 (initialRoute)

Screen2

Screen3

安装StackNavigator的那一刻，您将获得一个包含一个元素的Stack。

堆栈：Screen1

导航到Stack中的另一个屏幕，不会卸载第一个屏幕，它将保持活动状态并将下一个屏幕推到Stack。

这样做。 this.props.navigation.navigate("Screen2")会像下面这样离开堆栈：

堆栈：Screen1（未聚焦），Screen2（已聚焦）。

如果将另一个屏幕推到Stack，它将保持所有屏幕的安装状态。

this.props.navigation.navigate("Screen3")

堆栈：屏幕1（未聚焦），屏幕2（未聚焦），屏幕3（已聚焦）。

仅当您导航到已安装的屏幕时，这些屏幕才会卸载（使用navigate）。

正在做

this.props.navigation.navigate("Screen1")

将像这样离开Stack：

堆栈：Screen1

您的问题的解决方案是使用navigation HOC withNavigationFocus。

withNavigation focus将使您知道屏幕是否聚焦，并据此执行所需操作。您的组件看起来像：

import { withNavigationFocus } from "react-navigation"

...

  componentDidMount() {
    this.backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      this.handleBackPress,
    );
  }

  componentDidUpdate(prevProps) {
    if(prevProps.isFocused !== this.props.isFocused)
      this.props.isFocused === true 
    ? this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
    : this.backHandler.remove();

  }

  componentWillUnmount() {
    console.warn('removed');
    this.backHandler.remove();
  }

  handleBackPress = () => {
    return true;
  };

...

export default withNavigationFocus(Component);

为什么componentWillUnmount（）不起作用？

1 个答案: