Flipper 调试 react native 项目

发布时间 2023-09-14 18:00:59作者: Li_pk

一、安装:

1. 在官网下载桌面应用

Flipper官网地址
Flipper GitHub 首页

2. 打开程序,执行 setup doctor 检测环境是否缺失

image

image

参考官方文档

二、使用

全部安装完以后启动react native项目,flipper会检测到运行中的项目模拟器
以expo构建的项目为例:

1. 安装 expo-dev-client 构建开发版本,flipper的使用需要构建开发版本,否则flipper左上角会报无设备连接错误

build相关配置可查看官方文档 https://docs.expo.dev/build/introduction/

expo install expo-dev-client
// 构建本地开发版本
eas build --profile devclient --platform android --loacal

2. 启动项目,刷新flipper选中当前项目

image

三、问题

1. "NO APPLICATION SELECTED"
由于开始一直用expo go打开项目,导致flipper可以看见logs和使用 react devtools 但是左上角一直显示 NO APPLICATION SELECTED 提示,而且其他的插件功能包括 network layout 等都无法使用。
找了很多文章以及GitHub等论坛好多人遇到这个问题,但是可惜没有一个回答在我这里生效。
最后构建开发版本后问题解决,flipper连接正常。