![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react native
Zsama666
这个作者很懒,什么都没留下…
展开
-
React Native 升级版本至0.66的一些经验记录(Hermes与Realm)
升级过程的话,官方有一个WEB端的工具可以提示你修改哪些内容。但是我是从一个较老的0.59.8(大约是19年5月发布的版本)的项目开始升级。并且项目中牵扯的三方库也不少,在之前的一次尝试按照官方指引升级0.65的过程中失败,一路解报错看不到头。因为时间问题那一次升级也暂时搁置了。随时react native 0.66的发布hermes 引擎升级到了0.9.0版本,这还是非常令人激动的。我最终的升级方案是重新建了0.66的工程 ,再将原来的业务代码全部迁移进去耗时还是比较多的。注意开启her...原创 2021-11-25 11:06:57 · 2704 阅读 · 0 评论 -
React Native Debugger提升DEBUG速度/体验
使用react-native-debugger 后稳定性提升很多,可以录制片段分析APP 函数耗时。之前使用浏览器debug比较慢,并且容易断开。整体比较稳定,持续使用中,后续再来更新。原创 2023-01-29 15:16:24 · 199 阅读 · 0 评论 -
React native 近期Android 无法编译的问题解决
程序包com.facebook.react.bridge不存在。根本原因是Jcenter关闭服务。我解决时对应的gradle版本。原创 2022-11-08 10:07:49 · 2046 阅读 · 3 评论 -
react-native start 报错,react native 服务启动失败解决办法
npx react-native start 报错error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class. Run CLI with --verbose flag原创 2022-02-17 09:22:43 · 1418 阅读 · 0 评论 -
无法加载文件 *******react-native.ps1,因为在此系统中禁止执行脚本的问题解决。
今天在一台设备上跑RN ( react-native run-android)遇到下列问题:无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\react-native.ps1,因为在此系统中禁止执行脚本。有关详细信息,请参阅 "get-helpabout_signing"。所在位置 行:1 字符: 13+ react-native <<<< run-android + CategoryInfo ...原创 2022-02-17 09:12:42 · 1871 阅读 · 0 评论 -
React Native 红屏报错 Unable to load script from assets
出现上面的报错,先确认rn服务是否运行成功有的情况下是启动失败,或是启动后意外关闭了,或是端口不一致。这里记录一下另外一种情况:如果是从GITHUB上面新CLONE下来的项目 ,可能android\app\src\main\assets目录下是空的(assets文件夹需要新建一下了)。这时候需要在项目根目录终端下运行:react-native bundle --platform android --dev false --entry-file index.andro...原创 2021-12-09 17:16:58 · 1761 阅读 · 0 评论 -
React Native 异常记录 viewshot redmi note8 pro background失效
"react-native-view-shot": "^3.1.2","react-native": "0.59.8""react-native-qrcode-svg": "^6.0.6"记录一个客户反馈的异常:rn版本0.59.8 view shot版本3.1.2出现异常的机型:redmi note 8 pro miui 12.5.1异常的现象:viewShot组件style中设置background颜色失效 <ViewS...原创 2021-08-27 15:01:40 · 157 阅读 · 0 评论 -
React Native TEXT 组件文字显示不全 异常解决(小米文字显示不全:小米10 ,Redmi k30出现)
开发中发现一处text组件 显示文字,总是丢末尾几个字符的异常。就很疑惑,拿小米11ultra(12.0.9)和小米8(12.0.3)测试正常,小米10(miui12.0.11)和redmi k30会异常。字体都是如下图这个小米兰亭pro。解决方法:全局设置如下代码(记得import Platform跟Text)const defaultFontFamily = { ...Platform.select({ android: {fontFamily: ''}...原创 2021-04-21 10:44:43 · 2285 阅读 · 1 评论 -
[笔记]记录react native 事件处理顺序(settimeout,promise,then,手势事件)
以下信息主要做笔记记录,未详细整理文字,仅供参考。流程是我使用自定义的滑动杆组件,在抬起的事件中执行testEventLoop方法(代码见图3),抬起手指后,迅速再次拖动滑动杆,这时因为JS线程阻塞,导致需要等testEventLoop方法中代码全部走完,手势事件才会发给自定义组件,导致了较长时间的响应滞后。第一步确认promise的then里面跑代码依然阻塞JS线程,影响手势事件的开始。当我给promise加了await时,执行顺序时123,去掉await是132定时器 在最后原创 2021-04-14 17:22:29 · 303 阅读 · 0 评论 -
[笔记]关于React Native线程的一些思考,React Native页面卡顿掉帧的原因在哪?及时获取android端用户触摸状态并对JS耗时运算进行干预。
最近在项目中发现一个现象,当给js thread处理大量数据的同时对APP界面进行交互:1.原生控件:马上得到响应,没有延迟(android seekbar)2.RN自定义组件:延迟约200毫秒后才进入触摸或手势事件查询了一番资料发现:React Native有三个重要的线程:1.Javascript thread。JS代码的执行线程,即进行了JS代码的运算处理,也承担着所有JS和原生代码的交互,可谓是亚历山大。这也是最值得进行优化线程内操作的一个环节。2.UI thread .原创 2021-04-10 21:10:39 · 1441 阅读 · 0 评论 -
React native 界面响应慢 卡顿的几个优化方向(思路)
React native 界面响应慢 卡顿的几个解决思路(陆续整理中)最近在项目优化中整理了一些对优化性能有帮助的线索,大家可以参考一下:1.耗时的操作使用Promise异步操作(如果用户界面操作频率很高可能依然会出现标题4的情况)避免出现长时间等待的情况。2.避免过度绘制,自定义组件可以考虑继承PureComponentshouldComponentUpdate避免无变化的重复setState生命周期文档https://blog.csdn.net/loveseal518/art原创 2021-04-06 19:42:15 · 5054 阅读 · 0 评论 -
React Native 多语言切换库 react-native-i18n 可能遇到的坑记录
项目地址:https://github.com/AlexanderZaytsev/react-native-i18n使用方式:使用yarn:yarn add react-native-i18n;使用npm:npm install react-native-i18n --save;0.60版本以下记得手动linkreact-native link react-native-i18n以下内容可能比较跳跃,本篇主要是记录一下遇到的异常及暂时的解决方式。页面调用:impor原创 2021-03-11 15:38:09 · 707 阅读 · 0 评论 -
使用NVM 管理降低Node版本及 npm失效的问题解决
最近需要经常在react native 高版本与低版本之间切换。于是有了需要降低Node版本的需求。如何管理Node版本:Mac:安装NPM插件 n ,通过n模块来管理Node的版本; 通过npm/cnpm install n -g 全局安装n模块 n stable 或者 sudo n stable 安装当前稳定的版本; n latest 或者 sudo n latest 安装当前最新的node版本; n vxx 可以指定安装对应的版本; 卸载的话,..原创 2020-12-25 16:52:53 · 2999 阅读 · 0 评论 -
rn保持屏幕常亮 react-native-idle 及1.1.0在iOS模拟器或SE真机闪退的某个原因解决方法
react-native-idlePrevent screen to sleep in ReactNative app.Installnpm install react-native-idle --savereact-native link react-native-idleUsageimport RNIdle from 'react-native-idle'RNIdle.disableIdleTimer()//保持屏幕常亮RNIdle.enableIdleTi...原创 2020-11-12 15:15:36 · 745 阅读 · 3 评论 -
React native 获取屏幕方向,限制横竖屏 react-native-orientation和react-native-orientation-locker
关于RN下横竖屏的相关操作,浏览了很多博客都是使用这个老库居多,后发现一个bug ,新库中有所解决。但新库也有点异常的地方。暂时先做记录,后续再来填坑。老库:https://github.com/yamill/react-native-orientation新库:https://github.com/wonday/react-native-orientation-lockergithub地址安装:使用 yarn (RN 0.60 及以上) yarn add react-n.原创 2020-11-12 15:03:18 · 2865 阅读 · 2 评论 -
Xcode React-native Archive 报错 Multiple commands produce...IntermediateBuildFilesPath/UninstalledProd
Xcode React-native 运行一切正常,Archive时报错.Multiple commands produce '/Users/*******/Library/Developer/Xcode/DerivedData/*******-dwdonbnvuqjattffwatyikzwovln/Build/Intermediates.noindex/ArchiveIntermediates/*******/IntermediateBuildFilesPath/Uninstall...原创 2020-09-10 15:59:52 · 1091 阅读 · 0 评论 -
执行pod update 报错error: RPC failed; curl 18 transfer closed with outstanding read data remainin
执行pod update 或pod repo update 都会失败提示:error: RPC failed; curl 18 transfer closed with outstanding read data remaining fatal: the remote end hung up unexpectedly fatal: early EOF fatal: index-pack failed解决方法:修改postBuffer的默认值git config --g...原创 2020-08-18 17:38:49 · 1177 阅读 · 0 评论 -
Unknown argument type attribute in method RCTAppState getCurrentAppState error 报错解决方法
Unknown argument type 'attribute' in method -[RCTAppState getCurrentAppState:error:]. Extend RCTConvert to support this type.IOS项目中找到: RCTModuleMethod.mmReact/Base/RCTModuleMethod.mm将RCTParseUnused方法进行修改改为:static BOOL RCTParseUnused(const ..原创 2020-05-15 17:51:19 · 690 阅读 · 0 评论 -
React Native 中 component 生命周期
React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图getDefaultPropsobject getDefaultProps()执行过一次后,被创建的类会有缓存,映射的值会存在this.props,前提是这个prop不是父组件指定的这个方法在对象被创建之前执行,因此不能在方法内调用this.props,另外,注意任何getDefaultProps()返回的对象在实例中共享,不..翻译 2020-05-15 17:04:39 · 261 阅读 · 0 评论 -
ReactNative 图片处理 属性 resizeMode 说明
使用Image组件时,如果默认不对resizeMode进行设置,那么图片会按照宽高比例中较小的一方显示,长的一方将被裁切掉两端Image的resizeMode属性:resizeMode enum(‘cover’,‘contain’,‘stretch’,‘repeat’,‘center’)如果我们需要将原图完全显示出来可以设置resizeMode =’contain’:图片将按比例缩放...原创 2020-04-29 15:28:12 · 6297 阅读 · 0 评论 -
React native 引用自定义组件报错 rnsvgcircle was not found in the uimanager 解决方法
打开`android/app/src/main/java/[…]/MainApplication.java添加 new SvgPackage() setting.gradle中添加include ‘:react-native-svg’project(’:react-native-svg’).projectDir = new File(rootProject.projectDir, ‘…/...原创 2020-04-27 16:55:58 · 1115 阅读 · 0 评论 -
react native图片显示空白不显示的解决方法
react native图片显示空白不显示的解决方法常见的原因及解决方法:1.检查js样式中给定的宽高条件和resizeMode可以试试在添加宽高属性同时修改resizeMode='stretch'图片将完全显示出来并拉伸变形铺满整个屏幕2.重启rn服务器或卸载app重装试试。3.png格式如果是16bits的无法显示,改成8bits的就可以显示了。mac系统操作如下:在Fin...原创 2020-04-16 18:03:15 · 4105 阅读 · 0 评论