如何检测 React Native 应用程序何时关闭（未暂停）？

Posted 2023-03-31

【中文标题】如何检测 React Native 应用程序何时关闭（未暂停）？

【英文标题】：How to detect when a React Native app is closed (not suspended)?

【发布时间】：2016-08-15 19:50:39

【问题描述】：

我到处找，找不到答案。我如何检测用户何时尝试关闭我的 React Native 应用程序（因为进程正在运行，他们手动管理他们的应用程序并强制退出它）。发生这种情况时，我想添加注销功能，但是找不到检测方法。 AppState 似乎只检测应用程序何时进入和退出后台。

【问题讨论】：

也在寻找解决方案。到目前为止，您有什么发现吗？

嘿，你找到解决办法了吗？？

有解决办法吗？

不幸的是还没有，下面 user888750 的回答是我们最接近的 atm

4年了，还没解决？？

【参考方案1】：

看起来您可以检测上一个状态并将其与下一个状态进行比较。从我在网上可以找到的内容中，您无法检测到应用程序正在关闭或进入后台，但您可以检测到它是 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>
    );
  

【讨论】：

感谢您的回复，但不幸的是，这会检测应用程序何时处于后台或被带到前台，而不是关闭

这根本不能回答问题。您可以做到这一点，您只需要使用 3rd 方库。查看 react-native-queue 了解更多信息：github.com/billmalarky/…

非活动状态仅适用于 ios。在此处检查每个平台的所有可用状态：reactnative.dev/docs/appstate

【参考方案2】：

我建议使用web socket，它会帮助你解决你的问题，如下：

反应原生应用

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

【参考方案3】：

刚刚遇到同样的问题。接受的答案实际上并没有按照 OP 中的要求执行。

一个 hacky 的解决方案是在应用程序刚打开时打开的第一个屏幕上设置一个标志，而在应用程序刚刚进入后台时不显示该屏幕。

不是很优雅，我无法显示示例代码，但它解决了我的特定问题。

【参考方案4】：

使用@react-native-community/hooks，您可以使用useAppState 挂钩检查应用状态。

当您关闭应用程序时，一旦您再次打开它，它就会获得unknown 的状态。当处于后台时，它会显示 background' or 'inactive'. So when it's unknown` 您知道应用程序正在从关闭、未最小化或在后台打开。

【参考方案5】：

作为一个简单的方法，我们可以在根组件中使用componentWillUnmount()来检测应用是否关闭。因为根组件仅在应用关闭时卸载。 :)

【讨论】：

此解决方案不起作用，因为用户终止应用时不会调用componentWillUnmount。

你确定吗？因为我只是再次检查它并且它有效。 （注意：我的意思是 App.js 文件中的 componentWillUnmount 方法）:)

您是否点击了应用切换器然后滑动以终止应用？据我所知，无法知道应用程序何时被用户终止，正如您在this link

中看到的那样