ComponentWillUnmount没有被称为React-Navigation

Question

我知道这个问题已经存在于StackOverflow上，但是大多数问题和答案都非常古老。我正在开发一个应用程序，该应用程序显然使用react-native对componentDidMount内部的db执行访存调用。

我有一个interval

在componentDidMount中运行，它调用查询，并且效果很好。现在，我需要在componentWillUnmount中调用clearInterval(this.interval)以停止查询并登录我的应用程序。

---

1。当我按下保存按钮并使用props.navigation.navigate("new Screen", {params})

导航时应调用它

我在应使用props.navgiation.replace("Screen")的情况下阅读了此解决方案-但这对我不起作用

---

2。第二个重要部分是，当我按下另一个选项卡时，还需要调用componentWillUnmount

（使用bottom-tab-navigator）>

---

例如，我理解堆栈导航器中的屏幕永远不会真正卸载。因此，有一种不同的方式来调用componentWillUnmount，例如，当用户离开屏幕（或在屏幕上失去焦点）或用户离开特定的routeName之类的东西时。

我的componentWillUnmount-非常简单：

  componentWillUnmount(){
    clearInterval(this.interval)
    console.log("Component did Unmount")
  }
仅在我退出登录屏幕并再次退出登录屏幕时才调用。
（编辑）我的导航器：

const EintragenStack = createStackNavigator(
  {
    Eintragen: {
      screen: StundenEintragen2,
      navigationOptions: {
        headerTitle: "Stundenverwaltung",
        headerTitleStyle:{
          color: "white",
          alignSelf: "center"
        },
        headerStyle:{
          backgroundColor: "#a51717"
        },  
      }
    }
  }
)

const CheckStack = createStackNavigator(
  {
    Übersicht: StundenChecken,
    Monat: Monatsübersicht2, // Monatsübersicht
    Tag: TagesübersichtDiff, // Tagesübersicht
    Edit: {
      screen: StundenEdit,
      navigationOptions:{
        headerTitle: "Stunden bearbeiten",
        headerTitleStyle: {
          color: "white",
          alignSelf: "center"
        },
        headerStyle: {
          backgroundColor: "#F39237"
        }
      }
    }
  },
  {
    backBehavior: "history"
  }
);
const Tabs = createBottomTabNavigator(
  { 
    Eintragen: EintragenStack,     // StundenEintragen
    Checken: CheckStack,
    Logout: Logout
  },
  {
    backBehavior: "history",
    tabBarOptions: {
      labelStyle: {
        fontSize: 12,
        color: "black"
      },
      activeTintColor: "red",
      activeBackgroundColor: "#ccc"
    }
  }
);
const AppNavigator = createSwitchNavigator({
  Login: Auth, //SecondAuth,
  Tabs: Tabs,
});

EintragenStack.navigationOptions = {   
  tabBarIcon: () => {
    return <Icon style={{marginTop: 5}} size={34} name="ios-add-circle-outline" color="green" />;
  }

};
CheckStack.navigationOptions = {
  tabBarIcon: () => {
    return <Icon style={{marginTop: 5}} size={34} name="ios-calendar" color="black" />;
  }
};
Logout.navigationOptions = {
  tabBarIcon: () => {
    return <Icon style={{marginTop: 5}} size={34} name="ios-power" color="red" />;
  }
};

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;
!!新编辑！ 
我实际上是为我的需要修复了它，但是问题仍然存在。我不知道这是否是一个好方法，但是对我来说我是这样的：

1. 我每30秒在checkUnlockHandler中呼叫componentWillMount。>>
2. [当checkUnlockHandler到达if时，告诉他不再需要跑步了，我打电话给clearInterval(this.interval("here is my checkUnlockHandler"))
3. 在此之后，我在componentDidMount中的间隔停止运行，这很好。
4. 问题：间隔仍在其他屏幕上运行，在间隔内包裹的componentDidMount内和该函数内调用一个函数以告知间隔何时停止感觉很奇怪。

我知道这个问题已经存在于StackOverflow上，但是大多数问题和答案都非常古老。我正在开发一个应用程序，该应用程序显然使用...

我在使用底部标签导航器时遇到了同样的问题，并且找到了简单的解决方案，该解决方案对我有用。

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

Answer 1

我在使用底部标签导航器时遇到了同样的问题，并且找到了简单的解决方案，该解决方案对我有用。