リアクションネイティブにプッシュ通知コンポーネントを配置する場所

Question

リアクションネイティブの簡単なニュース通知アプリケーションを作成しています。特定の状態のニュースが出たときにユーザーにプッシュ通知を送信するだけです。

私は最初にUIを作りました。ログイン、登録、条件コンポーネントの追加など、いくつかのコンポーネントがあり、うまく動作します。

最後に私のアプリにPush Notificationを適用したいので、Firebase Cloud Messaging（FCM）を使用します。それはうまくいくのです。いくつかのデータ（キーヘッダー、トークンなど）で投稿をリクエストすると、アプリはプッシュ通知を正常に受信します。

しかし、問題は、私がPush Notificationを私のアプリケーションにテストすると、私はちょうどサンプルソースに従っています。だから私はそれを私の存在するアプリに適用する方法を知らない。

アプリはどこPushController.jsを置くために、この時点で

export default class App extends Component { 
    render() { 

     return (

      <Provider store={configureStore()}> 
       <MenuContext> 
        <Router> 
         <Scene key="root"> 
          <Scene key="login" hideNavBar component={LoginComponent} initial/> 
          <Scene key="register" hideNavBar component={RegisterComponent}/> 
          <Scene key="resetPassword" hideNavBar component={ResetPasswordComponent}/> 
          <Scene key="main" tabs 
            tabBarStyle={{ top: 72, height: 76, backgroundColor: API.SECOND_COLOR, borderColor: API.BORDER_COLOR, borderBottomWidth: 1}} 
            tabBarSelectedItemStyle={{ marginBottom: -1, height: 76, borderBottomWidth: 4, borderBottomColor: API.FIRST_COLOR }} 
          > 
           <Scene key="newsConditionsList" title="First Tab" iconName="alarm" icon={TabIcon}> 
            <Scene key="scarlet" component={TabComponent1} hideNavBar initial/> 
           </Scene> 
           <Scene key="news" title="Second Tab" iconName="chat" icon={TabIcon}> 
            <Scene key="scarlet2" component={TabComponent2} hideNavBar initial/> 
           </Scene> 
           <Scene key="settings" title="Third Tab" iconName="settings" icon={TabIcon}> 
            <Scene key="scarlet3" component={TabComponent3} hideNavBar initial/> 
           </Scene> 
          </Scene> 
          <Scene key="addCondition" title="Add Todo" component={AddConditionComponent} hideNavBar/> 
          <Scene key="room" title="In Room" component={RoomComponent} hideNavBar/> 

         </Scene> 
        </Router> 
       </MenuContext> 
      </Provider> 
     ); 
    } 
} 

、のように見えますか？私はPushControllerは、アプリケーションが実行されているかどうかをバックグラウンドで実行する必要があります。

PushController.jsコードは以下のとおりです。

私はこのコンポーネントをどこに置くべきかわかりません。それをどこに置くの？私を助けてください！あなたがいる限り、それがマウントされたままになりますようごPushControllerコンポーネントを置く場所

import React, { Component } from "react"; 

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

import firebaseClient from "./FirebaseClient"; 

export default class PushController extends Component { 
    constructor(props) { 
     super(props); 
    } 

    componentDidMount() { 
     FCM.requestPermissions(); 

     FCM.getFCMToken().then(token => { 
      console.log("TOKEN (getFCMToken)", token); 
      this.props.onChangeToken(token); 
     }); 

     FCM.getInitialNotification().then(notif => { 
      console.log("INITIAL NOTIFICATION", notif) 
     }); 

     this.notificationListner = FCM.on(FCMEvent.Notification, notif => { 
      console.log("Notification", notif); 
      if(notif.local_notification){ 
       return; 
      } 
      if(notif.opened_from_tray){ 
       return; 
      } 

      if(Platform.OS ==='ios'){ 
       //optional 
       //iOS requires developers to call completionHandler to end notification process. If you do not call it your background remote notifications could be throttled, to read more about it see the above documentation link. 
       //This library handles it for you automatically with default behavior (for remote notification, finish with NoData; for WillPresent, finish depend on "show_in_foreground"). However if you want to return different result, follow the following code to override 
       //notif._notificationType is available for iOS platfrom 
       switch(notif._notificationType){ 
        case NotificationType.Remote: 
         notif.finish(RemoteNotificationResult.NewData) //other types available: RemoteNotificationResult.NewData, RemoteNotificationResult.ResultFailed 
         break; 
        case NotificationType.NotificationResponse: 
         notif.finish(); 
         break; 
        case NotificationType.WillPresent: 
         notif.finish(WillPresentNotificationResult.All) //other types available: WillPresentNotificationResult.None 
         break; 
       } 
      } 
      this.showLocalNotification(notif); 
     }); 

     this.refreshTokenListener = FCM.on(FCMEvent.RefreshToken, token => { 
      console.log("TOKEN (refreshUnsubscribe)", token); 
      this.props.onChangeToken(token); 
     }); 
    } 

    showLocalNotification(notif) { 
     FCM.presentLocalNotification({ 
      title: notif.title, 
      body: notif.body, 
      priority: "high", 
      click_action: notif.click_action, 
      show_in_foreground: true, 
      local: true 
     }); 
    } 

    componentWillUnmount() { 
     this.notificationListner.remove(); 
     this.refreshTokenListener.remove(); 
    } 


    render() { 
     return null; 
    } 
} 

Answer 1

それは問題ではありません。実際にあなたは特別なコンポーネントを必要としませんが、あなたはそれを持つことができます:)

あなたのAppにそれほど単純な答えが入れられるかもしれません。例えば。

<View> 
    <PushController /> 
    <Provider store={configureStore()}> 
    ... 
    </Provider> 
</View> 

だけ重要なことは、あなたがFCM呼び出しを介してアプリケーションの起動時にお使いのデバイスの適切な位置合わせを実行することです。