reactjs - 如何在 React Native 中为推送通知添加点击操作

Question

我想在点击远程推送通知后导航到特定的应用程序屏幕。我如何通过 native react 来实现这一点。我正在使用 react-native-push-notification 库

Answer 1

react-native-push-notification 有一个 on Notification press 处理程序 -> onNotification ，每次用户按下或收到通知时都会调用它(这来自 react-native-push-notification 文档)。在应用程序中，您创建一个 NavigationService 组件，该组件使用 App.js 文件中设置的顶级导航器引用。使用此导航器，在 onNotification 回调中，您可以导航到应用程序中的任何屏幕，并将收到的通知数据用于您的目的，这些数据可以通过导航器(处于其状态)传递到导航屏幕。一些伪代码可能如下所示:

NotificationService.js:

import NavigationService from './NavigationService';
import PushNotification from "react-native-push-notification";

PushNotification.configure({
    onNotification: function(notification) {
        const { data } = notification;

        NavigationService.navigate('Screen', { notificationData: data });
    }
});

导航服务.js:

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
    _navigator = navigatorRef;
}

function navigate(routeName, params) {
    _navigator.dispatch(
        NavigationActions.navigate({
            routeName,
            params,
        })
    );
}

编辑:您还必须创建一个 AppContainer，(这放置在您的 App.js 中)

 import { createSwitchNavigator } from 'react-navigation';
 import { createAppContainer } from 'react-navigation';

 const AppContainer = createAppContainer(createSwitchNavigator({...Screens}));

 export default class App extends React.Component {
     ...
     render() {
          return (
               <View>
                    <AppContainer ref={ (navigatorRef) => { NavigationService.setTopLevelNavigator(navigatorRef); } } />
               </View>
          )

     }
 }