[英]React-Native navigate after a notification press
我和一位同事已经在 React-Native 应用程序上工作了一段时间。 我们已经为此问题苦苦挣扎了几天,但似乎没有找到合适的解决方案。
我们正在使用一些依赖项来完成这项工作。
我们已经尝试在 notifee.onBackgroundEvent() 中使用 useNavigation() 但我们不断收到一个无效的钩子调用。 当我们尝试通过函数将导航作为属性传递时,它返回 undefined。
当应用程序关闭/终止时,我们希望在用户按下通知后将用户导航到一个页面
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);
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();
我们是否忽略了什么?
在启动时,您不能使用钩子 useNavigation,因为它还没有构建。
对于这种用例,您需要使用不同的方法,即深层链接: https : //reactnavigation.org/docs/deep-linking 。
基本流程是您需要在通知数据上添加路径(例如 myapp://user/profile)并将通知处理程序移动到深层链接配置中。
有关实际示例,您可以查看本教程: https : //medium.com/cybermonkey/deep-linking-push-notifications-with-react-navigation-5fce260ccca2
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.