响应本机注销不活动

Question

我必须制作一个反应本机应用程序（不使用expo或hooks），它可以登录用户，读取一些简单的信息，然后通过注销按钮或由于不活动而自动注销。

我的登录、设置计时器或注销按钮都没有问题，但是我不知道如何检测“不活动”，这对于状态来说可能吗？以及具体如何？

Answer 1

普遍共识似乎是使用 PanResponder：

在 React Native 中获取用户不活动状态

检查 React Native 应用程序中的不活动状态

state = {};
  _lastInteraction = new Date();
  _panResponder = {};

  componentWillMount() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: this.handleStartShouldSetPanResponder,
      onMoveShouldSetPanResponder: this.handleMoveShouldSetPanResponder,
      onStartShouldSetPanResponderCapture: () => false,
      onMoveShouldSetPanResponderCapture: () => false,
      onPanResponderTerminationRequest: () => true,
      onShouldBlockNativeResponder: () => false,
    });

    this._maybeStartWatchingForInactivity();
  }

  _maybeStartWatchingForInactivity = () => {
    if (this._inactivityTimer) {
      return;
    }

    this._inactivityTimer = setInterval(() => {
      if (
        new Date() - this._lastInteraction >= TIME_TO_WAIT_FOR_INACTIVITY_MS
      ) {
        this._setIsInactive();
      }
    }, INACTIVITY_CHECK_INTERVAL_MS);
  };

  // NOTE: you almost certainly want to throttle this so it only fires
  // every second or so!
  _setIsActive = () => {
    this._lastInteraction = new Date();
    if (this.state.timeWentInactive) {
      this.setState({ timeWentInactive: null });
    }
    this._maybeStartWatchingForInactivity();
  };

  _setIsInactive = () => {
    this.setState({ timeWentInactive: new Date() });
    clearInterval(this._inactivityTimer);
    this._inactivityTimer = null;
  };

  render() {
    return (
      <View
        style={styles.container}
        collapsable={false}
        {...this._panResponder.panHandlers}>
        <Text style={styles.paragraph}>
          Put your app here
          {' '}
          {this.state.timeWentInactive &&
            `(inactive at: ${this.state.timeWentInactive})`}
        </Text>

        <Button
          title="Here is a button for some reason"
          onPress={() => alert('hi')}
        />
      </View>
    );

Answer 2

您可以使用

import AsyncStorage from '@react-native-async-storage/async-storage';

所以基本上，每当用户访问应用程序时，您都可以存储用户登录的时间。

像这样

const storeData = async (value) => {
  try {
    await AsyncStorage.setItem('@last_visited', new Date().toString())
  } catch (e) {
    // saving error
  }
}

然后当用户再次返回访问应用程序时，您可以检查该时间与异步存储中存储的时间之间的差异。

首先

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@last_visited')
    if(value !== null) {
     if(new Date() - value > 5){
// here check if time diff is what as per you is inactive then logout user
// for example ive kept 5 hours
logout()

}
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
}

希望有帮助。有疑问请放心

Answer 3

您可以简单地使用

react-native-inactivity

模块来实现此目的。通过使用此模块，您实际上可以了解应用程序是否在 X 毫秒内处于非活动状态。你可以这样使用。

import ReactNativeInactivity from "react-native-inactivity";

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <ReactNativeInactivity
        isActive={true}
        onInactive={() => {//Do Logout or something like that}}
        timeForInactivity={60000} //1 mint in ms
        restartTimerOnActivityAfterExpiration={false}
        loop={false}
        style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "grey" }}>
        <YOUR_AUTHENTICATED_NAVIGATOR_HERE/>
      </ReactNativeInactivity>
    </View>
  );
}

您还可以根据需要管理其他道具。

如果这个解决方案对您有帮助，请竖起大拇指并在存储库给我一个星星。 有关更多信息，请参阅：https://www.npmjs.com/package/react-native-inactivity