React Native - Как определить, нажата домашняя кнопка или нет?

Question

Я могу знать, когда сцена на экране, используя следующий код:

this.subs = [
   this.props.navigation.addListener('didFocus', this.loadOfflineData)
];

Но, если я хочу определить, когда сцена не в фокусе.Мне интересно, что мне делать.

По сути, я хочу определить, нажал ли пользователь кнопку «Домой», а затем выполнить какое-либо действие.

Любые предложения.

Answer 1

Я сделал это с Android и Java, используя жизненный цикл Android.Это должно работать в React Native (см. EDIT ниже).форум developer.android.com: эта страница

Вкратце:

• onCreate (): пользователь впервые открывает ваше приложение
• onStart (): приложение перезапускается
• onResume (): пользователь открывает ваше приложение, когда оно было активным в фоновом режиме
• onPause (): приложение выходит из фокуса
• onStop (): приложение больше не видно
• onDestroy (): действие будет уничтожено

InВ вашем случае вы должны использовать onPause ()

Итак, небольшой фрагмент кода для в java:

@Override
public void onPause() {
    super.onPause();

//do something

}

EDIT:

Thisответ рассказывает, как обнаружить onPause и onResume в Reacte 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>
     );
   }

 }

Answer 2

Вы можете использовать AppState , чтобы узнать, когда приложение помещается в фоновый режим.

AppState может сообщить вам, находится ли приложение на переднем или заднем плане, и уведомит вас об изменении состояния.

Вот простой пример использования AppState:

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!');
    } else {
      console.log('App has gone to the background!');
      // start your background task here
    }
    this.setState({appState: nextAppState});
  };

  render() {
    return <Text>Current state is: {this.state.appState}</Text>;
  }
}