首页 > 其他分享 >Flipper 调试 react native 项目

Flipper 调试 react native 项目

时间:2023-09-14 18:00:56浏览次数:26  
标签:构建 项目 react expo flipper Flipper native

一、安装:

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连接正常。

image

image

标签:构建,项目,react,expo,flipper,Flipper,native
From: https://www.cnblogs.com/lpkshuai/p/17703087.html

相关文章

  • react中useEffect使用async await报错
    错误代码一:useEffect(async()=>{ awaitmyFunc();},[])constmyFunc=async()=>{...};错误代码二:useEffect(()=>myFunc(),[])constmyFunc=async()=>{...};以上写法在打开页面时正常显示,但是当从该页面返回上一页时报错,如下:原因要知道,useEffect钩子函数的一个......
  • Web前端:2022年十大React表库
    Web前端:2022年十大React表库粤嵌HTML5培训2022-04-1810:23广东表格是每个应用程序的关键组件,手动构建和样式表不再有效,因为有大量完全准备好的库可用于该功能。因此,我们利用这些库来简化我们的前端任务。我们收集了一些将在2022年派上用场的最佳React......
  • native2ascii用法
    [b]1、native2ascii简介:[/b]native2ascii是sunjavasdk提供的一个工具。用来将别的文本类文件(比如*.txt,*.ini,*.properties,*.java等等)编码转为Unicode编码。为什么要进行转码,原因在于程序的国际化。Unicode编码的定义:Unicode(统一码、万国码、单一码)是一种在计算机上使用的字......
  • React Table 表库
    ReactTableReactTable 是一个比较特别的存在。它可以说是所有表格组件中的F-22战斗机,包含天量功能,可以几乎定制无限复杂的表格需求。GitHub、亚马逊、微软、Uber的大量前端项目都在大量使用ReactTable。它的作者也是个传奇人物,不光创作了ReactTable,还有ReactQuery,......
  • react hook
    当我们想在两个函数之间共享逻辑时,我们会把它提取到第三个函数中。必须以“use”开头吗?必须如此。这个约定非常重要。不遵循的话,由于无法判断某个函数是否包含对其内部Hook的调用,React将无法自动检查你的Hook是否违反了Hook的规则小练习使用自定义hooks实现鼠标移动......
  • react配置css相关
    1.installnormalize:yarnaddnormalize.css-D(1).引入src/index.js或src/index.tsx:import"normalize.css";2.installsass:[email protected].配置less:(1).安装less相关依赖:[email protected]@5.0.0-D(2).修改config/webpack.config.js文件:......
  • react配置eslint、prettier和commitlint规范工程
    1.配置prettier:(1).installPrettierlocally:yarnadd--dev--exactprettierThen,createanemptyconfigfiletoleteditorsandothertoolingknowyouareusingPrettier:echo{}>.prettierrc.jsonNext,createa.prettierignorefiletoletthePrettierC......
  • SpringBoot项目启动报错:An incompatible version [1.1.22] of the Apache Tomcat Nati
    问题解释:“安装了不兼容的ApacheTomcat原生库版本[1.1.22],而Tomcat需要版本[1.2.14]”解决方法:①打开网页 http://archive.apache.org/dist/tomcat/tomcat-connectors/native/②        ③        ④     ......
  • OpenTiny Vue组件库实现跨框架(vue2、vue3、react、solid)
    本文由TinyVue组件库核心成员郑志超分享,首先分享了实现跨框架组件库的必要性,同时通过演示demo和实际操作向我们介绍了如何实现一个跨框架的组件库。前言前端组件库跨框架是什么?前端组件库跨框架是指在不同的前端框架(如React、Vue、Solid等)之间共享和复用组件的能力。这种能力可以让......
  • React框架下如何集成H.265网页流媒体EasyPlayer.js视频播放器?
    H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,可支持H.264与H.265编码格式,性能稳定、播放流畅,能支持WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC等格式的视频流。在功能上,EasyPlayer支持直播、点播、录像、快照截图、MP4播放......