React-Native 在按下通知后导航

Question

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

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

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

我们尝试在 notifee.onBackgroundEvent() 中使用 useNavigation()，但我们不断收到无效挂钩调用。当我们尝试通过函数将导航作为属性传递时，它 returns 未定义。

当应用处于 closed/killed

时，我们希望在用户按下通知后将用户导航到某个页面

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

React-Native 在按下通知后导航

React-Native navigate after a notification press

javascript

reactjs

react-native

react-navigation

index.js

RESTnotification.js