如何在React Native中通过Firebase Analytics跟踪所有访问过的屏幕？

Firebase的logScreenView()默认仅记录当前与上一屏幕的切换，不会自动维护完整的访问历史。要实现全屏幕路径跟踪，需手动维护屏幕访问栈，并结合自定义事件来记录完整路径。

具体实现方案 #

1. 全局维护屏幕访问栈 #

创建一个全局模块来管理屏幕历史，避免重复添加同一屏幕：

// screenHistory.js
let screenStack = [];

export const addScreenToStack = (screenName) => {
  // 避免重复添加当前屏幕（如重复进入同一页面）
  if (screenStack.at(-1) !== screenName) {
    screenStack.push(screenName);
  }
};

export const getFullScreenHistory = () => [...screenStack]; // 返回副本防止外部修改原数组

export const popScreenFromStack = () => {
  if (screenStack.length > 1) screenStack.pop();
};

2. 自动记录屏幕访问（结合导航监听） #

如果使用React Navigation，可以通过全局导航监听统一处理，无需在每个组件单独编写逻辑：

// 导航容器配置
import { NavigationContainer } from '@react-navigation/native';
import analytics from '@react-native-firebase/analytics';
import { addScreenToStack, getFullScreenHistory } from './screenHistory';

function App() {
  return (
    <NavigationContainer
      onStateChange={(state) => {
        const currentScreen = state.routes[state.index].name;
        addScreenToStack(currentScreen);
        
        // 记录包含完整路径的自定义事件
        analytics().logEvent('full_screen_view', {
          current_screen: currentScreen,
          full_screen_path: getFullScreenHistory().join(' → '),
          total_screens_visited: getFullScreenHistory().length
        });

        // 保留原生logScreenView，不影响原有基础统计
        analytics().logScreenView({
          screen_name: currentScreen,
          screen_class: currentScreen
        });
      }}
    >
      {/* 你的导航结构 */}
    </NavigationContainer>
  );
}

3. 处理返回操作 #

针对物理返回键或导航返回，同步更新屏幕栈并记录返回事件：

// 在需要处理返回的组件中
import { popScreenFromStack, getFullScreenHistory } from './screenHistory';
import analytics from '@react-native-firebase/analytics';

const handleGoBack = () => {
  popScreenFromStack();
  const updatedHistory = getFullScreenHistory();
  
  analytics().logEvent('screen_back_navigation', {
    previous_screen: updatedHistory.at(-1),
    updated_full_path: updatedHistory.join(' → ')
  });
  
  navigation.goBack();
};

4. 在Firebase控制台查看数据 #

进入Firebase Analytics的事件页面，找到自定义的full_screen_view事件，即可查看包含完整屏幕路径的统计数据，还可基于该事件创建自定义报表，分析用户的完整访问路径。

注意事项 #

• 对于Tab导航场景，切换Tab时导航状态会更新，上述监听会自动记录Tab页面的访问。
• 如果不使用React Navigation，可在每个屏幕的useEffect（函数组件）或componentDidMount（类组件）中调用addScreenToStack并触发自定义事件。

内容的提问来源于stack exchange，提问作者Ankit Kumar