React Native中如何便捷实现全应用PageView埋点统计？

你提到的封装BaseSafeAreaView的方案完全可行，和原生端Base类的封装思路一致，实现成本极低，非常适配当前所有页面统一使用SafeAreaView的场景。

实现示例参考：

import { SafeAreaView } from 'react-native';
import Analytics from 'appcenter-analytics';
import { useEffect } from 'react';

const BaseSafeAreaView = ({ pageName, children, ...rest }) => {
  useEffect(() => {
    Analytics.trackEvent(`PageView: ${pageName}`);
  }, []);

  return <SafeAreaView {...rest}>{children}</SafeAreaView>;
};

export default BaseSafeAreaView;

注意：生产环境打包会压缩组件变量名，无法自动获取页面组件名，需要在每个页面调用时手动传入pageName参数，比如<BaseSafeAreaView pageName="HomePage">，保证埋点命名统一可识别。

根据不同项目场景，还有两种实践中更常用的实现方案：

1. 路由全局监听方案（最推荐） #

如果你的项目使用了React Navigation等路由库，优先选择路由层全局监听的方案，完全无业务侵入，覆盖场景更全面。

React Navigation v6 实现示例：

import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import Analytics from 'appcenter-analytics';
import { useRef } from 'react';

const App = () => {
  const navigationRef = useNavigationContainerRef();
  const prevRouteNameRef = useRef();

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        const initialRoute = navigationRef.getCurrentRoute();
        prevRouteNameRef.current = initialRoute.name;
        Analytics.trackEvent(`PageView: ${initialRoute.name}`);
      }}
      onStateChange={() => {
        const currentRoute = navigationRef.getCurrentRoute();
        const currentRouteName = currentRoute.name;
        if (prevRouteNameRef.current !== currentRouteName) {
          Analytics.trackEvent(`PageView: ${currentRouteName}`);
          prevRouteNameRef.current = currentRouteName;
        }
      }}
    >
      {/* 原有路由栈配置 */}
    </NavigationContainer>
  );
};

export default App;

该方案优势：

• 不需要修改任何页面业务代码，统一在路由层处理，不会出现漏加Base组件导致埋点丢失的问题
• 自动适配页面压栈、返回、Tab切换、模态框弹出/关闭等所有路由跳转场景，覆盖范围更全面
• 直接读取路由配置的固定name字段，不需要手动传参，埋点命名一致性更高

2. 高阶组件（HOC）封装方案 #

如果你的项目没有统一使用路由库，或者存在部分页面不使用SafeAreaView的场景，可以选择HOC封装方案，不绑定具体UI组件，适用范围更广。

实现示例：

import Analytics from 'appcenter-analytics';
import { useEffect } from 'react';

const withPageViewTrack = (pageName) => (PageComponent) => {
  const TrackWrapper = (props) => {
    useEffect(() => {
      Analytics.trackEvent(`PageView: ${pageName}`);
    }, []);
    return <PageComponent {...props} />;
  };
  return TrackWrapper;
};

// 页面组件使用示例
const MinePage = () => {
  // 原有页面逻辑
};
export default withPageViewTrack('MinePage')(MinePage);

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