web-dev-qa-db-fra.com

React Native, le cycle de vie Android et la navigation

Nous construisons une application native React qui utilise redux-persist pour stocker l'état de l'application, y compris l'état de navigation. J'aimerais que cette application se comporte comme une application native en termes de navigation:

Lorsqu'une application Android native passe en arrière-plan, est finalement arrêtée par le système d'exploitation, puis déplacée au premier plan, elle reprend dans l'activité où l'utilisateur l'avait précédemment laissée. Si la même application est supprimée par l'utilisateur (ou par un crash), elle s'ouvrira lors de l'activité principale.

Pour une application RN, cela signifie que redux-persist doit persister et restaurer l'état de navigation dans le composantWillMount de l'application, mais uniquement si l'application n'a pas été supprimée par l'utilisateur.

Le code suivant fonctionne:

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

Mais cela a l'air malicieux et je ne comprends pas non plus pourquoi la portée mondiale survit.

Quelle est la bonne façon de détecter si une application RN a été rouverte à partir de l'arrière-plan? (idéalement avec support iOS)

javascriptreact-nativereact-native-androidredux-persist
11
sAm_vdP

Vous devriez jeter un coup d’œil à AppState qui est une api fournie par react-native 

vérifiez cet exemple: 

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

}
3
semirturgay

La réponse de @ semirturgay est un moyen de détecter le fait de quitter l'application. Pour Android, il est bien mieux de détecter les clics sur les boutons d’applications d'origine ou récentes. En effet, des fragments au sein de votre application provenant d'autres applications telles que les médias sociaux ou les photos vont également déclencher un état d'arrière-plan, ce que vous ne souhaitez pas car ils sont toujours dans l'application, ajoutant une photo à un profil depuis l'appareil photo, etc. et le bouton de l'application récente clique sur Android avec react-native-home-pressé . Cette bibliothèque expose simplement les événements de bouton Android. 

Commencez par installer la bibliothèque avec npm i react-native-home-pressed --save, puis reliez-la react-native link. Reconstruisez ensuite votre application et ajoutez l'extrait suivant. 

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

0
evanjmg