Question

我需要在应用启动和关闭时跟踪一些日志事件（仅一次）。

首先我在Home屏幕componentDiMount()中执行此操作，但在某些情况下会多次实例化，从而导致重复的启动事件日志。

===============编辑=================

AppState只能收听背景和有效事件。

在Android上关闭应用时（按后退键或在最近的应用菜单中关闭），它实际上会回到背景。重新打开应用时，它会将应用从后台恢复为有效。这与在背景和有效之间切换应用相同（不关闭）

所以我无法使用AppState确定首次启动或切换应用状态

Answer 1

使用AppState。

来自Official 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>
    );
  }

}

或者您可以使用ComponentDidMount()和ComponentDidUnMount()

Answer 2

应用启动时

通常，带有空依赖项数组的 useEffect 就是您要查找的内容。

在 React Native 中，代码可以在应用状态未激活时运行，但具有空依赖项数组的 useEffect 将在应用首次启动时运行。

如果您使用依赖项值，则可以使用 useRef 来跟踪它是否在首次应用启动时得到处理。

const onLaunchRef = React.useRef<boolean>();

useEffect(() => {
  if (onLaunchRef.current) {
    return;
  }
  doSomething(state1, state2);
  onLaunchRef.current = true;
}, [state1, state2]);

您可以将其与 useAppState 结合使用：

import { useAppState } from '@react-native-community/hooks'

const onLaunchRef = React.useRef<boolean>();
const appState = useAppState();

useEffect(() => {
  if (onLaunchRef.current) {
    return;
  }
  if (appState !== 'active') {
    return;
  }
  doSomething(state1, state2);
  onLaunchRef.current = true;
}, [state1, state2, appState]);

在应用关闭时

您可以使用以下内容：

useEffect(() => {
  return () => {
    doSomething(state1, state2);
  };
}, [state1, state2]);

或者使用useAppState：

const appState = useAppState();
useEffect(() => {
  if (appState !== 'active') {
    doSomething();
  }
}, [appState]);

然而，实际的关闭事件在 React Native 中并不存在。这个问题处理起来有点棘手。

如何在React Native中收听应用启动和关闭？

2 个答案:

应用启动时

在应用关闭时