ComponentWillUnmount не называется React-Navigation

Question

Я знаю, что этот вопрос уже существует в StackOverflow, но большинство вопросов и ответов очень старые. Я работаю над приложением, которое выполняет вызов выборки для БД внутри componentDidMount , очевидно, используя Reaction-native .

У меня есть интервал работает в componentDidMount , который вызывает запрос, и он работает хорошо. Теперь мне нужно вызвать clearInterval(this.interval) внутри componentWillUnmount , чтобы остановить запрос и войти в мое приложение.

---

1. Он должен вызываться, когда я нажимаю кнопку сохранения и перемещаюсь с помощью props.navigation.navigate("new Screen", {params})

Я прочитал решение для этого, где я должен использовать props.navgiation.replace("Screen") - но оно не работает для меня

---

2. Вторая важная часть заключается в том, что componentWillUnmount также необходимо вызывать, когда я нажимаю на другую вкладку (с помощью навигатора в нижней части)

---

Я понимаю, что например, экраны в стековом навигаторе никогда не отключаются. Так есть ли другой способ вызова componentWillUnmount , может быть, что-то вроде, когда пользователь покинул экран (или потерял фокус на экране) или пользователь оставил указанное c routeName или что-то в этом роде.

My componentWillUnmount - действительно просто:

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

вызывается только, если я go выхожу на экран LogOut и выхожу, чтобы снова оказаться на моем экране входа в систему.

( РЕДАКТИРОВАТЬ) Мой навигатор:

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. Я звоню checkUnlockHandler в componentWillMount каждые 30se c.
2. Когда checkUnlockHandler получает запрос, который говорит ему, что ему больше не нужно работать, я звоню clearInterval(this.interval("here is my checkUnlockHandler"))
3. После этого мой интервал в componentDidMount останавливается, что хорошо.
4. Проблемы: интервал по-прежнему работает на других экранах. Странно вызывать функцию внутри componentDidMount, заключенную в интервал, и внутри этой функции, чтобы сообщить, когда интервал должен прекратиться.

Answer 1

Я столкнулся с той же проблемой при использовании навигатора нижней вкладки, и я нашел простое решение, которое работает для меня.

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