React-Native: изменение состояния, когда приложение находится в фоновом режиме

Question

Я создаю простое приложение для знакомых с реагирующим родным AppState:

import React, {Component} from 'react'
import {AppState, Text , View} from 'react-native'


export default  class AppStateExample extends  React.Component {

constructor(props){
        super(props);
        this.state = {
            name:'not change'
        }
    }

    componentDidMount() {
        AppState.addEventListener('change', this._handleAppStateChange);
    }

    componentWillUnmount() {
        AppState.removeEventListener('change', this._handleAppStateChange);
    }

    _handleAppStateChange = (nextAppState) => {

        if(AppState.currentState=='background'){
            console.log('background mode');
            this.setState({name:'back'});
        }
        if(AppState.currentState =='active'){
            //...
        }
    };


    render() {
        return (
            <View>
                <Text>State Name : {this.state.name}</Text>
            </View>
        );
    }

}

, и когда я пытаюсь переключить приложение с переднего плана на фон, а затем с фона на передний план console.log('background mode'); очень хорошо работают и консольную печать 'background mode'

но

this.setState({name:'back'}); не работает, и я вижу 'not change' текст в поле зрения

Answer 1

Я бы пошел за переключателем, который переносит все примечания endPoint: чтобы получить статус appState AppState.currentState

this.state = {
  appState: AppState.currentState
  // https://facebook.github.io/react-native/docs/appstate.html
};


componentWillMount() {
  AppState.addEventListener('change', () => this._handleAppStateChange());
};


componentWillUnmount() {
  AppState.removeEventListener('change', () => this._handleAppStateChange());
}

_handleAppStateChange() {
  // https://facebook.github.io/react-native/docs/appstate.html
  const {
    appState
  } = this.state;
  console.warn({
    appState
  })

  this.fetchData().catch(error => error);

  switch (appState) {
    case 'active': //The app is running in the foreground
      this.onStart();
      break;
    case 'background': // The app is running in the background. The user is either
      this.onEnd();
      console.warn('background');
      break;

    case 'inactive':
      // The app transitioning between foreground & background or entering the Multitasking view or in the event of an incoming call
      console.warn('Inactive');
      break;

    default:
      console.warn('_handleAppStateChange default');
  }
}

Answer 2

Это потому, что AppState.addEventListener('change', this._handleAppStateChange); слишком поздно для регистрации.Возможно, вы захотите сначала прослушать AppState в вашем приложении до загрузки основных компонентов и передать значения, вероятно, вашей библиотекой управления состоянием