React native 区分快速导航选项卡中的滑动和单击导航

为了更好地了解用户是如何使用我们的应用程序的，我们希望在用户滑动到下一个选项卡时触发一个事件到analytics，如果用户单击导航到下一个选项卡，则触发另一个事件

这些选项卡是使用

createMaterialTopTabNavigator

从

react导航选项卡创建的

const SwipeableTabs = createMaterialTopTabNavigator(
  {
    Tab1,
    Tab2,
    Tab3,
  },
  { 
    swipeEnabled: true, 
  }
);

我已尝试侦听以下事件，但有效负载不包含有关用户导航方式的任何信息（滑动vs单击）

this.props.navigation.addListener（'didFocus'，payload=>console.log（payload））

有没有办法知道用户是否刷卡或单击，以便我可以向analytics触发相应的事件？
您可以尝试向选项卡栏添加一个按键侦听器，如前所述

演示代码如下所示：

const MyTabs = TabNavigator({
  ...
}, {
  tabBarComponent: TabBarBottom /* or TabBarTop */,
  tabBarPosition: 'bottom' /* or 'top' */,
  navigationOptions: ({ navigation }) => ({
    tabBarOnPress: (scene, jumpToIndex) => {
      console.log('onPress:', scene.route);
      jumpToIndex(scene.index);
    },
  }),
});

现在，您只需在
选项卡baronpress
函数中设置一个标志，并在
didFocus
侦听器中检查它。如果该标志已设置，则您知道它是通过选项卡栏按下的，否则它必须是一次滑动。请注意，这假设您没有在自己的某个地方手动设置选项卡。但是如果您这样做，您也可以在这个press处理程序中设置标志