7 coder_小刀

尚未进行身份认证

投身移动互联网的85后码农

等级
TA的排名 5k+

《React-Native系列》45、踩坑记录

记录几个最近在项目中遇到的坑,RN版本使用0.29.2。1、在Android平台上Text标签的lineHeight需要设置成int,否则会crash;在iOS平台上没有问题。如下图:com.facebook.react.bridge.UnexpectedNativeTypeException:TypeError:expecteddynamictype`int64',butha

2017-03-16 11:26:37

《React-Native系列》44、基于多个TextInput的键盘遮挡处理方案优化

以前写过两篇关于在ReactNative上处理键盘遮挡输入表单TextInput的情况,建议读者可以先看看1、《React-Native系列》33、键盘遮挡问题处理2、《React-Native系列》42、键盘遮挡问题官方处理方法KeyboardAvoidingView以前给出的解决方案,是使用ScrollView的scrollTo方法,将表单的输入域移动到可见区域(从键盘遮挡处移到键盘上方)。

2017-02-17 20:26:34

致即将逝去的2016 【再出发】

2016年还有最后的2个工作日,也该写写年终总结了,我把2016年的年终总结主题定义为【再出发】。

2016-12-29 12:32:33

《React-Native系列》43、通用容器和导航设计方案

在现阶段我们的RN实践都是基于已发布过的APP,譬如将从某个入口进入的子模块都替换成RN页面。那么我们可以将这个子模块设计成一个通用RN容器,所有的RN页面都在RN容器内部跳转。RN容器在iOS使用UIViewController、Android使用Activity或者Fragment,加载bundle文件,正常情况下,一个模块只有一个bundle文件。要实现页面的跳转,我们可以使用Navigat

2016-11-23 23:19:21

与我联系

从开始写《ReactNative实战系列》开始,就不断有朋友咨询一些博客中Demo遇到的问题,为了方便交流,后续改进如下:1、后续博客中的Demo尽量把源码打包,上传到CSDN资源库2、留下私人邮箱:birenjie8080@qq.com,可以发邮件交流,尽量当日回复

2016-11-22 20:40:00

《React-Native系列》42、键盘遮挡问题官方处理方法KeyboardAvoidingView

今天,偶然翻Github发现了KeyboardAvoidingView,原来FaceBook的开发者们也意识到了键盘遮挡的问题。从0.31版本开始,提供了官方的解决方案。源码地址如下:https://github.com/facebook/react-native/blob/master/Libraries/Components/Keyboard/KeyboardAvoidingView.js使用

2016-11-22 13:34:01

《React-Native系列》React-Native实战系列博客汇总

从2016年7月份开始,坚持写ReactNative系列博客,记录工作中遇到的点滴。今天把博客汇如下:《React-Native系列》1、初探React-Native《React-Native系列》2、RN与native交互与数据传递《React-Native系列》3、RN与native交互之Callback、Promise《React-Native系列》4、表单界面代码编写《React-Nati

2016-11-07 21:46:13

《React-Native系列》41、刨根问底Picker组件

最近做一个需求,需求里需要实现一个类似Picker组件的效果,如下图所示,页面布局很简单,上面一个View包含两个Text或者Touch*组件,下面放置一个Picker组件。这个组件在app中已经存在,本来打算直接桥接native的,觉得这样基础的组件,还是使用RN的吧,这样就开始了我的Picker刨根之路。布局代码如下:<Animated.Viewstyle={[styl

2016-11-03 11:31:03

《React-Native系列》40、 ReactNative之bundle文件瘦身

【背景】目前,我们的app中采用Native+RN的混合模式开发,每个由RN开发的页面,页面的加载都是加载的一个Bundle文件,而一个Bundle文件的大小为500-600Kb。在没有内置bundle文件的情况下,用户想要使用所有由RN开发的功能,需要下载n*500kb的文件。在有内置bundle文件的情况下,如果一个页面有更新,那么用户至少需要下载500kb的文件。在移动端,频繁的需要去

2016-10-31 16:42:27

google-diff-match-patch使用说明

要对文本文件的进行比较的时候,可以考虑使用google-diff-match-patch算法,它可以对文本文件进行比较、匹配和生成补丁的操作。他的官网是:http://code.google.com/p/google-diff-match-patch/CSDN下载:http://download.csdn.net/detail/modern1314/5323399使用googlediff的话,这

2016-10-20 14:22:46

《React-Native系列》39、 ReactNative之键盘Keyboard

今天我们来说下RN对键盘事件的支持。在react-native的Component组件中有个Keyboard.github地址如下:https://github.com/facebook/react-native/tree/770091f3c13f7c1bd77c50f979d89a774001fbf0/Libraries/Components/Keyboard我们先来看下官方提供的例子,监听键

2016-10-12 17:53:10

《React-Native系列》38、 ReactNative混合组件封装

在我们做ReactNative项目的过程中,我们会发现由ReactNative提供给我们的组件或API往往满足不了我们的需求,常常需要我们自己去封装Native组件。今天我们介绍下如果封装一个简单的ReactNative组件,Native代码采用Android。需求:实现一个组件、实现类似Android的Toast功能。1、创建一个RNprojectreact-nativeinitHybri

2016-10-11 14:27:16

《React-Native系列》37、 ReactNative百度地图开源组件使用

上一篇文章写了ReactNative自带的MapView,很显然不是我们想要的。今天我们介绍一下一个开源的百度地图开源组件,详细描述它的使用方法。开源地址:https://github.com/lovebing/react-native-baidu-map  百度地图ReactNative模块,支持reactnative0.30+好,我们来描述它的使用步骤,以及需要注意的问题,我是在

2016-09-30 16:26:55

《React-Native系列》36、 ReactNative地图组件

写在前面的话:明天就国庆了,祝伟大的祖国母亲节日快乐!今天,介绍地图组件。ReactNative官方提供了一个MapView的组件,我们先来说说它吧。先来看下他的API吧。iOS  annotations[{latitude:number,longitude:number,animateDrop:bool,title:string,subtitle:string,hasLef

2016-09-30 15:03:58

《React-Native系列》35、 RN在Android下支持gif的另一种方案

在前面的文章中,我们介绍过在RN中Android如果处理Gif格式的图片。参考:http://blog.csdn.net/codetomylaw/article/details/52280828我们是把图片切成n张,如果利用定时器去轮播图片。这种方案存在的问题:1、需要预加载n张图片,哪怕页面最后不使用gif,n张图片也会被加载到内存;2、需要自己处理定时器逻辑;有没有什么更好的方式呢?好,我们今

2016-09-28 18:42:58

《React-Native系列》34、 ReactNative的那些坑

梳理了下ReactNative中的一些坑,你踩没踩过,它就在那里。1、fetchfetch没有提供超时时间,设置timeout貌似没有作用。标红的地方不能调用response.json()或.text()方法,哪怕是通过console.log()输出也不行,如果想查看数据,只能alert。2、Image标签使用本地资源图片的时候需要制定宽度和高度,使用网络资源没有限制。3、Text标签iOS下

2016-09-24 18:21:51

《React-Native系列》33、 键盘遮挡问题处理

最近在项目中,使用TextInput组件的时候,发现键盘弹出的时候,遮盖了表单。咨询了下做iOS的同学,他们的处理是计算键盘的高度和当前输入域的位置,将界面向上移动一段距离。那在ReactNative中是否也可以有类似的处理方法呢?答案是肯定的,我们使用ScrollVIew的scrollTo方法,我们也主要是讲这种方法。具体方案如下:组件render方法中使用ScrollView,并且设置scro

2016-09-23 21:08:44

《React-Native系列》32、 基于Fetch封装HTTPUtil工具类

关于http请求的工具类,有很多,譬如:httpclient,okhttp。那么关于RN的处理HTTP请求的工具类呢,目前还没有找到,所以自己简单封装了一个,避免代码里到处都是fetch方法。好了,完整代码如下:varHTTPUtil={};/***基于fetch封装的GET请求*@paramurl*@paramparams{}*@paramhead

2016-09-19 21:41:15

《React-Native系列》31、 Fetch发送POST请求的坑与解决方案

我们在请求http接口时候,通常都会使用get和post的方式,针对表单提交这类的请求,我们通常采用post方式。那么在RN中的FetchAPI中post提交有哪些坑呢?让我们撸起来。我们先来说说Server端的代码,通常我们从Request获取参数时的方法为:StringparaValue=request.getParameter(paraName);我们下面说的判断能不能获取参数,就是

2016-09-19 19:24:39

《React-Native系列》30、 RN组件间通信

今天我们来说一说RN的组件之间的通信。ReactNative的核心之一是他的组件化,组件化的核心是组件之间的通信。组件是有层级来区分的,譬如:父组件子组件。我们先来讲解一个例子。这个是我们要实现的功能,是一个表单的一部分,首先我们想到的是抽象组件。组件有2种状态选中状态,显示后面的课时未选中状态,不显示后面的课时组件的代码如下:importReact,{Component}from'

2016-09-13 09:11:29

查看更多

勋章 我的勋章
  • 专栏达人
    专栏达人
    授予成功创建个人博客专栏的用户。专栏中添加五篇以上博文即可点亮!撰写博客专栏浓缩技术精华,专栏达人就是你!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!