React Native - рендер, когда приложение выходит на передний план

Question

У меня есть простой дисплей, основанный на некоторых данных асинхронного ввода.

Мой код как таковой:

componentDidMount() { 
    asynFunctionCall(result => { 
    this.setState({stateVariable: result}); 
    }); 
} 

И я использую состояние переменной stateVariable, чтобы решить, будет ли или не показывать <Text> компонент:

render() { 
    return (
    <View> 
     {this.state.stateVariable && 
     <Text> Special Message </Text> 
     } 
    </View> 
); 
} 

То, что я хочу, чтобы asyncFunctionCall быть запускаться всякий раз, когда приложение выходит на передний план, чтобы пользователь мог покинуть приложение, сделать что-то (что может повлиять на результат этого асинхронного вызова) и вернуться в приложение и соответствующим образом обновить дисплей.

Это похоже на стандартное поведение приложения, и мне интересно, поддерживает ли API жизненного цикла React Native стандартный способ его поддержки, но я не нахожу его.

Как добиться такого поведения, с помощью функции жизненного цикла или иным образом?

Answer 1

Да. вы можете использовать API AppState https://facebook.github.io/react-native/docs/appstate.html.

Я бы предложил добавить это где-нибудь в начале приложения и соответствующим образом скопировать ваши представления.

Answer 2

AppState должен работать в основном для iOS, но для Android фоновая активность запускается в любое время, когда запускается собственный модуль вне вашего собственного кода, например, захват фотографии. Лучше всего обнаружить домашние или недавние щелчки кнопки приложения. Это связано с тем, что фрагменты в вашем приложении из других приложений, таких как социальные медиа или фотографии, также запускают фоновое состояние, которое вам не нужно, потому что они все еще находятся в приложении, добавляя фотографию в профиль из камеры и т. Д. Вы можете легко обнаружить дом и недавняя кнопка приложения нажимает на Android с разрешением-native-home-press. Эта библиотека просто выдает события андроидной кнопки.

Сначала установите библиотеку с npm i react-native-home-pressed --save, а затем соедините ее react-native link. Затем переустановите приложение и добавьте следующий фрагмент.

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