卡在 React-Native 推送通知中

Question

大家好，近 2 周以来，我一直在尝试向我的 react-native 项目实施推送通知。这个想法是，如果该人不在聊天室（聊天室存在于应用程序中），则其他用户的消息通过推送通知发送并存储到接收者设备上的本地存储中。

我通过 firebase 实现了推送通知服务，因为实际上每个人都说它超级简单等等。当我想在通知处于退出状态时使用 React-Redux 将通知发送到我的减速器等时，我的问题就出现了。由于 redux 和持久存储，我能够将消息保存到本地存储，但是当应用程序未打开时，我不知道如何实现这一点。

任何指南和帮助将不胜感激！

*PS 我什至将我的整个提供程序、reducer 等转移到我的 index.js 文件中，以便

messaging().setBackgroundMessageHandler(async remoteMessage => {
    console.log('Message handled in the background!', remoteMessage);
    dispatch({
      type: 'save_message',
      data: JSON.parse(remoteMessage.data.message)
    })
  });

可以访问提供程序以保存消息，但这仅在应用程序处于后台时有效，而在其处于退出状态时无效。我也在使用@react-native-firebase/messaging v7.8.3 和@react-native-firebase/app v8.4.1

Answer 1

在我的 React Native 应用程序中，当应用程序被使用 vanilla Redux API 杀死时，我调度到 Redux 商店，因为 setBackgroundMessageHandler 不是 React 组件或无法访问 Redux 提供程序的钩子：

setBackgroundMessageHandler.js：

import store from '../../redux/store';

const setBackgroundMessageHandler = async (remoteMessage) => {
store.dispatch({
      type: 'save_message',
      data: JSON.parse(remoteMessage.data.message)
    })
}

应用加载后，您的数据应从通知消息安全地发送到商店以供使用。

Answer 2

在反应原生推送通知中使用 REDUX

-->App.js

import { Configure } from './config/NotificationHandler'
const App = () => {

    return (
        <SafeAreaProvider>
            <StatusBar barStyle="dark-content" hidden={false} backgroundColor="#1A1A1A" translucent={true} />
            <Provider store={store} >
                <Configure />
                <View style={{ flex: 1 }} >
                    <AuthLoading />
                </View>
            </Provider>
        </SafeAreaProvider>
    )
}
export default App;

-->Notificationhandler.js

import React, { useEffect } from 'react';
import PushNotificationIOS from "@react-native-community/push-notification-ios";
import PushNotification from 'react-native-push-notification';
import AsyncStorage from '@react-native-community/async-storage';
import NavigationService from '../routing/NavigationService'
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

const Configure = () => {

  const { activeProject } = useSelector(state => ({
    activeProject: state.homeReducer.activeProject,
  }), shallowEqual);
  const dispatch = useDispatch();

  // Must be outside of any component LifeCycle (such as `componentDidMount`).
  PushNotification.configure({

    // (optional) Called when Token is generated (iOS and Android)
    onRegister: function (token) {
      console.log("RNPNonRegistertoken:", token);
      AsyncStorage.setItem('fcmToken', token.token);
    },

    // (required) Called when a remote is received or opened, or local notification is opened
    onNotification: function (notification) {
      console.log("NOTIFICATION:", notification, activeProject);

      // process the notification
      if (notification?.data?.url) {
        NavigationService.navigate('PDFScreen', { Key: 'URL', urlForPDF: notification.data.url })
      } else if (notification.id > 0 && notification.id < 7 && global.notifNavVar) {
        global.localPushID = notification.id
        NavigationService.navigate('AllTimersButton')
      } else if (notification.id == 7 && global.notifNavVarP) {
        NavigationService.navigate('ProjectDetail')
      }

      // (required) Called when a remote is received or opened, or local notification is opened
      notification.finish(PushNotificationIOS.FetchResult.NoData);
    },

    // (optional) Called when Registered Action is pressed and invokeApp is false, if true onNotification will be called (Android)
    onAction: function (notification) {
      console.log("ACTION:", notification.action);
      console.log("NOTIFICATION:", notification);

      // process the action
    },

    // (optional) Called when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. (iOS)
    // onRegistrationError: function(err) {
    //  console.error(err.message, err);
    // }, 

    // IOS ONLY (optional): default: all - Permissions to register.
    permissions: {
      alert: true,
      badge: true,
      sound: true,
    },

    largeIcon: "ic_launcher",
    smallIcon: "ic_launcher",

    // Should the initial notification be popped automatically
    // default: true
    popInitialNotification: true,

    /**
     * (optional) default: true
     * - Specified if permissions (ios) and token (android and ios) will requested or not,
     * - if not, you must call PushNotificationsHandler.requestPermissions() later
     * - if you are not using remote notification or do not have Firebase installed, use this:
     *     requestPermissions: Platform.OS === 'ios'
     */
  });

  return null

};

const LocalNotificationSchedule = (id, afterSec, message = '', title = '') => {
  PushNotification.localNotificationSchedule({
    //... You can use all the options from localNotifications
    id: id + '',
    title,
    message, // (required)
    date: new Date(Date.now() + afterSec * 1000), // in n secs
    playSound: true,
    // soundName: 'local_notification_custom_tone.mp3',
    vibrate: true,
    vibration: 180000,
    allowWhileIdle: true,
    visibility: "public",
    // soundName: 'default',
    showWhen: true,
    usesChronometer: true,
    ignoreInForeground: false,
    priority: "max",
  })
}

const CancelLocalNotifications = (id) => {
  PushNotification.cancelLocalNotifications({ id: id + '' })
}

// const LocalNotification = () => {
//   PushNotification.localNotification({
//     id: 0, // (optional) Valid unique 32 bit integer specified as string. default: Autogenerated Unique ID
//     autoCancel: true,
//     bigText: 'This is local notification demo in React Native app. Only shown, when expanded.',
//     subText: 'Local Notification Demo',
//     title: 'Local Notification Title',
//     message: 'Expand me to see more',
//     vibrate: true,
//     vibration: 300,
//     playSound: true,
//     soundName:'default',
//     actions: '["Yes", "No"]'
//   })
// }

export {
  Configure,
  LocalNotificationSchedule,
  CancelLocalNotifications,
  // LocalNotification
};