我到处找,找不到答案。我如何检测用户何时尝试关闭我的 React Native 应用程序(因为进程正在运行,他们手动管理他们的应用程序并强制退出它)。我想在发生这种情况时添加注销功能,但是找不到检测它的方法。AppState
似乎只检测应用程序何时进入和退出后台。
如何检测 React Native 应用程序何时关闭(未挂起)?
IT技术
mobile
reactjs
react-native
2021-04-16 04:57:01
5个回答
看起来您可以检测前一个状态并将其与下一个状态进行比较。根据我在网上找到的内容,您无法检测到应用程序正在关闭还是进入后台,但是您可以检测到它是否已inactive
(关闭),或在background
.
来自React Native Docs 的示例
import React, {Component} from 'react'
import {AppState, Text} from 'react-native'
class AppStateExample extends Component {
state = {
appState: AppState.currentState
}
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = (nextAppState) => {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
console.log('App has come to the foreground!')
}
this.setState({appState: nextAppState});
}
render() {
return (
<Text>Current state is: {this.state.appState}</Text>
);
}
}
我建议使用 web socket,它会帮助你解决你的问题,如下:
react-native应用
import React from 'react';
const io = require('socket.io-client/dist/socket.io');
const App = ()=>{
React.useEffect(()=>{
// connect to web socket
window.appSocket = io.connect(`<server-origin>/?token=<string>&userAppId=<string>`);
window.appSocket.on('connect',()=>{
// do what you line
})
},[])
...
}
export default App;
快递服务器端
const express = require('express');
const server = express();
const http = require('http').Server(server);
const io = require('socket.io')(http);
io.on('connection',(socket)=>{ // this callback function for each web socket connection
let { token , userAppId } = socket.handshake.query;
if( userAppId ){
console.log(`${userAppId} online`)
socket.on('disconnect',(resean)=>{
console.log(`${userAppId} shut down`)
})
}
});
有关更多详细信息,您可以查看socket.io
刚刚遇到了同样的问题。被接受的答案实际上并没有按照 OP 中的要求执行。
一个hacky解决方案是在你的应用程序打开的第一个屏幕上设置一个标志,当应用程序刚被后台打开时,不显示该屏幕。
不是超级优雅,我无法显示示例代码,但它解决了我的特定问题。
有了@react-native-community/hooks
您可以使用useAppState
钩来检查应用程序的状态。
当您关闭应用程序时,它会在unknown
您重新打开它时处于状态。当在后台时,它说background' or 'inactive'. So when it's
未知`你知道应用程序正在从关闭状态打开,而不是最小化或在后台打开。
作为一个简单的方法,我们可以在根组件中使用 componentWillUnmount()来检测应用程序是否关闭。因为根组件只有在应用程序关闭时才卸载。:)