单击推送通知时，React本机应用程序进入后台

Question

App is running in foreground. Then I got push notification. After I tapped on that push notification, My app status changes foreground to background. Then It comes to back to foreground.

I use OneSignal dashboard to send a sample push notification. This happens in Android app.

componentDidMount() {
        // One signal notification settings
        OneSignal.configure();
        OneSignal.setLogLevel(5, 0); // adb logcat debug (5) logs
        OneSignal.init('xxxxxxxxxxxx');
        OneSignal.inFocusDisplaying(2);
        OneSignal.addEventListener('ids', this.onIds);
        OneSignal.getPermissionSubscriptionState((status) => {
            if(status.userId)
                // update userID using props
    });
    }

onIds = (device) => {
    const userId = device.userId;
    if(userId)
       // update userID using props

    OneSignal.removeEventListener('ids', this.onIds);
}

I couldn't find out how this happened. I want to stop this app status change when I tap on a push notification. Please tell me some has any idea about this issue.

lib versions,

react-native-onesignal: 3.2.11
react-native: 0.57.4
react: 16.6.0-alpha.8af6728

Answer 1

I think you should use "AppState" to specify when to show push notification and after clicking push notification what should be "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!')
    }
    this.setState({appState: nextAppState});
  }

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

}

for more info this