用于分析的屏幕跟踪

要跟踪当前活动的屏幕，我们需要

1. 添加回调以接收状态更改通知
2. 获取根导航器状态并找到活动路由名称

要接收状态变化的通知，我们可以在 NavigationContainer 上使用 onStateChange 属性。要获取根导航器状态，我们可以使用容器 ref 上的 getRootState 方法。请注意，onStateChange 在初始渲染时不会被调用，因此您必须单独设置初始屏幕。

示例

此示例展示了如何将此方法应用于任何移动分析 SDK。

import {
  NavigationContainer,
  useNavigationContainerRef,
} from '@react-navigation/native';

export default () => {
  const navigationRef = useNavigationContainerRef();
  const routeNameRef = useRef();

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        routeNameRef.current = navigationRef.getCurrentRoute().name;
      }}
      onStateChange={async () => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.getCurrentRoute().name;
        const trackScreenView = () => {
          // Your implementation of analytics goes here!
        };

        if (previousRouteName !== currentRouteName) {
          // Save the current route name for later comparison
          routeNameRef.current = currentRouteName;

          // Replace the line below to add the tracker from a mobile analytics SDK
          await trackScreenView(currentRouteName);
        }
      }}
    >
      {/* ... */}
    </NavigationContainer>
  );
};