Question

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

这些标签是使用createMaterialTopTabNavigator中的react-navigation-tabs创建的。

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

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

this.props.navigation.addListener('didFocus', payload => console.log(payload))

是否有任何方法可以知道用户是轻扫还是点击，以便可以向分析触发适当的事件？

Answer 1

您可以尝试按照here的说明在标签栏上添加新闻监听器。

演示代码如下：

export $e

现在，您只需在const MyTabs = TabNavigator({ ... }, { tabBarComponent: TabBarBottom /* or TabBarTop */, tabBarPosition: 'bottom' /* or 'top' */, navigationOptions: ({ navigation }) => ({ tabBarOnPress: (scene, jumpToIndex) => { console.log('onPress:', scene.route); jumpToIndex(scene.index); }, }), });函数中设置一个标志，然后在tabBarOnPress侦听器中检查它即可。如果已设置该标志，则可以通过按选项卡栏来知道它，否则必须是滑动。请注意，这是假设您没有在自己的某个地方手动设置选项卡。但是，如果这样做，您也可以在该新闻处理程序中设置该标志。

tabBarOnPress docs

区分反应导航中选项卡中的滑动和单击导航

1 个答案: