按下通知后 React-Native 导航

Question

我和一位同事开发 React-Native 应用程序已经有一段时间了。 我们已经为这个问题苦苦挣扎了几天，似乎没有找到合适的解决方案。

我们正在使用一些依赖项来完成这项工作。

• 通知 (https://notifee.app/)
• React-native Firebase (https://rnfirebase.io/)
• 反应导航 (https://reactnavigation.org/)

我们已尝试在 notifee.onBackgroundEvent() 中使用 useNavigation()，但我们不断收到 Invalid hook 调用。当我们尝试通过函数将导航作为属性传递时，它返回 undefined。

当应用关闭/终止时，我们希望在用户按下通知后将用户导航到页面

index.js

import {AppRegistry} from 'react-native';
import React, {useEffect, useState} from 'react';
import messaging from '@react-native-firebase/messaging';
import App from './App';
import {name as appName} from './app.json';
import getNotification from './src/services/RESTnotification';
import notifee, {EventType} from "@notifee/react-native";
import {useNavigation} from "@react-navigation/native";

messaging().setBackgroundMessageHandler(async remoteMessage => {
    await getNotification();
});

notifee.onBackgroundEvent(async ({type, detail}) => {
    const {notification, pressAction} = detail;

    if (type === EventType.PRESS) {
        console.log('User pressed an action with the id: ', pressAction.id);
        // navigate here
    }
    await notifee.cancelNotification(notification.id);
    console.log('background-event');
});

AppRegistry.registerComponent(appName, () => App);

RESTnotification.js

import messaging from '@react-native-firebase/messaging';
import notifee, {AndroidImportance, EventType} from "@notifee/react-native";
import AsyncStorage from "@react-native-community/async-storage";
import React from "react";

async function requestUserPermission() {
    const authStatus = await messaging().requestPermission();
    const enabled =
        authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
        authStatus === messaging.AuthorizationStatus.PROVISIONAL;
    if (enabled) {
        console.log('Firebase authorization:', authStatus);
    }
}

export const checkToken = async () => {
    const fcmToken = await messaging().getToken();
    if (fcmToken) {
        console.log(fcmToken);
    }
    await AsyncStorage.setItem("fcmToken", fcmToken);
}

export default async function getNotification() {
    const channelId = await notifee.createChannel({
        id: 'important',
        name: 'Important Notifications',
        importance: AndroidImportance.HIGH,
    });

    await notifee.displayNotification({
        title: '<p><b>Verandering bij proces: {naam}</span></p></b></p>',
        body:
            '{user} heeft het proces {procesnaam} afgekeurd',
        data: {
            processId: '12345678'
        },
        android: {
            channelId: 'important',
            importance: AndroidImportance.HIGH,
            smallIcon: "ic_notification",
            //largeIcon: require('../../assets/images/apple-touch-icon.png'),
            pressAction: {
                id: 'default',
                launchActivity: 'default'
            },
        },
    });
}

checkToken();
requestUserPermission();

我们是否忽略了什么？

Answer 1

在启动时你不能使用钩子 useNavigation 因为它还没有构建。

对于这种用例，您需要使用不同的方法，即深层链接：https://reactnavigation.org/docs/deep-linking。

基本流程是您需要在通知数据上添加路径（例如 myapp://user/profile）并将通知处理程序移动到深度链接配置中。

有关实际示例，您可以查看本教程：https://medium.com/cybermonkey/deep-linking-push-notifications-with-react-navigation-5fce260ccca2