13

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

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

对于一个 RN 应用，这意味着 redux-persist 应该在应用的 componentWillMount 中持久化并恢复导航状态，但前提是应用没有被用户杀死。

以下代码有效：

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

但它看起来很骇人听闻，我也不明白为什么全局范围仍然存在。

检测 RN 应用程序是否从后台重新打开的正确方法是什么？（最好有 iOS 支持）

4

2 回答 2

3

你应该看看AppState这是一个由提供的 apireact-native

检查这个例子：

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

}
于 2017-10-26T12:15:40.910 回答
0

@semirturgay 的回答是检测离开应用程序的一种方法。对于 Android，最好检测主页或最近的应用程序按钮点击。这是因为您的应用程序中来自其他应用程序（如社交媒体或照片）的片段也会触发背景状态，这是您不希望的，因为它们仍在应用程序中，将照片从相机添加到个人资料等。您可以轻松检测到家最近的应用程序按钮在 Android 上点击react-native-home-pressed。这个库只是公开了 android 按钮事件。

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

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

于 2018-02-25T14:49:09.860 回答