当我导航到本机反应的新页面时，如何强制卸载组件？

Posted 2023-02-19

【中文标题】当我导航到本机反应的新页面时，如何强制卸载组件？

【英文标题】：How do I force a component to unmount when I navigate to a new page in react native?

【发布时间】：2019-07-27 20:26:52

【问题描述】：

我想确保在导航到新页面时触发生命周期方法 ComponentWillUnmount。我找到了这个post，但这似乎没有提到任何关于导航到新页面的内容。我也发现了这个post，但我使用的是反应导航。另外，我没有使用pop/push。我只是使用 this.props.navigation.navigate('SomePage') 进入下一页

【问题讨论】：

有什么你想做的事情，或者你想在componentWillUnmount中调用的函数吗？还是您要删除上一页？

有几种方法可以删除蓝牙监听器。

【参考方案1】：

您可以使用this.props.navigation.replace('routName'); 它会完成你的工作。

【讨论】：

我这样做是为了显示一个包含 webview 的屏幕，webview 崩溃，然后我看到我的组件仍然挂载。

【参考方案2】：

查看React Navigation 处理组件生命周期事件的方法in their docs here

TL;DR，您可以结帐React Navigation's navigation lifecycle event 以在切换屏幕时执行操作。希望对您有所帮助。

【讨论】：

在这些链接中没有提到“卸载”这个词...

【参考方案3】：

React 导航永远不会破坏屏幕。这意味着您的屏幕永远不会卸载，或者当您返回时它永远不会重新安装 (didMount)。为此，您必须使用useFocusEffect

import React,  useCallback  from 'react';
import  useFocusEffect  from '@react-navigation/native';

const Home = () => 
  useFocusEffect(
    useCallback(() => 
      // Do something when the screen is focused/mount

      return () => 
        // Do something when the screen is unfocused/unmount
        // Useful for cleanup functions
      ;
    , [])
  );

  return <Home />;

参考：导航生命周期