Блог

Я хочу создать функцию внутри своих компонентов, которая определяет, когда приложение находится в фоновом режиме в течение 30 секунд, я хочу отправить действие выхода из системы или закрыть приложения. возможно ли это, если мы сделаем это в react native?

Я использую крючки

Спасибо,

обновление : Я использую решение wowandy, но дело в том, что если пользователь закроет приложения менее чем на 10 секунд, а затем снова откроет приложение, команда отправки все равно будет выполнена через 30 секунд. есть ли какой-нибудь способ отменить тайм-аут ?

  useEffect(() => {
    let timeout;

    const subscription = AppState.addEventListener('change', (nextAppState) => {
      clearTimeout(timeout);


      if (appState.current === 'background') {
        timeout = setTimeout(() => dispatch(removeDataLogin()), 30000);
      }

      appState.current = nextAppState;
    });

    return () => {
      subscription.remove();
      clearTimeout(timeout);
    };
  }, []);
 

Обновление 3
Поэтому я попытался использовать решение Майкла Бахля, как описано ниже. это отлично работает с меткой времени.

 useEffect(() => {
    let start;
    let end;
    const subscription = AppState.addEventListener("change", nextAppState => {
      if (
        appState.current.match(/inactive|background/) amp;amp;
        nextAppState === "active"
      ) {
        end = new Date()
        let ms = moment(end).diff(moment(start))
        if (Number(ms) >= 30000) {
          dispatch(removeDataLogin())
        } else {
        }
      } else {
        start = new Date()
        console.log('start diff :', start)
      }
      appState.current = nextAppState;
      setAppStateVisible(appState.current);
      console.log("AppState", appState.current);
    });

    return () => {
      subscription.remove();
    };
  }, []);
 

обновление 3 Я использую решение Майкла Бахля, поэтому я создал метку времени, которая проверяет разницу между неактивными и активными экранами, а затем отправляет действие redux

 useEffect(() => {
    let start;
    let end;
    const subscription = AppState.addEventListener("change", nextAppState => {
      if (
        appState.current.match(/inactive|background/) amp;amp;
        nextAppState === "active"
      ) {
        console.log('end =====')
        console.log('start diff == ', start)
        end = new Date()
        console.log('end diff ===', end)
        let ms = moment(end).diff(moment(start))
        console.log('different : ', ms)
        console.log(typeof ms)
        if (Number(ms) >= 30000) {
          console.log('harusnya logout')
          dispatch(removeDataLogin())
        } else {
          console.log(ms, 'masuk sini')
        }
      } else {
        start = new Date()
        console.log('start diff :', start)
      }


      appState.current = nextAppState;
      setAppStateVisible(appState.current);
      console.log("AppState", appState.current);
    });

    return () => {
      subscription.remove();
    };
  }, []);
 

Вы можете обрабатывать состояние приложения с помощью AppState и закрывать его с помощью BackHandler

См. Пример:

 import React, {useRef, useEffect} from 'react';
import {AppState, BackHandler} from 'react-native';

const App = () => {
  const appState = useRef(AppState.currentState);

  useEffect(() => {
    let timeout;

    const subscription = AppState.addEventListener('change', (nextAppState) => {
      clearTimeout(timeout);

      if (appState.current === 'background') {
        timeout = setTimeout(() => BackHandler.exitApp(), 30000);
      }

      appState.current = nextAppState;
    });

    return () => {
      subscription.remove();
      clearTimeout(timeout);
    };
  }, []);

  // TODO

  return /* TODO */;
};