坚持使用 React-Native 推送通知

Question

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

我通过 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不是一个无法访问 Redux 提供程序的 React 组件或钩子：

setBackgroundMessageHandler.js：

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

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

您的数据应该安全地从通知消息发送到应用程序加载后准备使用的商店。

Answer 2

在 React 原生推送通知中使用 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;

-->通知处理程序.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
};