React Native - 在所有页面上实现 PageView 分析的简单方法是什么？

Question

我正在为 Crashalytics 和 Analytics 实施 Microsoft 的 AppCenter。在本机开发中，我可以添加两行代码，并将页面浏览分析（每次查看页面时跟踪）添加到应用程序中的每个页面。我很想知道是否有一种简单的方法可以在 React Native 应用程序中实现。这是它在原生上的样子：

在原生 iOS 中，我只创建一个 BaseViewController 并确保每个 ViewController 都继承自该类。然后在 BaseViewController 的 ViewDidLoad 中添加类似下面一行的内容。

在原生 Android 中，我只需创建一个 BaseFragment 并确保每个 Fragment 都继承自该类。然后在 BaseFragment 的 OnCreate 中添加如下行：

Analytics.TrackEvent("PageView: " + this.GetType().Name)

如何在 React Native 上实现类似的功能？我猜测，由于我在所有页面中都使用了一个，我可以以某种方式创建一个 BaseSafeAreaView，然后我可以在 UseEffect 中添加类似的分析代码？

Answer 1

因为我使用的是 react-navigation，所以我可以使用 NavigationContainer use this，所以我不需要任何基类

...
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;

        if (previousRouteName !== currentRouteName) {
          await Analytics.trackEvent('PageView: ' + currentRouteName);
        }
        routeNameRef.current = currentRouteName;
      }}
    >
...

Answer 2

Mixpanel 怎么样？您可以实施成熟的分析解决方案。

他们有一个react native integration

段也很棒。它们也为 [react native 集成] 提供支持。有需要可以integrate segment with mixpanel。

Firebase 分析也是一个很好的解决方案。这可以通过rnfirebase analytics package 完成