React Native Flipper 性能监控插件使用指南

React Native Flipper 性能监控插件使用指南

1、项目的目录结构及介绍

react-native-flipper-performance-monitor/
├── example/
│   └── ...  // 示例项目文件
├── expo-example/
│   └── ...  // Expo 示例项目文件
├── flipper-desktop/
│   └── ...  // Flipper 桌面应用相关文件
├── flipper-native/
│   └── ...  // Flipper 原生插件相关文件
├── react-native-startup-trace/
│   └── ...  // 启动追踪相关文件
├── .travis.yml  // Travis CI 配置文件
├── LICENSE  // 项目许可证
├── README.md  // 项目说明文档
└── ...

目录结构介绍

• example/: 包含一个示例项目，展示如何使用该插件。
• expo-example/: 包含一个 Expo 示例项目，展示如何在 Expo 项目中使用该插件。
• flipper-desktop/: 包含 Flipper 桌面应用的相关文件。
• flipper-native/: 包含 Flipper 原生插件的相关文件。
• react-native-startup-trace/: 包含启动追踪的相关文件。
• .travis.yml: Travis CI 配置文件，用于持续集成。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。

2、项目的启动文件介绍

iOS 启动文件

在 iOS 项目中，启动文件通常位于 ios/yourapp/AppDelegate.m。以下是需要添加的代码：

#ifdef FB_SONARKIT_ENABLED
// 添加这一行
#import <FlipperPerformancePlugin.h>

static void InitializeFlipper(UIApplication *application) {
    // 添加这一行
    [client addPlugin:[FlipperPerformancePlugin new]];
    [client start];
}
#endif

Android 启动文件

在 Android 项目中，启动文件通常位于 android/app/src/debug/java/com/yourapp/ReactNativeFlipper.java。以下是需要添加的代码：

import tech.bam.rnperformance.flipper.RNPerfMonitorPlugin;

client.addPlugin(new RNPerfMonitorPlugin(reactInstanceManager));

3、项目的配置文件介绍

iOS 配置文件

在 iOS 项目中，配置文件通常位于 ios/yourapp/AppDelegate.m。需要确保以下代码已添加：

#ifdef FB_SONARKIT_ENABLED
#import <FlipperPerformancePlugin.h>

static void InitializeFlipper(UIApplication *application) {
    [client addPlugin:[FlipperPerformancePlugin new]];
    [client start];
}
#endif

Android 配置文件

在 Android 项目中，配置文件通常位于 android/app/src/debug/java/com/yourapp/ReactNativeFlipper.java。需要确保以下代码已添加：

import tech.bam.rnperformance.flipper.RNPerfMonitorPlugin;

client.addPlugin(new RNPerfMonitorPlugin(reactInstanceManager));

通过以上配置，可以在 Flipper 中启用性能监控插件，实时监控 React Native 应用的性能。