如何使用 One Signal 在 React Native 中打开通知时导航屏幕? [英] How to navigate screen on notification open in React Native with One Signal?

问题描述

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

componentWillMount() {OneSignal.addEventListener('received', this.onReceived);OneSignal.addEventListener('opened', this.onOpened);OneSignal.addEventListener('注册', this.onRegistered);OneSignal.addEventListener('ids', this.onIds);OneSignal.inFocusDisplaying(2);OneSignal.requestPermissions({警报:真实，徽章:真实，声音:真实});}componentWillUnmount() {this.isUnmounted = true;OneSignal.removeEventListener('received', this.onReceived);OneSignal.removeEventListener('opened', this.onOpened);OneSignal.removeEventListener('注册', this.onRegistered);OneSignal.removeEventListener('ids', this.onIds);}onReceived(通知){console.log("收到通知:", 通知);}onOpened(openResult) {//在这里我想导航到另一个屏幕而不是主屏幕this.isNotification = true;让数据 = openResult.notification.payload.additionalData;让 inFocus = openResult.notification.isAppInFocus;console.log('Message:', openResult.notification.payload.body);console.log('数据:', openResult.notification.payload.additionalData);console.log('isActive: ', openResult.notification.isAppInFocus);console.log('openResult: ', openResult);}onRegistered(notifData) {console.log("设备已注册推送通知！", notifData);}onIds(设备){尝试 {AsyncStorage.setItem("@SC:deviceInfo", JSON.stringify(device));} 捕捉(错误){控制台日志(错误)；}}

有没有人知道这一切，React Native + OneSignal + React Navigation + Redux.请帮忙！

解决方案

要实现所需的行为，您可以做几件事.您可以手动检查路由器的通知和状态，并在必要时将用户重定向到屏幕，或者您可以使用 深度链接功能.

要使用深层链接，请将 url 参数附加到发送时您的通知.要将用户定向到您应用中的正确屏幕，您可以使用 react-navigation 深层链接 功能.

<块引用>

来自一个信号文档

url 字符串 当用户点击通知.示例:http://www.google.com

注意:iOS 需要 https 或 plist 中更新的 NSAppTransportSecurity

<小时><块引用>

来自 React 导航文档

深层链接

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

Here is my code, how can I navigate user to the desired screen when clicked on a notification or button in a notification.

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

Do anyone have knowledge about all this, React Native + OneSignal + React Navigation + Redux. Please help!

解决方案

To achieve the desired behavior you can do couple of things. You can manually check the notification and state of the router and if its necessary redirect the user to the screen or you can use the Deep Linking functionality.

To use Deep Linking you attach 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 functionality.

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.

这篇关于如何使用 One Signal 在 React Native 中打开通知时导航屏幕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！