Различать навигацию смахивания и щелчка по вкладкам в реагирующей навигации

Question

Чтобы лучше понять, как наши пользователи используют наше приложение, мы хотим вызвать событие для аналитики, когда пользователь переходит к следующей вкладке, и другое событие, если пользователь щелкает, чтобы перейти к следующей вкладке.

Вкладки создаются с createMaterialTopTabNavigator из react-navigation-tabs.

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

Я пытался прослушать следующее событие, но полезная нагрузка не содержит никакой информации о том, как пользователь перемещался (смахивание против щелчка).

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

Есть ли способ узнать, нажал ли пользователь или щелкнул, чтобы я мог запустить соответствующее событие для аналитики?

Answer 1

Вы можете попробовать добавить прослушиватель для прессы на панель вкладок, как описано здесь .

Демо-код выглядит так:

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 и проверить его в вашем didFocus слушателе. Если флаг был установлен, то вы знаете, что это было через нажатие панели вкладок, в противном случае это должен быть удар Обратите внимание, что это предполагает, что вы не устанавливаете вкладку вручную где-то самостоятельно. Но если вы это сделаете, вы можете просто установить флаг в этом обработчике прессы.

tabBarOnPress docs