React Native - 如何在推送通知点击时进行导航？

Question

我正在使用react-native-push-notification. 当应用在后台或关闭状态时，我遇到了通知未显示的问题，在多个论坛和GitHub上的解决方案是我们在 index.js 中初始化和配置推送通知 (PushNotification.configure()). 在PushNotification.configure()函数内部，onNotification ()是在点击推送通知时被调用的函数。当用户点击通知时，我想导航到应用程序中的特定屏幕，但由于index.js中没有可用的导航属性，因此目前不可能实现。 是否有任何方法可以使导航成为可能?

- Fullmetal

---

你使用的导航库是什么？你确定你使用的那个不支持深度链接/路径吗？如果支持，只需将路径作为URL发送，传递给导航库，（假设你正确配置了所有内容），那么一切都会自动处理/路径解析。 （参考：react-navigation已经支持） - Can Poyrazoğlu

我尝试了深度链接选项。当应用程序处于被杀死的状态，并且点击推送通知时，应用程序会启动闪屏界面，然后导航到预期的屏幕。但是，我的闪屏界面还有一些重定向逻辑，因此在此过程中可能会导航到多个屏幕。你对此有什么建议？ - Fullmetal

我曾经遇到过非常类似的问题。通过重构我的应用程序，将整个路径解析逻辑传递给导航容器来解决它。通过使用一个包装器，根据Redux状态（在我的情况下是已登录与未登录）返回正确的导航容器，我让适当的导航容器处理链接。 - Can Poyrazoğlu

这个解决方案需要使用 Redux 吗？ - Fullmetal

不，那只是我的情况。这个想法是拥有某种状态（redux或其他），分割导航容器（例如非登录流程与已登录屏幕），将数据传递给适当的导航容器，并传递链接逻辑以处理任何链接并路由到适当的屏幕。 - Can Poyrazoğlu

Answer 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...

  }
})

您可以在此处查看文档获取更多明确的信息： 不使用导航属性进行导航

- Owais ul wara

---

我认为这不会起作用，因为当通知到达时，onNotification将被触发，并且即使没有点击通知，它也会导航。 - Sami Ullah

Answer 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>
  );

- Bogdan Kyrychuk

---

我尝试了上面的方法，但是我收到了这个错误消息 ->“找不到导航对象。你的组件是否在 NavigationContainer 中？”，有什么最好的解决方法吗？ - Luke Irvin