如何在React Native/Expo+Firebase应用中统计各组件的用户停留时长

实现思路 #

核心是在页面/组件的生命周期钩子中记录进入和离开的时间戳，计算差值后通过自定义事件上报到Firebase，不依赖expo-firebase-analytics的内置封装能力，避开跨平台功能限制。

前置准备 #

• 已完成Expo项目中Firebase基础JS SDK的接入
• 为每个需要统计的页面/组件定义唯一标识，比如screen_notification（通知页）、screen_message（消息页）

具体实现步骤 #

1. 封装时长统计通用工具函数 #

统一管理时间记录和上报逻辑：

import { getAnalytics, logEvent } from "firebase/analytics";

// 存储每个页面的进入时间戳
const pageEnterTimeMap = new Map();

/**
 * 记录页面进入时间
 * @param {string} pageId 页面唯一标识
 */
export const recordPageEnter = (pageId) => {
  pageEnterTimeMap.set(pageId, Date.now());
};

/**
 * 计算页面停留时长并上报到Firebase
 * @param {string} pageId 页面唯一标识
 */
export const recordPageLeave = (pageId) => {
  const enterTime = pageEnterTimeMap.get(pageId);
  if (!enterTime) return;
  
  // 计算停留时长，单位秒取整
  const stayDuration = Math.floor((Date.now() - enterTime) / 1000);
  // 过滤小于1秒的异常误触数据
  if (stayDuration < 1) {
    pageEnterTimeMap.delete(pageId);
    return;
  }

  // 上报自定义事件
  const analytics = getAnalytics();
  logEvent(analytics, 'screen_stay_duration', {
    screen_id: pageId,
    duration: stayDuration
  });

  pageEnterTimeMap.delete(pageId);
};

2. 页面/组件绑定生命周期钩子 #

如果使用React Navigation做路由管理，可选两种接入方式：

方式1：单个页面单独埋点（适配独立组件统计需求）

以通知页为例，在生命周期中绑定进入、离开逻辑：

import { useEffect } from 'react';
import { recordPageEnter, recordPageLeave } from '@/utils/analytics';

const NotificationScreen = () => {
  useEffect(() => {
    const pageId = 'screen_notification';
    recordPageEnter(pageId);
    
    // 页面卸载/离开时触发上报
    return () => {
      recordPageLeave(pageId);
    };
  }, []);

  // 页面业务逻辑
  return <></>;
};
export default NotificationScreen;

消息页同理，将pageId替换为screen_message即可。

方式2：全局路由监听批量埋点

如果需要统计的页面较多，可直接监听路由变化统一埋点：

import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { recordPageEnter, recordPageLeave } from '@/utils/analytics';

export default function App() {
  const navigationRef = useNavigationContainerRef();
  let previousRouteName = null;

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        previousRouteName = navigationRef.getCurrentRoute()?.name;
        previousRouteName && recordPageEnter(previousRouteName);
      }}
      onStateChange={async () => {
        const currentRouteName = navigationRef.getCurrentRoute()?.name;
        if (previousRouteName && previousRouteName !== currentRouteName) {
          recordPageLeave(previousRouteName);
          currentRouteName && recordPageEnter(currentRouteName);
          previousRouteName = currentRouteName;
        }
      }}
    >
      {/* 路由配置内容 */}
    </NavigationContainer>
  );
}

3. Firebase后台查看数据 #

上报的事件会展示在Firebase Analytics的「事件」面板中，筛选screen_stay_duration事件后按screen_id维度分组，即可查看每个页面的单独停留时长统计，支持按时间、用户群体筛选。

边缘场景适配 #

• 应用切后台再切回：可额外监听App的appState状态变化，切后台时触发当前页面的上报，切回前台时重新记录进入时间，避免时长计算错误
• 模态弹窗覆盖页面：如果需要排除弹窗遮挡的时长，可以单独给弹窗加生命周期钩子，弹窗出现时触发页面离开上报，弹窗关闭时重新记录页面进入时间

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