Question

我使用React Native制作简单的新闻通知应用程序。它只是在某些条件消息出现时向用户发送推送通知。

我首先制作了UI，以及基本功能。因此，有一些组件可以登录，注册和添加条件组件等。它运行良好。

最后，我想将Push Notification应用于我的应用，因此我使用 Firebase云消息传递（FCM）。幸运的是，它运作良好。当我请求发布一些数据（密钥头，令牌等）时，应用程序会成功接收推送通知。

但问题是，当我测试Push Notification到我的应用时，我只是按照示例来源。所以我不知道如何应用它我现有的应用程序。

应用程序看起来像，

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.js放在哪里？我认为PushController应该在后台执行，无论app是否正在运行。

PushController.js代码如下。

我不知道该组件的放置位置。把它放在哪里？请帮助我！

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

只要它保持挂载，放置PushController组件的位置无关紧要。事实上，你根本不需要特殊的组件，但你可以拥有它：）

如此简单的答案可能会被放入App。例如

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

唯一重要的是您通过FCM电话在应用启动时执行设备的正确注册。

将推送通知组件放在React Native中的位置

1 个答案: