如何在 React Native 中添加用于推送通知的点击操作

Question

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

Answer 1

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

通知服务.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>
          )

     }
 }