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

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。请帮忙！

Answer 1

要实现所需的行为，您可以做几件事。您可以手动检查路由器的通知和状态，如果有必要，将用户重定向到屏幕，或者您可以使用 Deep Linking 功能。

要使用深层链接，您需要附加 url parameter to your notification while sending it. To direct user to the correct screen in your app you can use react-navigation deep linking 功能。

From One Signal Documentation

url string The URL to open in the browser when a user clicks on the notification. Example: http://www.google.com

Note: iOS needs https or updated NSAppTransportSecurity in plist

From React Navigation Documentation

Deep Linking

In this guide we will set up our app to handle external URIs. Let's start with the SimpleApp that we created in the getting started guide. In this example, we want a URI like mychat://chat/Taylor to open our app and link straight into Taylor's chat page.

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)
}

Answer 3

如果其他人遇到与我类似的问题，我想补充一下@Mostafiz Rahman 所说的内容。我正在处理的应用程序在抽屉内有一堆嵌套的堆栈和选项卡 (react-navigation v1)，如果 Stack1 是后台的并且通知是针对 Stack2 我不能让他们跳来跳去。

我最终将 Rahman 先生所描述的逻辑放在堆栈的每个第一个屏幕中——[=11= 的第一个屏幕]、Stack2 的第一个屏幕等——并且做到了！

Answer 4

在寻找解决方案的过程中，我找到了这个问题，我认为大多数答案现在都已经过时了。所以，如果有人在寻找解决方案，可以试试这个。

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;
    }
  };

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

How to navigate screen on notification open in React Native with One Signal?

react-native

react-redux

react-navigation

onesignal