React Native 不活动注销

Question

您好，我想为我的应用程序设置不活动状态注销，因此如果用户 3 分钟内没有在应用程序上执行任何操作，应用程序将返回到登录屏幕。

我正在使用expo，react原生导航V6，以及功能组件。

我还不知道该怎么做。请帮忙。

Answer 1

我想我能够在我一年前制作的应用程序上做到这一点，我认为这段代码可以帮助你。

const ManageExpenses = ({ route, navigation }) => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    let mounted = true;
    if (mounted) {
      tick();
    }
    return () => mounted = false;
  }, []);

  function tick() {
    let timer = setInterval(() => {
      setTime((prevTime) => (prevTime = prevTime + 1));
    }, 1000);
  }

  if (time >= 10) {
    navigation.goBack();
  }

  function pressHandler() {
    setTime(0)
  }
  
  return (
    <Pressable onPress={pressHandler} style={styles.container}>
    </Pressable>
  );
  
  export default ManageExpenses;
  
  const styles = StyleSheet.create({
  container: {
    flex: 1,
    }
 })

我在整个屏幕周围创建了一个 Pressable 组件，它重新定义了用户按下屏幕时的时间状态。我希望这对你有帮助！

Answer 2

如果不实现计时器（这对应用程序来说可能会很昂贵），您可以在应用程序进入后台时保存上次活动的日期，然后当应用程序再次活动时，检查是否已达到超时所需的时间，如果已达到则注销。

这是一个示例组件。您必须用它包装您的应用程序并替换正确的逻辑。

在此示例中，我使用

useStorageState

，它是

expo-secure-store

的实现 - 您可以查看他们的 文档 实现。如果您不使用 expo，您可以将其替换为其他存储。

检查应用程序是否处于活动状态或在后台的逻辑来自React Native文档

import { PropsWithChildren, useEffect, useRef } from "react";
import { AppState } from "react-native";
import dayjs from "dayjs";

// Replace this timeout with your desired timeout
const INACTIVITY_TIMEOUT_IN_MINUTES = 15;

export default function InactivityCheck({ children }: PropsWithChildren) {
  const appState = useRef(AppState.currentState);
  
  const [[_, lastActivity], setLastActivity] = useStorageState("lastActivity");

  useEffect(() => {
    const subscription = AppState.addEventListener(
      "change",
      async (nextAppState) => {
        appState.current = nextAppState;

        if (session) {
          if (
            appState.current.match(/inactive|background/) &&
            nextAppState === "active"
          ) {
            if (lastActivity) {
              const lastActivityDate = dayjs(new Date(lastActivity));
              const expirationDate = lastActivityDate.add(
                INACTIVITY_TIMEOUT_IN_MINUTES,
                "minutes"
              );
              const currentDate = dayjs();

              if (currentDate.isAfter(expirationDate)) {
                console.log("logout");
                setLastActivity(null);
                // perform your logout logic here
                return;
              }
            }
          }

          if (appState.current === "background") {
            console.log("app goes to background, setting last activity");
            setLastActivity(new Date().toISOString());
          }
        }
      }
    );

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

  return <>{children}</>;
}