android - 当应用程序被杀死或在后台反应本机时如何显示 FCM 推送通知？

Question

我正在使用 react-native-FCM 并尝试显示来自其余客户端的通知，当应用程序处于前台并触发我想要显示通知数据的屏幕但当应用程序处于后台或被杀死时，它工作正常它不会触发通知屏幕。所以，我想知道当应用程序被杀死或在后台时如何触发应用程序通知屏幕。在此先感谢。任何帮助将不胜感激。这是我的代码：

主页.js

    import React, { Component } from 'react';
    import {
      Platform,
      StyleSheet,
      Text,
      View
    } from 'react-native';

    import FCM,{FCMEvent,RemoteNotificationResult,WillPresentNotificationResult,NotificationType,NotificationActionType,NotificationActionOption,NotificationCategoryOption} from "react-native-fcm";

    let data=[];
    FCM.on(FCMEvent.Notification, async(notify)=>{
      if(notify.local_notification){
        //this is a local notification
      }
      if(notify.opened_from_tray){

            navigation.navigate('TargetScreenPage')


      }
      if(Platform.OS==='android'){
        switch(notify.NotificationType){
          case NotificationType.Remote:
          notify.finish(
            RemoteNotificationResult.NewData  
          )                   
          break;
          case NotificationType.NotificationResponse:
          notify.finish();
          break;
          case NotificationType.WillPresent:
          notify.finish(WillPresentNotificationResult.All)
          break;
        }           
      }
    });
    FCM.on(FCMEvent.RefreshToken,(token)=>{
      console.log(token);
    })



    export default class HomePage extends Component {


      constructor(props){
        super(props);
        this.state={
          totalTarget: null,
          targetAchieved:null,
          message:null,
          notificationsType:null,
          extraMessage:null,
          token:null
        }
      }

      componentDidMount () {
         const { navigate } = this.props.navigation;
        FCM.requestPermissions().then(()=>console.log('granted')).catch(()=>console.log('notification permission'))

        FCM.getFCMToken().then(token=>{
          console.log(token)
          this.setState({token:token})
        });

        this.notificationListener = FCM.on(FCMEvent.Notification, async(notify)=>{
          this.setState({
            totalTarget:notify.totalTarget,
            targetAchieved:notify.targetAchieved,
            message:notify.message,
            notificationsType:notify.notificationsType,
            extraMessage:notify.extraMessage
          })
      navigate("TargetScreenPage",{message:this.state.message,extraMessage:this.state.extraMessage})
        })

        FCM.getInitialNotification().then(notify=>{
          console.log("notification-----"+ JSON.stringify(notify))

        })
      }

      componentWillUnmount(){
        this.notificationListener.remove();           
      }

      render() {
        return (
          <View style={styles.container}>
           {/* <Text style={styles.instructions}>
              {this.state.token}
            </Text> */}
             <Text style={styles.instructions}>
              {this.state.totalTarget}
            </Text>
            <Text style={styles.instructions}>
              {this.state.targetAchieved}
            </Text>

             <Text style={styles.instructions}>
              {this.state.message}
            </Text>
            <Text style={styles.instructions}>
              {this.state.notificationsType}
            </Text>
         <Text style={styles.instructions}>
              {this.state.extraMessage}
            </Text>

          </View>                                                       
        );
      }
    }
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 40,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        fontSize:40,
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
        flexDirection:'row'
      },              
    });

和 TargetScreen.js

import React, { Component } from 'react';
import {ImageBackground,
  Platform,StyleSheet,BackHandler,Image,TouchableOpacity,Text,StatusBar,View} from 'react-native';
import { Header,Right} from 'native-base';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class TargetScreen extends Component {

    handleCrossButtonClick() {
        this.props.navigation.goBack(null);
        return true;
    }                      

  render() {
    const { params } = this.props.navigation.state;
    return (
    <View style={{flex:1,backgroundColor: '#fff'}}>
    <StatusBar hidden = {true} />
    <Header style={{ backgroundColor: "#fff" ,justifyContent:'center',alignItems:'center'}}>
        <Image style={{height:45,width:90,resizeMode: "stretch",marginLeft:95}} source={require('./images/salesLineLogo.jpg')} />
        <Right>      
        <TouchableOpacity onPress={()=>this.handleCrossButtonClick()}>
        <Image style={{height:25,width:25,resizeMode: "stretch"}} source={require('./images/cross.png')}/>      
        </TouchableOpacity></Right>               
     </Header>        
     <View style={{flex:0.5,justifyContent:'center',alignItems: 'center'}}>
    <ImageBackground source={require('./images/up-arrow.png')} style={{ resizeMode: "stretch",height: 95, width: 95,justifyContent:'center',alignItems:'center' }} >
    <Text style={{fontSize:20}}>8</Text></ImageBackground>
    <Text style={{fontSize:20,marginTop:25}}>{params.message}</Text>
    </View>
    <View style={{flex:0.5,justifyContent:'center',alignItems:'center'}}>
    <ImageBackground source={require('./images/up-arrow.png')} style={{ resizeMode: "stretch",height: 95, width: 95,justifyContent:'center',alignItems:'center'}} >
    <Text style={{fontSize:20}}>8</Text></ImageBackground> 
    <Text style={{fontSize:20,marginTop:25}}>{params.extraMessage}</Text>
    </View></View>               
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});