[英]React native logout for inactivity
I have to make a react-native app (not using expo nor hooks) that can login into a user, read some simple info and then logout through a logout button or automatically due to inactivity.我必须制作一个 react-native 应用程序(不使用 expo 或挂钩),它可以登录到用户,阅读一些简单的信息,然后通过注销按钮或由于不活动而自动注销。
I have no issues with the login, setting the timer, nor the logout button, however I have no idea of how to detect 'inactivity', is this posible with states?我对登录、设置计时器和注销按钮都没有问题,但是我不知道如何检测“不活动”,这对状态是否可行? and how exactly?
究竟如何?
You can use import AsyncStorage from '@react-native-async-storage/async-storage';
您可以使用
import AsyncStorage from '@react-native-async-storage/async-storage';
So basically, whenever user visits the app, you can store the time in which user logged in.所以基本上,每当用户访问应用程序时,您都可以存储用户登录的时间。
like this像这样
const storeData = async (value) => {
try {
await AsyncStorage.setItem('@last_visited', new Date().toString())
} catch (e) {
// saving error
}
}
and then when user again comes back to visit the app, you can check for the difference in that time and the time stored in Async storage.然后当用户再次访问该应用程序时,您可以检查该时间与存储在异步存储中的时间的差异。
first第一的
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
}
}
Hope it helps.希望能帮助到你。 feel free for doubts
随时怀疑
General concensus seems to be to use PanResponder:一般的共识似乎是使用 PanResponder:
get user inactivity in react native 让用户在本机反应中不活动
Check for Inactivity in a React Native App 检查 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>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.