Kotlin 项目集成 Flipper 完整指南：深入调试 React Native 应用程序

2024-03-14 10:03:50

在 Kotlin 项目中集成 Flipper 的完整指南

引言

Flipper 是一个强大的调试工具，可帮助你轻松检查和分析 React Native 应用程序的性能。它提供了一个广泛的插件生态系统，使你能够深入了解应用程序的行为。本文将指导你如何在 Kotlin 项目中正确集成 Flipper，并提供解决常见问题的技巧。

导入 Flipper

导入必要的库：

import com.facebook.flipper.android.AndroidFlipperClient
import com.facebook.flipper.plugins.inspector.DescriptorMapping
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin
import com.facebook.react.ReactInstanceManager

初始化 Flipper：

fun initializeFlipper(application: Application, reactInstanceManager: ReactInstanceManager) {
    val client = AndroidFlipperClient.getInstance(application)
    client.addPlugin(InspectorFlipperPlugin(reactInstanceManager, DescriptorMapping.withDefaults()))
    client.start()
}

在 build.gradle 中添加依赖项

确保你的 build.gradle 文件包含以下 Flipper 依赖项：

dependencies {
    debugImplementation("com.facebook.flipper:flipper:${rootProject.ext["flipperVersion"]}") {
        exclude group: 'com.facebook.fbjni'
    }
    debugImplementation("com.facebook.flipper:flipper-network-plugin:${rootProject.ext["flipperVersion"]}")
    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${rootProject.ext["flipperVersion"]}")
    debugImplementation("com.facebook.flipper:flipper-litho-plugin:${rootProject.ext["flipperVersion"]}")
    debugImplementation("com.facebook.flipper:flipper-android-plugin:${rootProject.ext["flipperVersion"]}")
    releaseImplementation("com.facebook.flipper:flipper:${rootProject.ext["flipperVersion"]}") {
        exclude group: 'com.facebook.fbjni'
    }
    releaseImplementation("com.facebook.flipper:flipper-network-plugin:${rootProject.ext["flipperVersion"]}")
    releaseImplementation("com.facebook.flipper:flipper-fresco-plugin:${rootProject.ext["flipperVersion"]}")
    releaseImplementation("com.facebook.flipper:flipper-litho-plugin:${rootProject.ext["flipperVersion"]}")
    releaseImplementation("com.facebook.flipper:flipper-android-plugin:${rootProject.ext["flipperVersion"]}")
}

在 MainApplication 中初始化 Flipper

override fun onCreate() {
    super.onCreate()
    SoLoader.init(this, false)
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
        // If you opted-in for the New Architecture, we load the native entry point for this app.
        load()
    }
    initializeFlipper(this, reactNativeHost.reactInstanceManager)
}

解决常见问题

“No active connection found” 错误： 确保 Flipper 桌面应用程序正在运行且已连接到你的设备。
“DescriptorMapping 错误”： 确保导入 DescriptorMapping 类，并使用 withDefaults() 方法初始化它。
无法找到 Flipper 插件： 检查你的 build.gradle 文件是否包含必要的 Flipper 插件依赖项。
Flipper 未显示任何数据： 确保你正在查看正确的设备和应用程序，并且已安装了正确的 Flipper 插件。
Flipper 崩溃： 更新到 Flipper 的最新版本并确保没有冲突的库。