Question

我们正在构建一个React Native应用程序，它使用redux-persist来存储应用程序状态，包括导航状态。我希望这个应用程序在导航方面表现得像本机应用程序：

当原生Android应用程序进入后台时，最终会被操作系统停止，然后移动到前台，它将在用户之前停止的活动中恢复。如果同一个应用程序被用户杀死（或崩溃），它将在主Activity上打开。

对于RN应用程序，这意味着redux-persist应该保持并恢复应用程序的componentWillMount中的导航状态，但前提是该应用程序未被用户杀死。

以下代码有效：

componentWillMount() {
  if (global.isRelaunch) {
    // purge redux-persist navigation state
  }
  global.isRelaunch = true;
...

但它看起来很乱，我也不明白为什么全球范围仍然存在。

检测RN应用程序是否从后台重新打开的正确方法是什么？（理想情况下支持iOS）

Answer 1

您应该查看由react-native

提供的AppState api

检查这个例子：

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>
    );
  }

}

Answer 2

@ semirturgay的回答是一种检测离开应用程序的方法。对于Android，检测家庭或最近的应用按钮点击更好。这是因为您的应用中来自社交媒体或照片等其他应用的片段也会触发背景状态，这是您不想要的，因为他们仍然在应用中将照片添加到相机的配置文件等。您可以轻松使用react-native-home-pressed检测Android上的主页和最近的应用按钮点击次数。这个库只是暴露了android按钮事件。

首先使用npm i react-native-home-pressed --save安装库，然后将其链接到react-native link。然后重建您的应用并添加以下代码段。

＆＃13;

import { DeviceEventEmitter } from 'react-native'

class ExampleComponent extends Component {
  componentDidMount() {
    this.onHomeButtonPressSub = DeviceEventEmitter.addListener(
     'ON_HOME_BUTTON_PRESSED',
     () => {
       console.log('You tapped the home button!')
    })
    this.onRecentButtonPressSub = DeviceEventEmitter.addListener(
     'ON_RECENT_APP_BUTTON_PRESSED',
     () => {
       console.log('You tapped the recent app button!')
    })
  }
   componentWillUnmount(): void {
    if (this.onRecentButtonPressSub)   this.onRecentButtonPressSub.remove()
    if (this.onHomeButtonPressSub) this.onHomeButtonPressSub.remove()
  }
}

＆＃13;

React Native，Android生命周期和导航

2 个答案: