javascript - React-Native 在按下通知后导航

Question

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

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

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

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

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

索引.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

在启动时，您不能使用钩子(Hook) useNavigation，因为它还没有构建。

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

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

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