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

Roox спросил: 28 апреля 2018 в 08:58 в: react-native

Я создаю простое приложение для ознакомления с адаптивным 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'); работают очень хорошо, а consoleprint 'background mode'

, но

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

2 ответа

agent_hunt ответил: 28 апреля 2018 в 09:13

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

Roox ответил: 28 апреля 2018 в 09:27
Я слушаю AppState в методе componentDidMount, например, реагирую на собственный документ для AppState, как я могу убедиться, что слушатель AppState зарегистрирован?
agent_hunt ответил: 28 апреля 2018 в 09:30
Возможно добавить его в App.js. Что вы используете для государственного управления?
Roox ответил: 28 апреля 2018 в 09:34
Я использую реакцию-родное состояние типа this.setState () или this.state и не использую управление состоянием, например, redux
agent_hunt ответил: 28 апреля 2018 в 09:43
Можете ли вы опубликовать свой основной файл?
agent_hunt ответил: 28 апреля 2018 в 10:46
Ой. Это огромная. Вам необходимо проверить фоновое исполнение developer.apple.com/library/content/documentation/iPhone/... для iOS. Есть некоторые существующие собственные модули, которые это делают. github.com/transistorsoft/react-native-background-geolocation github.com/timfpark/react-native-location
ответил: 21 мая 2018 в 12:15

Я бы пошел на переключатель, который завершает весь endPointnote: для получения статуса 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');
  }
}