React Native, жизненный цикл Android и навигация

Мы создаем приложение React Native, которое использует keepx-persist для хранения состояния приложения, включая состояние навигации. Я бы хотел, чтобы это приложение вел себя как родное приложение с точки зрения навигации:

Когда собственное приложение для Android переходит в фоновый режим, оно в конечном итоге останавливается ОС и затем перемещается на передний план, оно возобновляется в Activity, в котором пользователь ранее остановился. Если одно и то же приложение будет убито пользователем (или сбоем), оно откроется в основном мероприятии.

Для приложения RN это означает, что функция reducex-persist должна сохраняться и восстанавливать состояние навигации в компоненте componentWillMount приложения, но только если приложение не было убито пользователем.

Работает следующий код:

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

Но он выглядит хакерским, и я также не понимаю, почему глобальная область выживает.

Каков правильный способ определить, было ли повторно открыто приложение RN из фона? (в идеале с поддержкой iOS)

Ответы

Ответ 1

Вы должны взглянуть на AppState, который является api, предоставленным react-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>
    );
  }

}

Ответ 2

@semirturgay ответ - один из способов обнаружить выход из приложения. Для Android лучше обнаружить домашние или недавние щелчки кнопки приложения. Это связано с тем, что фрагменты в вашем приложении из других приложений, таких как социальные медиа или фотографии, также запускают фоновое состояние, которое вам не нужно, потому что они все еще находятся в приложении, добавляя фотографию в профиль из камеры и т.д. Вы можете легко обнаружить дом и последние нажатия кнопки приложения на Android с react-native-home-pressed. Эта библиотека просто выдает события андроидной кнопки.

Сначала установите библиотеку с 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()
  }
}