如何在React Native中使用One Signal打开通知后导航到屏幕？

Question

这是我的代码，当用户点击通知或通知中的按钮时，我该如何将他们导航到所需的屏幕。

componentWillMount() {
    OneSignal.addEventListener('received', this.onReceived);
    OneSignal.addEventListener('opened', this.onOpened);
    OneSignal.addEventListener('registered', this.onRegistered);
    OneSignal.addEventListener('ids', this.onIds);

    OneSignal.inFocusDisplaying(2);
    OneSignal.requestPermissions({
        alert: true,
        badge: true,
        sound: true
    });
}

componentWillUnmount() {
    this.isUnmounted = true;

    OneSignal.removeEventListener('received', this.onReceived);
    OneSignal.removeEventListener('opened', this.onOpened);
    OneSignal.removeEventListener('registered', this.onRegistered);
    OneSignal.removeEventListener('ids', this.onIds);
}

onReceived(notification) {
    console.log("Notification received: ", notification);
}

onOpened(openResult) { // HERE I WANT TO NAVIGATE TO ANOTHER SCREEN INSTEAD OF HOME SCREEN
    this.isNotification = true;

    let data = openResult.notification.payload.additionalData;
    let inFocus = openResult.notification.isAppInFocus;

    console.log('Message: ', openResult.notification.payload.body);
    console.log('Data: ', openResult.notification.payload.additionalData);
    console.log('isActive: ', openResult.notification.isAppInFocus);
    console.log('openResult: ', openResult);
}

onRegistered(notifData) {
    console.log("Device had been registered for push notifications!", notifData);
}

onIds(device) {
    try {
        AsyncStorage.setItem("@SC:deviceInfo", JSON.stringify(device));
    } catch (error) {
        console.log(error);
    }
}

有人了解这些内容吗，React Native + OneSignal + React Navigation + Redux。请帮帮忙！

- Abid

Answer 1

为了实现所需的行为，您可以做一些事情。您可以手动检查路由器的通知和状态，如果必要，将用户重定向到屏幕，或者您可以使用 深度链接 功能。

在发送通知时，您可以附加 url 参数来使用深度链接。为了将用户引导到应用程序中的正确屏幕，您可以使用 react-navigation 深度链接 功能。

来自 One Signal 文档

url 字符串 用户单击通知时在浏览器中打开的 URL。例如：http://www.google.com

注意：iOS 需要 https 或在 plist 中更新 NSAppTransportSecurity。

---

来自React Navigation文档

深层链接

在本指南中，我们将设置应用程序以处理外部URI。让我们从我们在入门指南中创建的SimpleApp开始。在这个例子中，我们希望像mychat://chat/Taylor这样的URI打开我们的应用程序，并直接链接到Taylor的聊天页面。

- bennygenel

---

我使用React Native和OneSignal制作了一个应用程序。我能够接收来自OneSignal的通知，但如果应用程序未运行并且收到推送通知，则单击推送通知无法导航到所需屏幕。请为此问题提供解决方案。如何解决？我在我的应用程序中使用Route-Flux进行路由。当应用程序正在运行并且收到通知时，这不是问题。 - Mukesh Kumar

@CrazyDeveloper，react-native-router-flux尚未实现深度链接功能。要使用上述技术，您需要实现react-native Linking API。 - bennygenel

谢谢你的回复。所以应用程序没有在后台运行，当我点击通知时应用程序会打开。应用程序如何知道它是通过点击推送通知打开的呢？谢谢。 - Mukesh Kumar

使用OneSignal，您可以发送自定义URL以在通知激活时打开，例如mychat://chat/Taylor。您可以监听该URL并解析参数，然后将用户重定向到正确的屏幕。 - bennygenel

感谢您指引我找到解决方案。我之前不知道 React Native 中链接可以监听，这真是个很酷的东西。 - Mukesh Kumar

Answer 2

当onOpened被触发时，您可以发送一个NavigationAction或执行navigate操作。以下代码段应该可以工作：

componentWillMount() {
    OneSignal.inFocusDisplaying(0);
    OneSignal.removeEventListener('opened', this.onOpened.bind(this));
    OneSignal.addEventListener('opened', this.onOpened.bind(this));
  }

onOpened(openResult) {
    let data = openResult.notification.payload.additionalData;
    // ScreenName is the name of the screen you defined in StackNavigator
    this.props.navigation.navigate('ScreenName', data)
}

- Mostafiz Rahman

---

"您要发送哪些信息？我不太明白您的问题。" - Mostafiz Rahman

感谢您的回复！我的意思是，您如何发送路由信息，是这样的吗：当您向OneSignal分派推送通知时，使用{route: 'HOME'}？还是在发送时必须称其为“additionalData”？当您到达onOpened时 - 路由信息是如何到达那里的？ - Sara Inés Calderón

你可以在导航路线上发送数据，我已经更新了我的答案。这解决了你的问题吗？ - Mostafiz Rahman

没错。推送是从服务器发送的，附加数据作为有效载荷一同发送。 - Mostafiz Rahman

检查 OneSignal p2p 通知：https://documentation.onesignal.com/docs/react-native-sdk#section-post-notification-peer-to-peer-notifications- - Mostafiz Rahman

Answer 3

在寻找解决方案时，我看到了这个问题，并且我认为大部分答案现在都已经过时了。因此，如果有人正在寻找解决方案，可以尝试这个方法。

OneSignal.setNotificationOpenedHandler((notificationResponse) => {
      const { notification } = notificationResponse;
      if (notification) {
        const { additionalData = null } = notification;
        if (additionalData) {
          const { type } = additionalData;
          navigateToScreen(type);
        }
      }
    });

 const navigateToScreen = (type) => {
    switch (type) {
      case "post":
      case "track":
        navigation.navigate("SinglePost");
        return;
      default:
        return;
    }
  };

- sakshya73

Answer 4

如果有人遇到类似的问题，我想补充一下@Mostafiz Rahman所说的。我正在开发的应用程序中有许多嵌套的堆栈和选项卡（react-navigation v1）在抽屉里，如果Stack1被后台化，而通知是针对Stack2的，我无法让它们跳来跳去。

最终，我按照Rahman先生描述的逻辑在每个堆栈的第一个屏幕上（Stack1的第一个屏幕，Stack2的第一个屏幕等等）放置了代码，这样就解决了问题！

- Sara Inés Calderón

---

我有一个问题，我正在开发两个应用程序，第一个是用户应用程序，第二个是供应商应用程序，在用户应用程序中，我编写了一些函数来发送订单并将其保存到实时数据库Firebase中，在第二个应用程序中，我只需使用监听器从数据库中检索数据以获取新订单作为实时数据而无需刷新应用程序，所以当我从用户应用程序发送订单到Firebase时，我想在第二个应用程序中显示通知？如何处理这些？ - DevAS