React Native
文章平均质量分 69
spicyboiledfish
这个作者很懒,什么都没留下…
展开
-
CSS3中的flexbox口诀
参考文档:简易布局理解注意两点:1. flexDirection的默认值是column,而不是row; 2. flex只能指定一个数字值。通过自己做的demo,发现如下:1. flexDirection:'row' -> justifyContent:'flex-start'2. flexDirection:'row-原创 2017-02-28 16:04:35 · 750 阅读 · 0 评论 -
React Native 报错 Could not get BatchedBridge, make sure your bundle is packaged correctly.
React Native中在安卓原生的方法里封装过后,需要用Android Studio去重新跑一下。打开Android Studio,找到React Native项目,然后找到android文件夹,打开。用USB线插上安卓手机,连接Mac电脑,然后在菜单栏的中的绿色朝右的run箭头,点击,扫描到安卓机,开始跑。结果报错如下:问题原因:gradle相应的依赖包没有安装;原创 2017-09-15 11:50:18 · 1397 阅读 · 0 评论 -
如何编写一个README.md文件——Markdown语言详解
1. 标题:可以通过不同数量的“#”来标识是什么层级,对应于HTML中的H1-H6,显示效果如下:2. 图片:我们可使用如下语法来添加一个图片:![文字](图片的路径)![text](/path/img.png).3. 强调:我们可以使用下面的方式给我们的文本添加强调的效果:*强调* 或者 _强调_ (示例:斜体)**加重强调** 或者原创 2017-09-01 17:25:48 · 3029 阅读 · 0 评论 -
Xcode报错之SpringBoard was unable to service the request.
Xcode报错信息:xcode 8.0 beta 运行模拟器报错SpringBoard was unable to service the request.大神解决方法:Problem solved for by an Apple Engineer in the lab. It's an issue they're working on. The botto原创 2017-03-17 16:42:26 · 689 阅读 · 0 评论 -
React Native中tab切换栏在iPhone 6 Plus(10.2.1)一边有碎屑式的蓝色阴影
先贴出样式不兼容的图片:(此问题只出现在iPhone 6 Plus(10.2.1)的真机上,其余的包括模拟器,Android真机,iOS其余真机都未出现此问题)解决的核心代码:将以下代码:borderLeft: { borderTopLeftRadius: 5, borderBottomLeftRadius: 5,},borderRight: {原创 2017-10-26 19:30:10 · 1744 阅读 · 0 评论 -
React Native之报错await is a reserved word
老样子,先贴出报错信息:解决办法:函数中有异步操作的时候,函数名前要加async,如async getSystemAccount() { await...}原创 2017-12-21 18:08:06 · 10639 阅读 · 0 评论 -
如何配置Gradle环境变量
1. 首先,Gradle安装包我已经放在了百度网盘里面(gradle-3.4.1和gradle),链接: https://pan.baidu.com/s/1jIDznVK 密码: 63sd2. 打开你的资源库,Library( command + shift + . ),将你解压好的gradle包放在Library的根目录3. 打开终端,命令1:vi ~/.bash_profile原创 2017-12-28 14:22:08 · 1048 阅读 · 0 评论 -
React Native之Android 5.0以下系统WebView访问https页面变成空白页
在我们的React Native项目中,需要开发一个tab页面专门配置三方h5链接,供用户浏览。自动化测试:Android 5.0以下系统此tab页面为空白页面。看效果:而我们去查看这个三方的h5链接时,发现,这个链接是https协议开头的链接。http是超文本传输协议,信息是明文传输,但是https 则是具有安全性的ssl加密传输协议。当我们去用这台低版本系统的Andro原创 2017-12-28 15:32:03 · 3733 阅读 · 4 评论 -
React Native之如何实现图片轮播效果
我们都知道React Native中有一个很常见的Swiper组件。详情请查看链接:react-native-swiper使用方法:1. 安装第三方react-native-swiper组件:npm i react-native-swiper --save2. 引入第三方swiper组件import Swiper from 'react-native-swiper';3. 写我们自己的效果<...原创 2018-03-19 15:40:50 · 1719 阅读 · 0 评论 -
React Native之无fixed属性,如何开发一个悬浮按钮
赶了一个礼拜终于开发结束,今天提测,抽空我来总结下最近遇到的棘手问题。其实真正让开发成长的是产品和测试啊。很酷炫的效果,如果实现不了,开发心里也是很难过的。。。效果图先展示出来:需求如下:首页默认可以展示50条新闻,新闻做成分页功能,每次请求10条新闻。当页面展示到第20条新闻的时候,才出现悬浮按钮“发现更多精彩”;一直滑动到50条,悬浮按钮一直存在。当页面向上滑动至少于20条新闻时,再将这个悬浮...原创 2018-03-20 17:15:44 · 12197 阅读 · 0 评论 -
React Native之虚线dashed属性在Android机不兼容问题解决
borderStyle:"dashed" 在安卓机上无效果。iOS中可以正常显示虚线;但是安卓只能显示为实线。我的解决办法:lineOne:{ width:25, height:0, borderWidth:0.8, borderColor:'red', borderStyle:'dashed', borderRadius:0.1,}解决点:1. height...原创 2018-03-20 17:33:51 · 8947 阅读 · 6 评论 -
如何解决Android机(主要是华为手机)上人民币符号¥只显示一横
针对¥符号,在部分安卓机上(主要是华为手机)出现,¥变成了少一横。如何解决呢?统一将¥改成 &yen;注意:不需要加空格,末尾是带分号的。原创 2018-03-22 10:25:05 · 6104 阅读 · 2 评论 -
React Native之如何写多个嵌套的三目运算表达式
目前我们使用的React Native或者ReactJS中,经常会使用到三目运算符来展现不同条件状态下的界面效果;此时我们就用到了三目运算啊。举例说明:{this.state.isMyIntro ? <MyIntro /> : null}这就是一个很简单的三目运算,来表达不同页面展示;当this.state.isMyIntro为true的情况下,就展示MyIntro组件;否则就不展示。...原创 2018-04-04 15:00:13 · 5011 阅读 · 0 评论 -
React Native之如何解决iOS 9以上系统对HTTP请求的限制
最近新搭建的一个项目,遇到一个报错,在使用fetch请求API的时候,报错:TypeError: Network request failed.原因:由于这个API请求是http的协议请求,在iOS9以上系统,已经把http协议的请求限制了。iOS9引入了新特性App Transport Security (ATS)。详情:App Transport Security (ATS)新特性要求App内...原创 2018-05-29 17:33:35 · 2338 阅读 · 0 评论 -
React Native报错com.android.ide.common.process.ProcessException: Failed to execute aapt.
报错环境:运行命令 react-native run-android时,报错:Error: "C" is not a valid file-based resource name character: File-based resource names must contain only lowercase a-z, 0-9, or underscore.译:“C” 不是一个合法的资源文件的命名。...原创 2018-06-13 18:13:55 · 4996 阅读 · 0 评论 -
RN报错Cannot add a child that doesn't have a YogaNode to a parent without a measure function!
首先贴出报错信息:具体报错:Cannot add a child that doesn't have a YogaNode to a parent without a measure function!(Trying to add a "RCTRawText [text: ]" to a "RCTView")报错原因:1. 在组件代码中添加了注释2. 标签包裹次序出现了问题3. map函数写法有问...原创 2018-06-14 17:58:02 · 2065 阅读 · 0 评论 -
如何创建一个可执行bat文件
首先打开当前项目的所在文件夹:紧接着:鼠标点击文件路径栏,在路径地址前写上cmd ,(cmd+空格)。运行项目,如果是react native项目,就可以直接npm start.这样一个简单的执行,如何做成可执行文件呢?在桌面创建一个txt文件,写上起服务的所有cmd的步骤命令:保存文件,并将扩展名改成.bat,然后双击即可启动服务。原创 2017-08-23 11:05:41 · 7257 阅读 · 0 评论 -
React Native之如何让一个自适应高度的弹层的弹框上下垂直居中
需求描述:弹层中的弹框中银行标题以及内容都是接口请求的数据,目前布局是标题框和底部确定按钮是高度和宽度固定,中间的内容部分给了最低高度并且可以随内容增多而高度自适应。现在,产品需要这个不定高度的弹框可以垂直居中显示。尝试的解决办法有以下两种:方案一:由于我使用的是Animated动画,首先让遮罩层淡入,再让弹框从下到上的上移,使用的是将弹框绝对定位,需要bo原创 2017-07-28 14:44:28 · 3846 阅读 · 0 评论 -
React Native之FlexBox布局上的一些心得
根据我近三个月的版本迭代过程中,UI提到的关于样式细节的问题,很多都包括了居中对齐,上下对齐,图标与文字居中对齐等等。对于布局方式,优先选择FlexBox的布局方式,包括其自带的flexDirection、alignItems和 justifyContent 总结:多用FlexBox布局方式,Modal组件进行弹层显示;而少用绝对定位布局,用Bottom/Top/Left/R原创 2017-08-11 17:16:29 · 305 阅读 · 0 评论 -
文本输入框TextInput的属性列表
参考:TextInput属性名称类型意义默认值autoCapitalizeenum(‘none’, ‘sentences’, ‘words’, ‘characters’)针对哪种类型自动大小写无autoCorrectbool自动更正trueau原创 2017-03-01 11:59:59 · 1383 阅读 · 0 评论 -
React Native布局篇总结
总结react 宽度基于pt为单位, 可以通过Dimensions 来获取宽高,PixelRatio 获取密度,如果想使用百分比,可以通过获取屏幕宽度手动计算。基于flex的布局view默认宽度为100%水平居中用alignItems, 垂直居中用justifyContent基于flex能够实现现有的网格系统需求,且网格能够各种嵌套无bug图片布局原创 2017-03-17 18:26:11 · 834 阅读 · 0 评论 -
React Native 之 flexbox 布局详解篇
本文详情本文讲解React Native中的布局,该布局用CSS的flex布局,掌握了这个布局对后面RN应用的开发用途非常之大。本文由 showCar 投稿(点击 阅读原文 )。文章地址: http://blog.csdn.net/u0144868801.常用属性RN的flexbox主要有以下几个属性alignItems,alignSelf,flex,flexDirecti转载 2017-03-09 18:42:55 · 542 阅读 · 0 评论 -
React Native动画-Animated
核心API大部分你需要的东西都来自Animated模块。它包括两个值类型,Value用于单个的值,而ValueXY用于向量值;还包括三种动画类型,spring,decay,还有timing,以及三种组件类型,View,Text和Image。你可以使用Animated.createAnimatedComponent方法来对其它类型的组件创建动画。这三种动画类型可以用来创建几乎任何你需原创 2017-03-16 15:31:56 · 815 阅读 · 0 评论 -
React Native 中组件的生命周期
概述就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:如图,可以把组件生命周期大致分为三个阶段:第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的转载 2017-04-13 13:53:29 · 386 阅读 · 0 评论 -
React Native之弹框存在TextInput,输入框有焦点情况下需要点击两次才可触发事件-解决
Bug情况描述:React Native项目中,点击按钮A出现弹框浮层,弹框中需要TextInput输入数字,键盘浮起来;这时候点击 取消按钮L 或者 确定按钮R,只是让键盘收起,但是并没有触发 取消 或 确定 的事件,必须要再点击第二次才可以触发。另外,当输入框有焦点的情况下,点击 屏幕任意位置(除了键盘),可使键盘收起隐藏;期待效果:当输入框输完数字后,光标焦点仍然存在,键盘也未消失,这时原创 2017-04-19 10:33:41 · 19850 阅读 · 21 评论 -
React Native 报错 singleValue.stopTracking is not a function -解决
bug发生的情况:这是一个点击出现短信验证码弹框的界面,用到了Animated动画和Modal。弹框中当倒计时结束,显示“重发验证码”,这时候点击“重发验证码”,背景整体变黑,不再是0.7的半透明。于是,我在倒计时代码中添加了:BgOpacity:0.解决办法:在BgOpacity中的0改成初始化的值:即new Animated.Value(0)原创 2017-05-09 16:24:37 · 4915 阅读 · 0 评论 -
React Native之RCTDeviceEventEmitter发送通知emit和监听接收addListener的用法
第一步:引入RCTDeviceEventEmitter://两种方法:import为ES6语法:import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter'// var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');第二步:发送通知:RCTDevice原创 2017-05-31 18:05:27 · 9019 阅读 · 0 评论 -
React Native之Image组件使用时Android和iOS兼容性
在React Native中Image组件有两种写法:uri: 'app_icon'}} style={{width: 40, height: 40}} />require('./img/check.png')} />如果你的代码中需要使用ajax网络请求出img的url地址,就需要使用uri的方法来写注:以上代码中使用了uri,而且style中写明了图片的宽高。原创 2017-06-16 10:20:52 · 1525 阅读 · 0 评论 -
React Native之九宫格布局
九宫格的布局,其实大家都耳熟能详了,那么如何用react native来开发九宫格布局呢?首先,贴上UI需求图:对于以上的布局,虽然目前图片还是很少,还是希望大家可以用最优雅的方式开发代码,简洁好看,复用性也高。开发的思想:将图片的所有信息(包括URL地址,图片文字,是否是大图还是小图等等)都整合在一个对象里面,可以在当前模块中数据传递,也可以支持从上级传递原创 2017-06-30 15:47:02 · 2168 阅读 · 0 评论 -
React Native之Android 和 iOS在点击触发事件时的兼容性处理
最近,我在项目中遇到了一个bug,bug的情况描述大致如下:当点击按钮A时,弹出弹层,弹层有一个按钮B,逻辑是:当点击按钮B时,首先弹层消失,紧接着调取摄像头开始人脸识别的流程。在Android上正确显示,但是iOS中只是弹层消失,并没有调取人脸识别事件。对于这种情况,我之前开发过程中确实测试过simulator模拟器,iOS的模拟器显示是正常的,另外现在测试说Android也是好的,可以原创 2017-07-05 13:52:58 · 1855 阅读 · 0 评论 -
React Native之如何优化组件来达到减少代码冗余
对于一个对代码整洁规范的一枚程序媛,是万万不能允许冗余代码的存在,即便是组件,我们总是在寻求更好的方法来让组件开发的更完美,且复用度更高。如下,是我最近开发的两个功能,功能相似,由于开发时间紧张,一开始分为两个组件开发,功能测试完成后开始考虑其优化,并且已经成功优化成一个组件。解决办法简单来说就是:利用传参为函数的方式,进行回调函数的调用;组件内的内容改变,通过一个组件内的全局变量,父组件在传原创 2017-07-25 15:47:43 · 880 阅读 · 0 评论 -
React Native之如何在Android上添加阴影
官网中明确表示在react native中阴影的样式属性shadow...都是只支持iOS的,并不支持Android。目前有个方法,可以让Android有灰色的阴影,但是无法指定Android机上的阴影色值,只能是灰色的默认。elevation:4 这个属性中的4是代表阴影的高度。且这个属性添加后,不会影响iOS机上的原本的彩色的阴影颜色,只是在Android机上显示的是默认的灰色的阴影。bt...原创 2017-07-25 16:00:00 · 18529 阅读 · 4 评论 -
React Native之AsyncStorage本地存储
React Native官网对AsyncStorage的API:http://reactnative.cn/docs/0.47/asyncstorage.html核心代码:AsyncStorage.getItem(key).then( (value) => { // 逻辑判断 AsyncStorage.原创 2017-08-09 17:33:54 · 775 阅读 · 0 评论 -
React Native中Image报错Missing request token for request: <NSMutableURLRequest: 0x..>{URL:...png}
首先贴出来报错:这个问题,是因为用Image组件请求网络图片的时候,每刷新十次会有一次没有请求到,偶然出现的报错。解决这类问题,一定要对图片的URL地址进行判空:源码供上:{ Filter.isNotEmpty(this.props.upgradeObj) && Filter.isNotEmpty(this.props.upgradeObj.imgUrlPath)原创 2017-08-11 10:27:27 · 3952 阅读 · 0 评论 -
React Native之react-native run-android运行命令报错问题解决
报错如下:Starting JS server...Building and installing the app on the device (cd android && ./gradlew installDebug...Could not install the app on the device, read the error above for detail...原创 2018-07-18 18:41:23 · 8707 阅读 · 2 评论