ReactNative - 跨所有页面实施 PageView 分析的简单方法是什么？

Question

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

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

在本机 Android 中，我只是创建一个 BaseFragment 并确保每个片段都继承自该 class。然后在 BaseFragment 的 OnCreate 中添加类似以下行的内容：

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

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

Answer 1

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

他们有一个react native integration

片段也很棒。他们也为 [react native integration] 提供支持。如有必要，您可以integrate segment with mixpanel。

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

来完成

Answer 2

因为我使用的是 react-navigation，所以我能够 use this 使用我的 NavigationContainer，所以我不需要任何基础 class

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

ReactNative - 跨所有页面实施 PageView 分析的简单方法是什么？

ReactNative-What's an easy way to implement PageView analytics across all pages?

android

ios

reactjs

react-native

visual-studio-app-center