react-native
文章平均质量分 59
hzxOnlineOk
这个作者很懒,什么都没留下…
展开
-
关于react-nativeText组件 水平垂直居中问题
React Native Text 垂直居中问题Jesse前端码农3 人赞同了该文章Text 垂直居中问题最近发现React Native(以下称RN)里,<Text>的文字垂直居中,有很多小问题,有必要总结一下。提前说明下,这里使用的 RN 版本是:0.57提前说明下,这里使用的 RN 版本是:0.57提前说明下,这里使用的 RN 版本是:0.57通常在web/html/css开发中,单行文字垂直居中,一般都可以通过heigh...转载 2020-08-03 19:52:49 · 1830 阅读 · 2 评论 -
记录一次解决RN项目Android Studio编译报错全过程(compileDevDebugJavaWithJavac)
博主的Android文件很久没有动过了,本次的目的是跑起来打包到android真机上进行实时调试,而当我再次跑起来的时候就报错了,报错信息如下:ERROR: Failed to resolve: com.google.android.gms:play-services-gcm:16.0.0解决办法是,修改镜像源,这么做是因为 google属于境外,需要翻墙。否则网络很差,经常会下载失败,改成国内的阿里云提供的镜像源buildscript { repositories {原创 2021-02-24 17:02:14 · 1011 阅读 · 0 评论 -
cannot find supercluster & native module cannot be null & Xcode build timeout
RN项目Xcode构建成功后,react-native-baidu-map 报错红屏:cannot findsupercluster但是进入到node_modules的react-native-baidu-map相关引用supercluster第三方组件的目录,用vscode点击引用却可以跳转进supercluster定义文件,仔细查看了一下,发现跳转的是全局node_modules里的supercluster而非当前项目根目录下的supercluster再进一步查看发现,当前项目根目录下并没有s.原创 2021-01-13 16:58:01 · 157 阅读 · 0 评论 -
React native如何让点击事件穿透遮罩层(水印)- pointerEvents属性应用
假如你有这么一个需求,你需要为一个页面生成水印,水印需要浮在最上层,那如何保证水印不会遮盖底层的内容呢?也就是我们要讲的 “事件穿透”在PC网页中,直接生成的是浏览器的dom元素进行排列绘制因此可以利用css自带的属性: pointer-events: none;遮罩层容器添加一条css属性 pointer-events: none, 遮罩下的就可以点击了,IE11+支持而React-Native则比较特殊,他毕竟不是运行在浏览器上的,他只是实现了Android和Ios底层V..原创 2020-12-31 11:32:12 · 1806 阅读 · 0 评论 -
React-Native ‘WKWebView` has no propType for native prop
根据搜索,出现这个错误的原因,是react-native与该组件所带的包的版本不匹配导致当我们从仓库拉别人的代码下来,是不包括node_modules的,而有的package.json又是不合规范,没有限制版本,或者各种其他包依赖,或者网络导致下载包不完整等等。任何一个环节出问题,都可能导致报错的产生!整理下来的解决办法有3种:(1)我自己解决的办法是,使用正常的包代替npm install下载下来的包 或者单独install该包(2)查询该第三方包和rn兼容的版本,并下载指定版本,清除缓存原创 2020-12-31 10:33:33 · 231 阅读 · 1 评论 -
react-native xcode 编译报错: /node_modules/react-native/third-party/glog-0.3.4‘:
RN升级可能产生这个bug,解决办法:在根目录:1.cd node_modules/react-native/scripts && ./ios-install-third-party.sh && cd ../../../2.cd node_modules/react-native/third-party/glog-0.3.4/ && ../../scripts/ios-configure-glog.sh && cd ../../..转载 2020-12-30 17:00:49 · 426 阅读 · 0 评论 -
React Native ‘config.h‘ file not found 问题、 ‘glog/logging.h‘ file not found 问题、configure: error: C co
本文转载自https://www.cnblogs.com/richard-youth/p/10002565.html该作者,仅做学习1、在github 上面 git clone 一个RN 项目代码,npm install (yarn)后,准备运行iOS工程,发现'config.h' file not found,恶心!!!百度发现:这个是常见错误,只需要在项目根目录下(里面包含node_modules文件夹)运行以下命令(下面的两行同时复制,终端运行)即可解决:cd node_modules.转载 2020-12-28 15:59:49 · 943 阅读 · 1 评论 -
App缓存优化篇(react-native)
APP中的缓存分为两种:一、离线缓存,没有网络时,显示缓存到内存或者本地磁盘的数据逻辑是在请求前,优先获取缓存,其步骤又分为(1)先获取内存中的缓存(2)获取不到内存中的缓存时,获取本地磁盘的缓存(3)获取不到内存和磁盘中的缓存时,发起请求获取接口的数据这种缓存主要用来优化图片渲染速度,但也可以支持缓存其他类型的接口数据/** * @author huangzhixin */import { STORAGE_KEY_AVATAR } from './commonConstants';原创 2020-12-21 16:06:44 · 1720 阅读 · 1 评论 -
React Native 性能优化指南
React Native 性能优化指南卤代烃公号@卤蛋实验室,关注就能变强关注他78 人赞同了该文章2020 年谈 React Native,在日新月异的前端圈,可能算比较另类了。文章动笔之前我也犹豫过,但是想到写技术文章又不是赶时髦,啥新潮写啥,所以还是动笔写了这篇 React Native 性能优化的文章。本文谈到的 React Native 性能优化,还没到修改 React Native 源码那种地步,所以通用性很强,对大部分 RN 开发者来说都用得着。本文的内容..转载 2020-12-16 15:18:01 · 835 阅读 · 0 评论 -
react native的ScrollView滑动到指定位置
<ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ width: '100%', }} ref={scrollView => { if (scrollView !== null) { setTimeo.原创 2020-11-27 09:13:03 · 1102 阅读 · 0 评论 -
react-native 报错you have not supplyed the global app context info from SDKInitialize
React-native中,使用百度地图SDK(react-native-baidumap-sdk),报错:react-native 报错you have not supplyed the global app context info from SDKInitialize我搜查了网上的文章,给出了这样的解释:在应用程序创建时初始化 SDK引用的Context 全局变量:public class MainActivity extends Activity { @Ov..原创 2020-11-20 14:06:37 · 1039 阅读 · 0 评论 -
React Native Native module cannot be null!
这个问题,可能是旧的服务占用了空间,但是旧的服务配置和新build的不一致导致出错,重新跑起来的时候记得关闭之前的debugger-ui 和 服务,重新构建reload就可以了关闭如下图所示:我是依照这样的办法解决的...原创 2020-11-17 11:13:07 · 239 阅读 · 0 评论 -
对新手友好的 RN 使用原生ios开发的模块
一、首先,我们需要知道我们做好的文件要放在哪里,需要做哪些配置才能生效我们需要先有2个文件(1)CreatCat.h (2)CreatCat.m,随意在哪里创建,最好是放在项目的ios根目录下,比较好找至于文件内写些什么,我们待会说,先说下有了文件后如何配置!二、配图这边是放在RN项目在Xcode上的项目根目录下,与其他库文件是同级的,只需要放在这里,并且在对应的文件里写些代码,就可以正确被JS调用了CreatCat.h#import <Foundation/Foun原创 2020-11-17 10:09:58 · 429 阅读 · 0 评论 -
React Native iOS原生模块开发实战|教程|心得|如何创建React Native iOS原生模块
前言一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现马上就春节了,所以就赶在春节之前将这篇博文写好并发布(其实是两篇:要看Android篇的点这里《React Native Android原生模块开发》)。我平时在用React Native开发App时会用到一些原生模块,比如:在做社会化分享、第三方登录、扫描、通信录,日历等等,想必大家也是一样。关于在React Native中使用原生模块,在这里引用React Nati转载 2020-11-12 15:44:50 · 302 阅读 · 2 评论 -
如何开发React Native 原生模块(Native Modules)?看完这篇文章就够了(Android)
前言一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现2018年马上就结束了,所以就赶年底将这篇博文写好并发布(其实是两篇:要看iOS篇的点这里《React Native iOS原生模块开发》)。我平时在用React Native开发App时会用到一些原生模块,比如:在做社会化分享、第三方登录、扫描、通信录,日历等等,想必大家也是一样。关于在React Native中使用原生模块,在这里引用React Native官方文档转载 2020-11-12 15:38:24 · 398 阅读 · 0 评论 -
Xcode能编译运行成功,但是模拟器没有自启动(没有任何动静)
这个是配置问题,Product->scheme->Editscheme原创 2020-11-11 17:10:07 · 1406 阅读 · 0 评论 -
xcode react-native 运行报错clang: error: linker command failed with exit code 1 (use -v to see invocatio
出现这个问题可能的原因有多种,参考https://www.jianshu.com/p/74c3bd5f4ced这位博主的而我出现的问题,就是缺少node_modules中的某些模块,导致文件获取不到,如下图所示,即缺失了-lRNZhiniaoWebview,考虑是react-native-zhiniao-webview,安装该包后重新run 就跑成功了...原创 2020-11-11 16:53:40 · 367 阅读 · 0 评论 -
react-native 附件上传参数[object Object] 上传附件失败的原因(form-data)
React-native中,打开debugger-ui查看接口信息时,无法成功上传附件,因为使用的是form-data上传附件,如果在debugger-ui查看,看到的请求体参数会是[object Object],默认被工具转换掉,导致附件请求参数变成字符串[object Object],而非file格式,因此,附件上传失败!!!解决办法 关闭debugger-ui,使用debugger断点...原创 2020-11-02 18:54:48 · 2856 阅读 · 0 评论 -
[译] React native 图片性能
翻译背景:最近我在做 React Native 项目的时候遇到了一个很奇怪的问题:IOS 的 release 包竟然比 debug 包要慢,不管是启动加载还是 tab 切换都慢,而且慢好几秒,这让我很不能理解。做过 React Native 项目的人都会知道,release 包一定会比 debug 包快。通过排查我发现,是引入了本地图片的原因,如果把本地图片改成网络图,加载速度就正常了。我在网上搜索关于类似的问题时,竟然没有人遇到同样的问题,这让我很费解。当然,可能大家都用的是网络图,也可能大部转载 2020-10-23 17:47:15 · 299 阅读 · 0 评论 -
react-native Text 文字垂直居中
import {Platform} from 'react-native'; label: { fontSize: OASize(11), color: OAColor.descText, height: OASize(20), textAlign: 'center', textAlignVertical: 'center', ...Platform.select({ ios: { lineHeight: OASize(20) }, .原创 2020-08-07 09:30:11 · 2894 阅读 · 0 评论 -
react-native TextInput组件设置editable=false后 外层容器的点击事件无法触发
react-native TextInput组件设置editable=false后 外层容器的点击事件无法触发,因此无法直接使用TextInput的组件的样式做一个假的输入框,然后点击进行场景跳转只能自行实现一个假的输入框原创 2020-08-05 11:27:36 · 883 阅读 · 0 评论 -
AndroidStudio:ERROR: Unable to resolve dependency for ...(一堆引用错误)
早上在AndroidSdtuio新建项目时出现:ERROR: Unable to resolve dependency for ':app@debug/compileClasspath': Could not resolve com.squareup.okhttp3:okhttp:4.0.1.Show DetailsAffected Modules: app具体报错如下图之前在服务器上新down的项目也见过如下错误,原因就是Grandle在下载包时候下载失败了,想起来之前在.转载 2020-08-05 10:35:20 · 515 阅读 · 0 评论 -
react native ios端 ScrollView滚动条显示在屏幕中间
场景软件版本 ios 13.3在ScrollView组件下,原本在最右侧的滚动条跑到了屏幕中间。解决方法给ScrollView加 scrollIndicatorInsets属性<ScrollView scrollIndicatorInsets={{ right: 1 }}>...</ScrollView>————————————————版权声明:本文为CSDN博主「不吃猫の鱼」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。转载 2020-07-24 17:17:38 · 1135 阅读 · 0 评论 -
TextInput组件在ios上自带输入法下无法输入中文(输入闪烁) ---- react-native 0.55.4
这个问题,是因为TextInput不能设置value或者defaultValue 和 onChangeText,否则会出现Ios无法输入中文的现象解决办法:一、参考https://www.jianshu.com/p/73df32483351二、使用loadsh的debounce防抖函数,限制过快的回调执行,js的函数防抖和节流参考https://www.cnblogs.com/youma/p/10559331.html...原创 2020-07-23 15:10:08 · 747 阅读 · 0 评论 -
React Native项目 Native module RNFSModule tried to override RNFSModule for module name RNFS...
问题描述:Native module RNDeviceModule tried to override RNDeviceModule for module name RNDeviceInfo解决方案:MainApplication.java特别检查你的protected List<ReactPackage> getPackages();这RNDeviceModule可能是列表中的两倍。也就是说你MainApplication里面的link库重复了,删除重复的就可以了。配图:.转载 2020-07-09 19:19:00 · 533 阅读 · 0 评论 -
React-Native0.55版本 TextInput组件手动失焦
添加函数:_onPress()_onPress() { console.log("press"); this.refs.InputText.blur(); this.refs.Password.blur(); }背景使用<TouchableOpacity><TextInput ref={'InputText'}></TextInput><TextInput ref={'Password'}原创 2020-07-09 18:36:43 · 376 阅读 · 0 评论 -
【MAC】brew install XXX一直卡在Updating Homebrew…的解决办法
提醒我们要更新watchman依赖包brew install watchmanbut! 命令执行后,下载速度超级超级超级无敌的慢,不能忍。隔着一堵墙在下载。。。5kb/s的下载速度 谁能忍?于是,我查询了网上的一些方案,都叫我改镜像源,改成中科大或者阿里或者清华的镜像源emmm,似乎颇有道理,手动操作一波:操作过程中,如果有报如下错误,请用命令删除对应文件(因为文件已经存在,新下载的哈希值校对不上):Already downloaded: /Users/username/.原创 2020-07-07 17:37:01 · 720 阅读 · 1 评论 -
Unable to load script from assets‘index.android.bundle‘.Make sure your bundle is packaged correctly
上网查了一下,很多文章都提出下面的解决方法:方案一这个方案不通用,我的情况是,项目移植时,从仓库clone下来的代码、文件缺失了,按照原本的文件进行替换补充即可方案二1.首先手动在android/app/src/main目录下建立一个assets文件夹2.然后在项目的根目录下执行react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output ...原创 2020-07-06 10:24:35 · 281 阅读 · 0 评论 -
react-native 连接真机debugger时打包弹出报错 android - Waiting for Debugger 解决
如下图,这是在打包到android真机设备上时,由手机弹出的,一脸懵逼,不知道啥情况搜索了一下,发现并不是唯一解有人说,这是端口占用;有人说,需要clean项目,重启adb服务;有人说,这是 AS 开的太多了;有人说,在androidStudio顶部的菜单按顺序点击,Run —> Attach debugger to Android process然鹅,对我都没用后面看到评论区的各位给出的方案是:关闭再重开一遍开发者模式,行之果然有效...原创 2020-07-06 10:01:35 · 534 阅读 · 0 评论 -
The minSdk version should not be declared in the android manifest file.
在react-native项目解析android包的时候,报了个错误error:The minSdk version should not be declared in the android manifest file.这个错误如下图所示会显示在右下角。出现这个问题的原因是Androidstudio3.0 以后不能在manifest.xml设置这些,必须在 gradle里设置解决方案 把manifest.xml里的sdk最小版本设置都删掉(此处参考了这篇文章https://blog.csdn...原创 2020-07-06 09:28:24 · 551 阅读 · 1 评论 -
XCode 移植项目 异常处理检查事项记录
1、由于git仓库会忽略一些文件,导致一些应有的配置文件缺失(bin/.env.dev || .env.prod隐藏文件,Mac使用快捷键shift+command+.查看)(build/init.env.js || init.prod.js)2、Pod工具软件升级,升级后执行pod install3、git克隆下来的项目记得yarn或者npm下载node_modules包4、如果是XCode11 可能在模拟器上会出现Unknown argument type '__attribut原创 2020-07-02 16:10:53 · 169 阅读 · 0 评论 -
调试移动端h5的新闻详情页 对于空格pc谷歌浏览器调试的渲染效果与手机终端的渲染效果不同
我接到了一个需求,实现新闻列表以及对应的新闻详情这是一个react-native项目,但是要求用移动端h5开发详情页,打包成dist后,作为一个链接以供rn列表项点击跳转问题来了,详情页的内容会在后台系统填写一些空格格式,pc谷歌浏览器调试移动端h5对于空格的渲染和手机终端的app的webview上看到的空格渲染宽度不同,这直接导致了文案无法同步对齐有鉴于此,决定采用iframe去做展示...原创 2020-07-01 10:09:21 · 593 阅读 · 2 评论 -
react-native 使用react-native-image-crop-picker上传图片、视频到服务端
博主主要卡在了上传数据这一步情景是这样的:每一次只允许选择一张图片,每次从相册中选择一图片点击右上角确定后,立即发送请求,上传该图片,并且下次再点击时,重复这个动作。(1)点击下图的上传资料(2)点击红框内的按钮(3)选择图片(4)选择完毕的同时,上传图片到服务器(这边展示的图片是本地的,不是服务器那请求回来的)上传图片的回调返回的Image信息:{creationDate: "1344408930"cropRect: nulldata: "/9.原创 2020-06-30 19:57:41 · 1700 阅读 · 0 评论 -
react-native 安卓android 阴影展示不正常 展示不全
在react-native中,IOS的阴影效果很好处理,但是android上,即便设置了elevation值,也会出现阴影展示异常,比如展示不全,看起来似乎被切割了下面就来介绍下如何解决:在react-native中,android的阴影需要符合如下条件:容器的内边距padding能够容纳多出来的阴影宽度*2倍(左右各1),上下左右边距都是如此 width: Dimensions.get('window').width - 32, elevation: OASize(1),.原创 2020-06-30 19:32:53 · 712 阅读 · 0 评论 -
react-native 绝对定位元素设置zIndex层级无效 仍旧被遮盖 如何设置层级
react-native层级的设置还是和PC、移动端h5不一样的如下图所示(博主指的是右上角的“待审核状态”绝对定位层级被卡片TouchableOpacity覆盖):以如下代码为例,如果将source对应的Image放在<TouchableOpacity>中,就会被TouchableOpacity覆盖层级,因为在RN中所有子元素都不会超过父元素的层级这个时候只需要在他们外层加一个容器进行相对定位,就能使得Image的层级回复正常!<View style={{ flex原创 2020-06-30 19:28:23 · 4514 阅读 · 1 评论 -
react-native transform如何写
transform: [{translateX: 100}]原创 2020-06-30 15:45:31 · 690 阅读 · 0 评论 -
react-native 如何显示视手机本地视频缩略图
已知文件路径只需在路径前面拼上file:///即可,如:<Image source={{uri:`file:///${mediaPath}`}} style={{width:200, height:200}} resizeMode='contain' />原创 2020-06-22 17:26:19 · 1108 阅读 · 1 评论 -
关于react-native 的 SectionList组件、FlatList组件实现九宫格样式(类似相册多item项排列)
针对SectionList组件的实现九宫格样式,效果图:效果图.png普遍:{"list": [ { "title" : "童声童梦", "loc" : 0, "data": [ {"icon":"gushihui", "title":"故事汇", "type":0}, {"icon":"huiben", "title":"绘本", "type":1}, {"icon":"geq.原创 2020-06-19 10:44:16 · 982 阅读 · 0 评论 -
react react-native yarn start 清除缓存
解决方法:方法一、yarn start --reset-cache方法二、第一步:npm指令清除npm缓存npm cache clean --force第二步:删除node_module包原创 2020-06-18 18:35:57 · 2519 阅读 · 0 评论 -
require unknown module 1679(react-native XCode跑起来报错)
我是在切换分支代码后出现这个问题的,是因为没有清除上次文件的缓存导致的,需要npn run start reset --cache或者XCode 进行 Product->Clean原创 2020-06-12 09:37:33 · 328 阅读 · 0 评论