Как добавить аналитику отслеживания экрана firebase с помощью React Native React Navigation при использовании createStackNavigator?

Question

У меня есть приложение React Native и я использую React Navigation. Теперь я пытаюсь добавить аналитику отслеживания экрана с помощью firebase.

Я следую этой документации , в которой есть этот пример кода:

import analytics from '@react-native-firebase/analytics';
import { NavigationContainer } from '@react-navigation/native';

<NavigationContainer
  ref={navigationRef}
  onStateChange={state => {
    const previousRouteName = routeNameRef.current;
    const currentRouteName = getActiveRouteName(state);

    if (previousRouteName !== currentRouteName) {
      analytics().setCurrentScreen(currentRouteName, currentRouteName);
    }

Однако в моем коде , Я создаю свою базу NavigationContainer с такой функцией:

export default createStackNavigator(
  {
    Home: MainTabNavigator,
    SignIn: SignInNavigator,
  },
  {
    transitionConfig: dynamicModalTransition,
    headerMode: 'none',
    initialRouteName: 'Home',
  },
);

Как лучше всего интегрировать код из примера?

Answer 1

Проблема в том, что вы используете response-navigation v4.xx, но у вас есть пример для v5.xx

В v4 прослушиватели событий могут быть добавлены на AppContainer.

Пример ниже для v4.

import React from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation';

function getActiveRouteName(navigationState) {
    if (!navigationState) {
      return null;
    }
    const route = navigationState.routes[navigationState.index];

    if (route.routes) {
      return getActiveRouteName(route);
    }
    return route.routeName;
}

const nav = createStackNavigator({...});

const AppContainer = createAppContainer(nav);

export default () => {
    return <AppContainer
        onNavigationStateChange={(prevState, currentState, action) => {
            const currentRouteName = getActiveRouteName(currentState);
            const previousRouteName = getActiveRouteName(prevState);
      
            if (previousRouteName !== currentRouteName) {
              analytics().setCurrentScreen(currentRouteName, currentRouteName);
            }
          }}
    />
}