Reaguj Natywnie, cykl życia i nawigacja Android

Question

Tworzymy aplikację React Native, która używa redux-persist do przechowywania stanu aplikacji, w tym stanu nawigacji. Chciałbym, aby ta aplikacja zachowywała się jak natywna aplikacja pod względem nawigacji:

Gdy natywna aplikacja na Androida przechodzi w tło, zostaje zatrzymana przez system operacyjny, a następnie przeniesiona na pierwszy plan, zostanie wznowiona w Aktywność, w której użytkownik wcześniej przerwał. Jeśli ta sama aplikacja zostanie zabita przez użytkownika (lub awarię), otworzy się przy głównej aktywności.

Dla aplikacji RN oznacza to, że redux-persist powinien się utrzymywać i przywracać stan nawigacji w componentWillMount aplikacji, ale tylko wtedy, gdy aplikacja nie została zabita przez użytkownika.

Poniższy kod działa:

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

Ale wygląda hackish i ja też nie rozumiem, dlaczego zakres globalny przeżyje.

Jaki jest właściwy sposób wykrywania, czy aplikacja RN została ponownie otwarta z tła? (Najlepiej przy wsparciu iOS)

Answer 1

Należy spojrzeć na AppState który jest interfejs API, który zapewnia react-native

sprawdzić ten przykład:

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

@ odpowiedź semirturgay jest jeden sposób, aby nie wykryć pozostawiając Aplikacja. W przypadku Androida lepiej jest wykryć domowe lub ostatnie kliknięcia przycisków aplikacji. Dzieje się tak dlatego, że fragmenty aplikacji z innych aplikacji, takich jak media społecznościowe lub zdjęcia, również powodują stan tła, którego nie chcesz, ponieważ są nadal w aplikacji, dodając zdjęcie do profilu z aparatu itp. Możesz łatwo wykryć dom i ostatnie kliknięcia przycisku aplikacji na Androidzie z react-native-home-pressed. Ta biblioteka po prostu wyświetla zdarzenia przycisków na Androidzie.

Najpierw zainstaluj bibliotekę z npm i react-native-home-pressed --save, a następnie połącz ją z react-native link. Następnie przebuduj aplikację i dodaj poniższy fragment.

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