React native - 如何导航推送通知点击？答案

【问题标题】：React native - How to navigate on Push notification click?React native - 如何导航推送通知点击？
【发布时间】：2021-09-08 08:10:30
【问题描述】：

我正在使用 react-native-push-notification。当应用程序处于后台/终止状态时，我遇到了通知不显示的问题，多个论坛和 GitHub 中的解决方案是我们在 index.js 中初始化和配置推送通知 (PushNotification.configure()) 在 PushNotification.configure() 函数内部， onNotification() 是点击推送通知时调用的函数。单击时，我想导航到应用程序中的特定屏幕，但目前无法实现，因为 index.js 中没有可用的导航道具

有什么方法可以实现导航吗？

【问题讨论】：

你用的是什么导航库？您确定您使用的不支持深层链接/路径吗？如果是这样，只需将路径作为 URL 发送，将其传递给导航库，并且（假设您配置正确）您一切顺利，因为所有处理/路径解析都将自动完成。（作为参考，react-navigation 有）
我尝试了深度链接选项。当应用程序处于终止状态并单击推送通知时，应用程序会以启动屏幕启动，然后导航到预期屏幕。但是，我的启动画面也有一些重定向逻辑，因此，在此过程中会导航到多个屏幕。您对此有何建议？
我实际上有一个非常相似的问题。通过重构我的应用程序以将整个路径解析逻辑传递给导航容器来解决它。通过使用基于 redux 状态（登录与未登录在我的情况下）返回正确导航容器的包装器，我让适当的导航容器处理链接。
这个解决方案需要 redux 吗？
不，这只是我的情况。这个想法是拥有 某种状态（redux 或其他），拆分导航容器（例如，未登录的流程与登录的屏幕）将数据传递到适当的导航容器，并将链接逻辑传递给处理任何链接并路由到相应的屏幕。

标签： reactjs react-native react-native-android react-native-ios react-native-push-notification

【解决方案1】：

这是你可以做的。首先，您可以从 NavigationContainer 所在的文件中初始化和导出 navigationRef。

// App.js
    
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}
    
export default function App() {
  return (
        <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
  );
}

然后你可以将它导入到你有PushNotification.configure()的地方

// notification-service.js

import PushNotification from 'react-native-push-notification';
import { navigationRef } from './App';

/* Your other code */

PushNotification.configure({
  onNotifications: (notification) => {
  
  // Now you'll have access to the navigation object's function here...

  }
})

您可以从此处的文档中获得更清晰的信息： navigating-without-navigation-prop

【讨论】：

【解决方案2】：

试试React Native Firebase

例子：

import React, { useState, useEffect } from 'react';
import messaging from '@react-native-firebase/messaging';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  const navigation = useNavigation();
  const [loading, setLoading] = useState(true);
  const [initialRoute, setInitialRoute] = useState('Home');

  useEffect(() => {
    // Assume a message-notification contains a "type" property in the data payload of the screen to open

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

    // Check whether an initial notification is available
    messaging()
      .getInitialNotification()
      .then(remoteMessage => {
        if (remoteMessage) {
          console.log(
            'Notification caused app to open from quit state:',
            remoteMessage.notification,
          );
          setInitialRoute(remoteMessage.data.type); // e.g. "Settings"
        }
        setLoading(false);
      });
  }, []);

  if (loading) {
    return null;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={initialRoute}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );

【讨论】：