reactjs - React Native - 如何从推送通知打开路线

标签 reactjs react-native push-notification react-navigation

我正在使用react-navigationreact-native-push-notification。如何在 onNotification 回调中打开某个 StackNavigator 屏幕?应该在以下情况下工作:

  • 应用程序已关闭
  • 应用程序位于前台
  • 应用程序在后台运行

我现在只需要它在 Android 中运行。

我尝试将回调函数传递给组件中的通知:

_handleClick() {
  PushNotification.localNotification({
    foreground: false
    userInteraction: false
    message: 'My Notification Message'
    onOpen: () => { this.props.navigation.navigate("OtherScreen") },
  })
}

并在 PushNotification 配置中触发 onOpen:

onNotification: function(notification) {
   notification.onOpen()
}

但似乎函数无法传递给通知,除非值是一个被忽略的字符串,导致 onOpen 未定义。

最佳答案

好吧,看来我得发布我自己的解决方案了:)

// src/services/push-notification.js
const PushNotification = require('react-native-push-notification')

export function setupPushNotification(handleNotification) {
  PushNotification.configure({

      onNotification: function(notification) {
        handleNotification(notification)
      },

      popInitialNotification: true,
      requestPermissions: true,
  })

  return PushNotification
}


// Some notification-scheduling component
import {setupPushNotification} from "src/services/push-notification"

class SomeComponent extends PureComponent {

  componentDidMount() {
    this.pushNotification = setupPushNotification(this._handleNotificationOpen)
  }

  _handleNotificationOpen = () => {
    const {navigate} = this.props.navigation
    navigate("SomeOtherScreen")
  }

  _handlePress = () => {
    this.pushNotification.localNotificationSchedule({
      message: 'Some message',
      date: new Date(Date.now() + (10 * 1000)), // to schedule it in 10 secs in my case
    })

  }

  render() {
    // use _handlePress function somewhere to schedule notification
  }

}

关于reactjs - React Native - 如何从推送通知打开路线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47308089/

相关文章:

reactjs - 如何设置 react 表过滤器输入字段的样式?

reactjs - Electron 无框浏览器窗口无法完全删除Mac上的整个框架/标题栏

javascript - 使用 React 进行多个 AJAX 请求

iphone - 为什么 iPhone 收不到推送通知?

javascript - Azure IoT 推送通知

android - OneSignal - 单击推送后无法打开 Activity

php - 使用 Webpack Express 和 React 进行服务器端渲染

javascript - 如何正确使用 ReactNative FlatList ScrolltoIndex?

react-native - @React-native-community/react-native-device-info : NativeModule. RNDeviceInfo 为空。要解决此问题,请执行以下步骤: *Run 'react-native link

react-native - React Native 限制 TextInput 中的行