使用 Flipper

有关安装和配置 Flipper 以调试 Expo 项目的指南。

警告已弃用：React Native 不再推荐 Flipper (RFC0641)。我们不建议使用它。Flipper 的功能，例如 React 开发者工具和网络检查器，可直接通过 SDK 49 及更高版本中的 Expo CLI 获得。详细信息请参见调试和分析工具。

¥Deprecated: React Native no longer recommends Flipper (RFC0641). We do not recommend using it. Features from Flipper, such as React Developer Tools and the network inspector, are available directly through Expo CLI in SDK 49 and above. See Debugging and profiling tools for more details.

Flipper 是一个用于在模拟器/模拟器或物理设备上调试 React Native 项目的平台工具。它支持在 Android 和 iOS 上运行的项目，并可作为 macOS、Windows 和 Linux 上的桌面应用使用。

¥Flipper is a platform tool for debugging React Native projects on an emulator/simulator or a physical device. It supports projects running on Android and iOS and is available as a desktop application on macOS, Windows, and Linux.

它提供了各种功能，例如设备日志查看器、交互式原生布局检查器、网络检查器、本地数据库检查器、崩溃报告器等。你可以在 Flipper 桌面应用中添加更多可用插件。

¥It offers various features such as a device log viewer, interactive native layout inspector, network inspector, local database inspector, crash reporter, and more. You can add more plugins available in the Flipper desktop app.

先决条件

¥Prerequisites

开始之前，请确保你的计算机上安装了以下软件：

¥Before you get started, make sure you have the following installed on your computer:

Flipper 桌面应用

¥Flipper desktop app
EAS CLI 已安装和登录到你的 Expo 账户

¥EAS CLI installed and logged in to your Expo account
使用 Flipper 调试你的 Expo 项目需要创建项目的开发构建

¥Debugging your Expo projects with Flipper requires creating a development build of your project

运行设置医生

¥Run setup doctor

打开 Flipper 桌面应用，然后单击左下角菜单中的“Setup Doctor”按钮。

¥Open the Flipper desktop app and click the Setup Doctor button from the bottom left menu.

如果缺少任何依赖，请按照 Flipper 提供的说明进行安装。

¥If any dependencies are missing, follow the instructions provided by Flipper to install them.

安装 `expo-dev-client`

¥Install expo-dev-client

由于 Flipper 需要原生代码，因此你需要创建一个开发版本。要进行设置，请安装 expo-dev-client 库：

¥Since Flipper requires native code, you'll need to create a development build. To set it up, install the expo-dev-client library:

Terminal

- npx expo install expo-dev-client

添加 `expo-build-properties`

¥Add expo-build-properties

Expo SDK 使用 react-native 的打包版 Flipper。对于 Android，Flipper 默认启用。

¥The Expo SDK uses the bundled version of Flipper from react-native. For Android, Flipper is enabled by default.

对于 iOS，你需要安装 expo-build-properties 并在插件配置中启用 Flipper：

¥For iOS, you need to install expo-build-properties and enable Flipper in the plugin configuration:

Terminal

- npx expo install expo-build-properties

安装该包会将 expo-build-properties 插件添加到项目的 app.json 中。要启用 Flipper，请在插件配置中添加 ios.flipper 属性并将其设置为 true：

¥Installing the package adds the expo-build-properties plugin to your project's app.json. To enable Flipper, add the ios.flipper property and set it to true in the plugin configuration:

app.json

{
  "plugins": [
    [
      "expo-build-properties",
      {
        "ios": {
          "flipper": true
        }
      }
    ]
  ]
}

配置并安装开发版本

¥Configure and install a development build

要配置和安装开发版本，请按照以下说明操作：

¥To configure and install a development build, follow the instructions below:

运行开发服务器

¥Run the development server

安装构建后，运行以下命令来启动开发服务器：

¥After installing the build, run the following command to start a development server:

Terminal

- npx expo start

开发服务器运行后，打开 Flipper 桌面应用并在 App Inspect 下选择你的设备或模拟器：

¥Once the development server is running, open the Flipper desktop app and select your device or simulator under App Inspect:

Open a device or emulator/simulator in Flipper under App Inspect.

局限性

¥Limitations

如果第三方库在你的项目中使用 "useFrameworks": "static" for iOS，则集成 Flipper 将无法工作，因为它不兼容。有关更多信息，请参阅 expo-community-flipper GitHub 存储库中的关于兼容性问题的通知。

¥If a third-party library uses "useFrameworks": "static" for iOS in your project, integrating Flipper will not work since it is incompatible. For more information, see the notice on the compatibility issue in the expo-community-flipper GitHub repository.

¥More

要了解有关该工具的更多信息，请参阅 Flipper 中的 React Native 支持文档。

¥To learn more about the tool, see React Native support in Flipper documentation.