使用 Expo 响应导航 v3.x 和推送通知侦听器

Question

我正在使用react navigation v3 开发一个 React Native 项目（使用 Expo 完成）。所以，现在我决定启用实时push notifications provided by Expo。我的目标是与推送通知本身一起提交一些自定义数据，然后，一旦它进入设备并打开通知以将应用程序导航/路由/重定向到我定义的特定屏幕。我已经配置了通知，我得到了博览会令牌，我收到了通知，它进入 handler 但是当我尝试应用我在整个应用程序中使用的导航时：

this.props.navigation.navigate('RouteName', {data:{...}})

我得到未定义。我想我们不知何故不在反应导航的背景下，这就是为什么需要一些其他方法的原因。我只是不知道它是什么。

我的应用结构如下：

HomeStack.js

import { createStackNavigator } from 'react-navigation';

import HomeScreen from '../screens/HomeScreen'
import MailboxItemsScreen from '../screens/MailboxItemsScreen'
import MailboxItemDetailsScreen from '../screens/MailboxItemDetailsScreen'

export default createStackNavigator({
    Home: HomeScreen,
    MailboxItems: MailboxItemsScreen,
    MailboxItemDetails : MailboxItemDetailsScreen
});

SettingsStack.js

import { createStackNavigator } from 'react-navigation';

import SettingsScreen from '../screens/SettingsScreen'

export default createStackNavigator({
    Settings: SettingsScreen
});

AppNavigator.js

import React from 'react';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'

import HomeStack from './HomeStack'
import SettingsStack from './SettingsStack'

const TabNavigator = createBottomTabNavigator({
    Home: {
        screen: HomeStack,
        navigationOptions: {
            tabBarIcon:({tintColor})=>(
              <Icon name="ios-home" color={tintColor} size={24}/>
            )
        }
      },
    Settings: {
        screen: SettingsStack,
        navigationOptions: {
            tabBarIcon:({tintColor})=>(
              <Icon name="ios-settings" color={tintColor} size={24}/>
            )
        }
      }
});

export default createAppContainer(TabNavigator);

然后我在我的 App.js 中使用 TabNavigator。这是很常见的结构，我只是不知道如何在我的推送通知处理程序方法中进行屏幕之间的导航。

Answer 1

您可能已经在根组件的构造函数或 componentDidMount() 中添加了一个监听器，如下所示： Notifications.addListener(this._handleNotifications)

正如博览会文件所说，您尝试导航到 _handleNotifications 函数中的其他屏幕。

在我的例子中，虽然导航结构与你的略有不同，但我在 HomeScreen 的 componentDidMount() 添加了侦听器，并在 HomeScreen 组件中定义了 _handleNotifications 函数，而不是在根组件 (App.js) 中。

我的 `_handleNotifications 函数的简要版本如下：

_handleNotifications = async (notification) => {
  const {a, b, c} = notification.data;
  const {origin} = notification;

  if (origin === 'selected') {
    this.props.navigation.push('History', { 
      a, 
      b, 
      c, 
    })
  } else { // origin is 'received'
    // show notification at the top of my app instead of navigate to other screen
  }
} 

如果用户按下通知，则通知将传递到我的应用程序的 _handleNotifications 函数，并且由于原点被“选中”，我使用从 notification.data 接收的参数推送到另一个名为“历史”的屏幕。 就我而言，这非常有效。

由于 Android 和 iOS 的行为略有不同，事件处理程序应该做更多的工作。 我用 Expo v32.0.0 实现了它并响应导航 3.x.x。

希望这会有所帮助。