admin管理员组文章数量:1323348
We are building a React Native app that uses redux-persist to store the app state, including the navigation state. I would like for this app to behave like a native app in terms of navigation:
When a native Android app goes into the background, is eventually stopped by the OS and is then moved into the foreground, it will resume in the Activity where the user previously left off. If the same app is killed by the user (or a crash), it will open at the main Activity.
For a RN app, this means that redux-persist should persist and restore the navigation state in the ponentWillMount of the app, but only if the app was not killed by the user.
The following code works:
ponentWillMount() {
if (global.isRelaunch) {
// purge redux-persist navigation state
}
global.isRelaunch = true;
...
But it looks hackish and I also do not understand why the global scope survives.
What is the proper way to detect whether an RN app was re-opened from the background? (ideally with iOS support)
We are building a React Native app that uses redux-persist to store the app state, including the navigation state. I would like for this app to behave like a native app in terms of navigation:
When a native Android app goes into the background, is eventually stopped by the OS and is then moved into the foreground, it will resume in the Activity where the user previously left off. If the same app is killed by the user (or a crash), it will open at the main Activity.
For a RN app, this means that redux-persist should persist and restore the navigation state in the ponentWillMount of the app, but only if the app was not killed by the user.
The following code works:
ponentWillMount() {
if (global.isRelaunch) {
// purge redux-persist navigation state
}
global.isRelaunch = true;
...
But it looks hackish and I also do not understand why the global scope survives.
What is the proper way to detect whether an RN app was re-opened from the background? (ideally with iOS support)
Share Improve this question asked Oct 26, 2017 at 12:07 sAm_vdPsAm_vdP 3312 silver badges7 bronze badges2 Answers
Reset to default 3You should take a look to AppState which is an api that provided by react-native
check this example:
import React, {Component} from 'react'
import {AppState, Text} from 'react-native'
class AppStateExample extends Component {
state = {
appState: AppState.currentState
}
ponentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
ponentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = (nextAppState) => {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
console.log('App has e to the foreground!')
}
this.setState({appState: nextAppState});
}
render() {
return (
<Text>Current state is: {this.state.appState}</Text>
);
}
}
@semirturgay's answer is one way to do detect leaving the app. For Android, it is way better to detect home or recent app button clicks. This is because fragments within your app from other apps like social media or photos will also trigger background state, which you don't want because they are still in the app adding a photo to a profile from the camera etc. You can easily detect home and recent app button clicks on Android with react-native-home-pressed. This library simply exposes the android button events.
First install the library with npm i react-native-home-pressed --save
and then link it react-native link
. Then rebuild your app and add the following snippet.
import { DeviceEventEmitter } from 'react-native'
class ExampleComponent extends Component {
ponentDidMount() {
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!')
})
}
ponentWillUnmount(): void {
if (this.onRecentButtonPressSub) this.onRecentButtonPressSub.remove()
if (this.onHomeButtonPressSub) this.onHomeButtonPressSub.remove()
}
}
本文标签: javascriptReact Nativethe Android lifecycle and navigationStack Overflow
版权声明:本文标题:javascript - React Native, the Android lifecycle and navigation - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742131542a2422182.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论