如何使用react-native-firebase/messaging(FCM)在从栏点击通知后打开应用程序到特定页面?

vaqhlq81  于 2023-04-07  发布在  React
关注(0)|答案(3)|浏览(219)

是否有任何方法可以打开应用程序到特定页面后,通过使用react-native-firebase/messaging(FCM)点击通知?
我没有找到document的信息。
@react-native-firebase版本:

"@react-native-firebase/app": "^15.3.0",
    "@react-native-firebase/messaging": "^15.3.0",

代码仅:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useEffect} from 'react';
import {Alert, StyleSheet, Text, View} from 'react-native';

import messaging from '@react-native-firebase/messaging';
import styles from '../css/styles';

let fcmUnsubscribe = null;

function Notify(props) {
  useEffect(() => {
    const unsubscribe = messaging().onMessage(async remoteMessage => {
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
    });

    return unsubscribe;
  }, []);
  return (
    <View style={styles.sectionContainer}>
      <Text style={styles.highlight}>{props.test}</Text>
    </View>
  );
}

export default Notify;
dnph8jn4

dnph8jn41#

我使用一种非标准的方法,关于如何在我的应用程序中增强FCM功能。您有remoteMessage,您可以通过它发送通知的有效负载......在这个有效负载中,我把应用程序所需的一切都放在上面,并将其与|例如。所以我的remoteMessage字符串是这样的:

  • 向用户显示一些文本通知|页打开|页的部分位置|其他自定义数据需要 *

然后在通知警告框中显示此之前,我首先将其解析为数组或几个变量,然后仅将此字符串中与通知文本相关的部分发送到显示器,其他变量用于打开特定页面或其他一些东西。
类似这样的东西(这是JS,因为它是第一次复制你,但类似的适用于RN)

messaging.onBackgroundMessage(function(payload) {
    var notificationTitle = payload.data.title;
    var notificationBody = payload.data.body.substring(0, payload.data.body.indexOf("|"));
    var notificationURL = payload.data.body.split("|")[1];
    var notificationStatusURL = payload.data.body.split("|")[2];
iaqfqrcu

iaqfqrcu2#

你可以像下面这样做

useEffect(() => {
    const unsubscribe = messaging().onMessage(async remoteMessage => {
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
if (remoteMessage?.data?.screen_name) {
        navigation.navigate(remoteMessage?.data?.screen_name)
    };
    });

    return unsubscribe;
  }, []);

注意,请检查您的函数是否包含在导航容器中,否则您可以使用useNavigation钩子
并检查screen_name param与您从firebase发送的参数名

xxhby3vn

xxhby3vn3#

你可以使用这个代码片段。所以基本的当导航容器准备好的时候,你就可以改变或者替换导航了。

导航文件-即使在非React Native组件上也可以使用此类函数

import {StackActions} from '@react-navigation/native';
import {createNavigationContainerRef} from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef();
  function changeNavigation(name, params) {
      if (navigationRef.isReady()) {
        navigationRef.navigate(name, params);
      }
    }

通知监听器文件

const onNotificationReceived = data => {
  if (!data) return;
  const {screen = null, ...rest} = data;
  if (screen) {
    changeNavigation(screen, {...rest});
  }
};

messaging().onNotificationOpenedApp(remoteMessage => {
    console.log('Notification caused app to open from background state:');
    onNotificationReceived(remoteMessage.data);
  });

导航提供商

<NavigationContainer ref={navigationRef} onReady={onContainerReady}>
      <AppNavigation />
    </NavigationContainer>

相关问题