Question

伙计们，所以我已经尝试将推送通知实施到我的react-native项目了将近2周。这个想法是，如果该人不在聊天室中（应用程序中有聊天室），那么另一个用户的消息将通过推送通知发送并存储到接收器设备上的本地存储中。

我通过firebase实现了推送通知服务，因为实际上每个人都说它超级简单，等等。当通知进入退出状态时，我想使用React-Redux将通知分发到我的reducer等问题。借助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应用程序中，当我使用香草Redux API终止应用程序时，我将其分发到Redux商店，因为setBackgroundMessageHandler不是无法访问Redux提供程序的React组件或挂钩：< / p>

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
};

卡在React-Native推送通知中

2 个答案: