ComponentWillUnmount 没有被调用 React-Navigation

Question

我知道这个问题已经存在于 Stack Overflow 上，但大多数问题和答案都很旧了。我正在开发一个应用程序，该应用程序显然使用react-native对componentDidMount内的数据库执行提取调用。

\n

我在componentDidMount中运行了一个调用查询的间隔，并且运行良好。现在我需要调用内部componentWillUnmount来停止查询并登录我的应用程序。clearInterval(this.interval)

\n

\n

1. 当我按下保存按钮并使用导航时应该调用它props.navigation.navigate("new Screen", {params})
   \n我阅读了一个我应该使用的解决方案props.navgiation.replace("Screen")- 但它对我不起作用

   \n
\n

2. 第二个重要部分是，当我按下另一个选项卡（使用底部选项卡导航器）时，也需要调用componentWillUnmount

   \n
\n

\n

据我所知，例如堆栈导航器中的屏幕永远不会真正卸载。那么是否有一种不同的方式来调用componentWillUnmount ，例如当用户离开屏幕（或在屏幕上失去焦点）或用户离开特定的路由名称或其他内容时。

\n

我的componentWillUnmount - 非常简单：

\n

  componentWillUnmount(){\n    clearInterval(this.interval)\n    console.log("Component did Unmount")\n  }\n

\n

仅当我转到注销屏幕并注销以再次进入登录屏幕时才会调用它。

\n

（编辑）我的导航器：

\n

const EintragenStack = createStackNavigator(\n  {\n    Eintragen: {\n      screen: StundenEintragen2,\n      navigationOptions: {\n        headerTitle: "Stundenverwaltung",\n        headerTitleStyle:{\n          color: "white",\n          alignSelf: "center"\n        },\n        headerStyle:{\n          backgroundColor: "#a51717"\n        },  \n      }\n    }\n  }\n)\n\nconst CheckStack = createStackNavigator(\n  {\n    \xc3\x9cbersicht: StundenChecken,\n    Monat: Monats\xc3\xbcbersicht2, // Monats\xc3\xbcbersicht\n    Tag: Tages\xc3\xbcbersichtDiff, // Tages\xc3\xbcbersicht\n    Edit: {\n      screen: StundenEdit,\n      navigationOptions:{\n        headerTitle: "Stunden bearbeiten",\n        headerTitleStyle: {\n          color: "white",\n          alignSelf: "center"\n        },\n        headerStyle: {\n          backgroundColor: "#F39237"\n        }\n      }\n    }\n  },\n  {\n    backBehavior: "history"\n  }\n);\nconst Tabs = createBottomTabNavigator(\n  { \n    Eintragen: EintragenStack,     // StundenEintragen\n    Checken: CheckStack,\n    Logout: Logout\n  },\n  {\n    backBehavior: "history",\n    tabBarOptions: {\n      labelStyle: {\n        fontSize: 12,\n        color: "black"\n      },\n      activeTintColor: "red",\n      activeBackgroundColor: "#ccc"\n    }\n  }\n);\nconst AppNavigator = createSwitchNavigator({\n  Login: Auth, //SecondAuth,\n  Tabs: Tabs,\n});\n\nEintragenStack.navigationOptions = {   \n  tabBarIcon: () => {\n    return <Icon style={{marginTop: 5}} size={34} name="ios-add-circle-outline" color="green" />;\n  }\n  \n};\nCheckStack.navigationOptions = {\n  tabBarIcon: () => {\n    return <Icon style={{marginTop: 5}} size={34} name="ios-calendar" color="black" />;\n  }\n};\nLogout.navigationOptions = {\n  tabBarIcon: () => {\n    return <Icon style={{marginTop: 5}} size={34} name="ios-power" color="red" />;\n  }\n};\n\nconst AppContainer = createAppContainer(AppNavigator);\n\nexport default AppContainer;\n

\n

---

\n

我实际上是根据我的需要修复了它，但总体而言问题仍然存在。我不知道这是否是一个好方法，但对我来说，我是这样做的：

\n

\n
1. 我每 30 秒打checkUnlockHandler一次电话componentWillMount。
\n
2. 当checkUnlockHandler到达 if 告诉它不再需要运行时，我打电话clearInterval(this.interval("here is my checkUnlockHandler"))
\n
3. 之后我的间歇就componentDidMount停止了，这很好。
\n
4. 问题：间隔仍然在其他屏幕中运行，调用一个componentDidMount包含在间隔中的函数并在该函数内告诉间隔何时应该停止感觉很奇怪。
\n

\n

Answer 1

我在使用底部选项卡导航器时遇到了同样的问题，我找到了简单的解决方案，这对我有用。

    componentDidMount()
    {
        this.props.navigation.addListener('focus', async () =>{
             this.interval= setInterval(() => { 
                 //---------
             }, 5000);
         });
        this.props.navigation.addListener('blur', () => {
            clearInterval(this.interval);
        });
    }

同样在功能组件中，我们可以使用 useEffect 进行清理。

React.useEffect(() => {
    navigation.addListener('focus', () => {
        this.interval= setInterval(() => { 
                 //---------
        }, 5000);
    });

    return () =>{
        clearInterval(this.interval);
    };
 }, [navigation]);