web-dev-qa-db-fra.com

React Native - Comment ouvrir une route à partir d'une notification Push

J'utilise react-navigation et react-native-Push-notification. Comment puis-je ouvrir un certain StackNavigator's écran dans onNotification rappel? Devrait fonctionner lorsque:

  • l'application est fermée
  • l'application est au premier plan
  • l'application est en arrière-plan

Je n'en ai besoin que de travailler dans Android pour l'instant.

J'ai essayé de passer une fonction de rappel à la notification dans mon composant:

_handleClick() {
  PushNotification.localNotification({
    foreground: false
    userInteraction: false
    message: 'My Notification Message'
    onOpen: () => { this.props.navigation.navigate("OtherScreen") },
  })
}

Et pour lancer onOpen dans PushNotification config:

onNotification: function(notification) {
   notification.onOpen()
}

Mais il semble que les fonctions ne peuvent pas être passées à la notification, sauf si une valeur est une chaîne ignorée, ce qui fait que onOpen n'est pas défini.

reactjsreact-nativepush-notificationreact-navigation
13
Jacka

D'accord, il semble que je dois poster ma propre solution :)

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

}
7
Jacka

J'ai trouvé cette solution sur le site officiel de Firebase et cela semble être le meilleur exemple/exemple de travail pour cela. Vous trouverez ci-dessous l'exemple d'extrait et le lien ci-joint. J'espère que cela aidera les autres.

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

Lien: https://rnfirebase.io/messaging/notifications#handling-interaction

1
Anmol Sharma