Question

我正在使用"data_points" : [ { "user_id" : 11, "rev" : 1, "device_id" : "7", **"Meat" : "Fish", //position = 1 "Veg" : "Mushroom" //position = 2 "Bread" : "Yes",** //position = 3 } ]和react-navigation。如何在react-native-push-notification回调中打开某个StackNavigator's屏幕？应该在以下时间工作：

应用已关闭
app位于前台
app在后台

我现在只需要在Android上工作。

我尝试将回调函数传递给组件中的通知：

onNotification

在_handleClick() { PushNotification.localNotification({ foreground: false userInteraction: false message: 'My Notification Message' onOpen: () => { this.props.navigation.navigate("OtherScreen") }, }) }配置中点击onOpen：

PushNotification

但似乎函数无法传递给通知，除非值是一个被忽略的字符串，导致onNotification: function(notification) { notification.onOpen() }未定义。

Answer 1

好的，似乎我必须发布自己的解决方案：）

// src/services/push-notification.js
const PushNotification = require('react-native-push-notification')

export function setupPushNotification(handleNotification) {
  PushNotification.configure({

      onNotification: function(notification) {
        handleNotification(notification)
      },

      popInitialNotification: true,
      requestPermissions: true,
  })

  return PushNotification
}


// Some notification-scheduling component
import {setupPushNotification} from "src/services/push-notification"

class SomeComponent extends PureComponent {

  componentDidMount() {
    this.pushNotification = setupPushNotification(this._handleNotificationOpen)
  }

  _handleNotificationOpen = () => {
    const {navigate} = this.props.navigation
    navigate("SomeOtherScreen")
  }

  _handlePress = () => {
    this.pushNotification.localNotificationSchedule({
      message: 'Some message',
      date: new Date(Date.now() + (10 * 1000)), // to schedule it in 10 secs in my case
    })

  }

  render() {
    // use _handlePress function somewhere to schedule notification
  }

}

Answer 2

我在Firebase的官方网站上找到了这个解决方案，这似乎是最好的示例/示例工作。以下是示例代码段以及链接。希望对别人有帮助。

import React, { useState, useEffect } from 'react';
import messaging from '@react-native-firebase/messaging';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  const navigation = useNavigation();
  const [loading, setLoading] = useState(true);
  const [initialRoute, setInitialRoute] = useState('Home');

  useEffect(() => {
    // Assume a message-notification contains a "type" property in the data payload of the screen to open

    messaging().onNotificationOpenedApp(remoteMessage => {
      console.log(
        'Notification caused app to open from background state:',
        remoteMessage.notification,
      );
      navigation.navigate(remoteMessage.data.type);
    });

    // Check whether an initial notification is available
    messaging()
      .getInitialNotification()
      .then(remoteMessage => {
        if (remoteMessage) {
          console.log(
            'Notification caused app to open from quit state:',
            remoteMessage.notification,
          );
          setInitialRoute(remoteMessage.data.type); // e.g. "Settings"
        }
        setLoading(false);
      });
  }, []);

  if (loading) {
    return null;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={initialRoute}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

链接：https://rnfirebase.io/messaging/notifications#handling-interaction

Answer 3

由于我的解决方案与使用RN-firebase V6的上述答案之一略有不同，因此我以id的身份发布了针对该问题的解决方案。我的解决方案略有不同，该解决方案适用于react-native-firebase v5.x的通知处理：

react-native-firebase

React Native - 如何从推送通知打开路线

3 个答案: