ReactNative
文章平均质量分 84
coder_小刀
投身移动互联网的85后码农
展开
-
《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 · 7054 阅读 · 4 评论 -
《React-Native系列》38、 ReactNative混合组件封装
在我们做ReactNative项目的过程中,我们会发现由ReactNative提供给我们的组件或API往往满足不了我们的需求,常常需要我们自己去封装Native组件。今天我们介绍下如果封装一个简单的ReactNative组件,Native代码采用Android。需求:实现一个组件、实现类似Android的Toast功能。1、创建一个RN projectreact-native init Hybri原创 2016-10-11 14:27:16 · 4791 阅读 · 0 评论 -
《React-Native系列》27、 Redux的异步数据流
我们再前面讲的 redux 中的数据流都是同步的,流程如下:view -> actionCreator -> action -> reducer -> newState -> container component 但是,在大多数的前端业务场景中,需要和后端产生异步交互,譬如:网络api的请求。Redux中怎么来实现异步的数据流呢?异步Action通常我们创建的Action如下:export co原创 2016-09-08 21:03:12 · 4684 阅读 · 0 评论 -
《React-Native系列》33、 键盘遮挡问题处理
最近在项目中,使用TextInput组件的时候,发现键盘弹出的时候,遮盖了表单。咨询了下做iOS的同学,他们的处理是计算键盘的高度和当前输入域的位置,将界面向上移动一段距离。那在ReactNative中是否也可以有类似的处理方法呢?答案是肯定的,我们使用ScrollVIew的scrollTo方法,我们也主要是讲这种方法。具体方案如下:组件render方法中使用ScrollView,并且设置scro原创 2016-09-23 21:08:44 · 17568 阅读 · 3 评论 -
《React-Native系列》5、RN实现弹出选择界面与动画效果
今天做了个弹出框,见文章最后图片所示,弹出的时候从屏幕下方弹入,用户选择后又从下方弹出,同时有遮罩效果。首先,我们是怎么实现弹出框,我这边用的是absolute 绝对定位,包括弹层的覆盖,Dialog的绝对位置。Dialog的布局在这儿就不说了,flex-box、盒子模型...那么再来说说动画。参考:RN动画入门Animated1、创建一个Animated.Value原创 2016-07-20 21:06:24 · 23029 阅读 · 13 评论 -
《React-Native系列》32、 基于Fetch封装HTTPUtil工具类
关于http请求的工具类,有很多,譬如:httpclient,okhttp。那么关于RN的处理HTTP请求的工具类呢,目前还没有找到,所以自己简单封装了一个,避免代码里到处都是fetch方法。好了,完整代码如下:var HTTPUtil = {};/** * 基于 fetch 封装的 GET请求 * @param url * @param params {} * @param head原创 2016-09-19 21:41:15 · 9678 阅读 · 1 评论 -
《React-Native系列》31、 Fetch发送POST请求的坑与解决方案
我们在请求http接口时候,通常都会使用get和post的方式,针对表单提交这类的请求,我们通常采用post方式。那么在RN中的Fetch API中post提交有哪些坑呢?让我们撸起来。我们先来说说Server端的代码,通常我们从Request获取参数时的方法为:String paraValue = request.getParameter(paraName);我们下面说的判断能不能获取参数,就是原创 2016-09-19 19:24:39 · 29270 阅读 · 17 评论 -
《React-Native系列》15、 RN之可触摸组件
今天,我们来看下ReactNative提供的可触摸组件。分别为:TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback。TouchableWithoutFeedback控件是触摸点击不带反馈效果的,另外三个都是有反馈效果。这三个组件都继承了所有TouchableWithoutF原创 2016-08-14 23:12:58 · 3918 阅读 · 1 评论 -
《React-Native系列》26、 ReactNative实现图片上传功能
在查看ReactNative的官方文档的时候,你会发现其实Fackbook是没有提供图片上传功能的。如果我们的项目里需要使用图片上传(用JS 实现图片上传),那我们有没有什么办法呢?通过搜索react-native的github, 会发现里面有这么一篇文章:https://github.com/facebook/react-native/issues/5308解决方案:采用FormData来实现,原创 2016-09-06 09:13:43 · 25821 阅读 · 2 评论 -
《React-Native系列》14、 RN学习之NodeJS
由于ReactNative使用了NodeJS环境,以前没有系统学习过NodeJS,故花点时间学习下。了解ReactNative里关于NodeJS部分的知识。我们先看看一个RN项目的目录,如下:我们看到的node_modules 和package.json都是和NodeJS相关联的。 学习完这边文章你就能明白:1、我们在调试时,使用的包服务器,启动命令:npm start ,是什原创 2016-08-14 12:44:00 · 6761 阅读 · 0 评论 -
《React-Native系列》41、刨根问底Picker组件
最近做一个需求,需求里需要实现一个类似Picker组件的效果,如下图所示,页面布局很简单,上面一个View 包含两个Text或者Touch*组件,下面放置一个Picker组件。这个组件在app中已经存在,本来打算直接桥接native的,觉得这样基础的组件,还是使用RN的吧,这样就开始了我的Picker刨根之路。布局代码如下: <Animated.View style={[styl原创 2016-11-03 11:31:03 · 8356 阅读 · 9 评论 -
《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 · 6512 阅读 · 0 评论 -
《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 · 5514 阅读 · 2 评论 -
《React-Native系列》45、踩坑记录
记录几个最近在项目中遇到的坑,RN版本使用0.29.2。1、在Android平台上Text标签的 lineHeight 需要设置成int ,否则会crash;在iOS平台上没有问题。如下图:com.facebook.react.bridge.UnexpectedNativeTypeException: TypeError: expected dynamic type `int64', but ha原创 2017-03-16 11:26:37 · 7724 阅读 · 4 评论 -
《React-Native系列》40、 ReactNative之bundle文件瘦身
【背景】目前,我们的app中采用Native+RN的混合模式开发,每个由RN开发的页面,页面的加载都是加载的一个Bundle文件,而一个Bundle文件的大小为500-600Kb。在没有内置bundle文件的情况下,用户想要使用所有由RN开发的功能,需要下载 n* 500 kb的文件。在有内置bundle文件的情况下,如果一个页面有更新,那么用户至少需要下载500kb的文件。在移动端,频繁的需要去原创 2016-10-31 16:42:27 · 8181 阅读 · 11 评论 -
《React-Native系列》19、 ListView组件之上拉刷新(iOS和Android通用)
ReactNative提供了RefreshControl下拉刷新组件,但是没有提供上拉刷新组件,上拉刷新在App中是很常用的。今天我们来实现一个iOS和Android通用的上拉刷新功能。下面简要介绍下我实现的思路。如果你对ListView的基础知识不是很清楚,建议先移步:《React-Native系列》16、 RN组件之ListView思路:1、常量定义:const原创 2016-08-17 23:06:22 · 13235 阅读 · 16 评论 -
《React-Native系列》44、基于多个TextInput的键盘遮挡处理方案优化
以前写过两篇关于在ReactNative上处理键盘遮挡输入表单TextInput的情况,建议读者可以先看看1、《React-Native系列》33、 键盘遮挡问题处理2、《React-Native系列》42、键盘遮挡问题官方处理方法KeyboardAvoidingView以前给出的解决方案,是使用ScrollView的scrollTo方法,将表单的输入域移动到可见区域(从键盘遮挡处移到键盘上方)。原创 2017-02-17 20:26:34 · 7430 阅读 · 3 评论 -
与我联系
从开始写《ReactNative实战系列》开始,就不断有朋友咨询一些博客中Demo遇到的问题,为了方便交流,后续改进如下:1、后续博客中的Demo尽量把源码打包,上传到CSDN资源库2、留下私人邮箱:birenjie8080@qq.com ,可以发邮件交流,尽量当日回复原创 2016-11-22 20:40:00 · 2406 阅读 · 3 评论 -
《React-Native系列》43、通用容器和导航设计方案
在现阶段我们的RN实践都是基于已发布过的APP,譬如将从某个入口进入的子模块都替换成RN页面。那么我们可以将这个子模块设计成一个通用RN容器,所有的RN页面都在RN容器内部跳转。RN容器在iOS使用UIViewController、Android使用Activity或者Fragment,加载bundle文件,正常情况下,一个模块只有一个bundle文件。要实现页面的跳转,我们可以使用Navigat原创 2016-11-23 23:19:21 · 4202 阅读 · 0 评论 -
《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 · 21213 阅读 · 5 评论 -
《React-Native系列》37、 ReactNative百度地图开源组件使用
上一篇文章写了ReactNative自带的MapView,很显然不是我们想要的。今天我们介绍一下一个开源的百度地图开源组件,详细描述它的使用方法。开源地址:https://github.com/lovebing/react-native-baidu-map 百度地图 React Native 模块,支持 react native 0.30+好,我们来描述它的使用步骤,以及需要注意的问题,我是在原创 2016-09-30 16:26:55 · 16496 阅读 · 3 评论 -
《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 · 10005 阅读 · 3 评论 -
《React-Native系列》13、 组件封装之Dialog(iOS和Android通用)
最近在项目中封装了个Dialog组件,iOS和Android平台上通用。组件Dialog显示时,从页面顶部滑动到中间,点击确认或取消后,从页面底部划出页面,需要注意动画的实现。源码如下:'use strict';import React, { Component } from 'react';import { StyleSheet, View, Image,原创 2016-08-13 22:31:07 · 6187 阅读 · 15 评论 -
《React-Native系列》12、 API模块之PixelRatio和Dimensions
PixelRatio和Dimensions 是ReactNative提供的API,这个在我们编写RN页面的时候必须要使用的。PixelRatio我们还是先看看官网怎么介绍的。PixelRatio类提供了访问设备的像素密度的方法。根据像素密度获取指定大小的图片如果应用运行在一个高像素密度的设备上,显示的图片也应当分辨率更高。一个取得缩略图的好规则就是将显示尺寸乘以像素密度比:原创 2016-08-13 22:14:58 · 6909 阅读 · 0 评论 -
《React-Native系列》23、 js实现下拉刷新效果(Android和iOS通用)
这几天项目里有这么个需求:一个列表页需要支持下拉刷新和上拉刷新。其中上拉刷新效果已经时间,具体思路见:《React-Native系列》19、 ListView组件之上拉刷新(iOS和Android通用)今天我们重点来说说下拉刷新的实现。ReactNative提供一个组件RefreshControl,但是不支持自定义刷新UI,我们的RN项目只是整个APP的一部分,需要和原生的UI原创 2016-08-24 22:30:27 · 8945 阅读 · 3 评论 -
《React-Native系列》8、RN如何打离线包
上一篇文章我们谈了bundle文件的加载和维护 ,以及在线包和离线包的区别,那我们今天来谈谈ReactNative如何打离线包。我们先来看看官网怎么说的Building your app for production You have built a great app using React Native, and you are now itching to rel原创 2016-08-06 22:10:35 · 8128 阅读 · 0 评论 -
《React-Native系列》18、 RN之定时器Timer
在web开发中,我们通常需要使用定时器功能,使用setTimeout和setInterval函数。那么在ReactNative中,是否也提供了定时器的功能呢? 答案是肯定的。我们还是先看看官网怎么说的。定时器是一个应用中非常重要的部分。React Native实现了和浏览器一致的定时器Timer。提供的方法如下:setTimeout, clearTimeouts原创 2016-08-17 22:07:48 · 18443 阅读 · 1 评论 -
《React-Native系列》17、 RN中this所引起的undefined is not an object错误
在我们编写RN代码的时候经常会出现一个错误,undefined is not an object(evaluating 'this.refs' ).undefined is not an object错误,提示我们未知的对象,该句话的含义就是我们没有定义该对象。但是this就是当前对象,为什么还会出现如此问题?只有一种可能,就是当前引用的this和this.setState的this不是指向同原创 2016-08-15 23:31:22 · 26793 阅读 · 0 评论 -
《React-Native系列》16、 RN组件之ListView
今天来谈谈ReactNative提供的ListView组件,ListView是我们最常用的组件。还是先来看看官网怎么说的。ListView - 一个核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListView.DataSource数据源,然后给它传递一个普通的数据数组,再使用数据源来实例化一个ListView组件,并且定义它的renderRow回调原创 2016-08-15 22:52:23 · 7443 阅读 · 0 评论 -
《React-Native系列》7、bundle文件的加载和维护
前段时间,app里某个功能使用RN开发,完成了上线,下面我们来说说我们是怎么处理bundle文件的。先来说一个概念:FaceBook宣传ReactNative时,热更新是不得不提的功能,可是官网文档和网上也没有提供比较完善的热更新的思路。我们先来看看ReactNative是怎么处理bundle文件的。可以有如下两种方式:1、app发版时,将bundle文件内置到app中,同时将原创 2016-08-04 09:16:11 · 6051 阅读 · 0 评论 -
《React-Native系列》6、Navigator语法介绍及经典应用
今天来介绍下ReactNative的Navigator组件。先来看看官网是怎么说的:使用导航器可以让你在应用的不同场景(页面)间进行切换。导航器通过路由对象来分辨不同的场景。利用renderScene方法,导航栏可以根据指定的路由来渲染场景。可以通过configureScene属性获取指定路由对象的配置信息,从而改变场景的动画或者手势。查看Navigator.SceneConfigs来原创 2016-07-28 22:38:31 · 8650 阅读 · 5 评论 -
《React-Native系列》4、表单界面代码编写
今天就开始投入到RN项目了,做后端出生,写Android和iOS确实有点勉强,不过还是要把这段经历记录下来。要实现的功能界面如下:这个是最简单的Form表单,第一步实现界面吧,不管点击效果,不管筛选控件... 思路:我把这几类控件分为了3类:1、带头像的一行抽取成一个组件2、带输入框 TextInput的抽象成一个组件3、带选择项的抽取成一个组件原创 2016-07-18 22:55:13 · 8614 阅读 · 2 评论 -
《React-Native系列》3、RN与native交互之Callback、Promise
接着上一篇 React-Native系列 2、RN与native交互与数据传递 ,我们接下来研究另外的两种RN与Native交互的机制一、Callback机制首先Calllback是异步的,RN端调用Native端,Native会callback,但是时机是不确定的,如果多次调用的话,会存在问题。Naive端是无法主动通过回调函数向RN端发送消息的。具体实现代码如下:Nat原创 2016-07-16 23:49:16 · 10905 阅读 · 4 评论 -
《React-Native系列》2、RN与native交互与数据传递
RN怎么与native交互的呢?下面我们通过一个简单的Demo来实现:RN页面调起Native页面,Native页面选择电话本数据,将数据回传给RN展示。首先是 Native侧 1、MainActivity package com.rnandroid01;import android.content.Intent;import android.database.Cursor;原创 2016-07-16 23:11:20 · 8379 阅读 · 3 评论 -
《React-Native系列》9、 Networking之fetch
今天,我们来看看RN怎么处理网络请求的,主要来看看fetch API。还是,先来看看官网怎么说的。Using Fetch React Native provides the Fetch API for your networking needs. Fetch will seem familiar if you have used XMLHttpRequest or原创 2016-08-06 23:28:13 · 3411 阅读 · 0 评论 -
React/React Native 的ES5 ES6写法对照表
转自:React/React Native 的ES5 ES6写法对照表很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是ES5版本的,所以很多人在学习的时候连照猫画虎都不知道怎么做。今天在此整理了一些ES5和ES6的写法对照表,希转载 2016-08-07 15:24:49 · 1654 阅读 · 0 评论 -
《React-Native系列》28、 RN之AsyncStorage
AsyncStorage是一个简单的、未加密的、异步的、持久化的Key-Value存储系统,它对于App来说是全局性的。它用来代替LocalStorage。iOS中存储类似于NSUserDefault,存储问plist文件存放在设备中。Android中存储会在 RocksDB 或者 SQLite 中,取决于你使用哪个。我们还是来看看官网文档,AsyncStorage提供的方法如下:static g原创 2016-09-09 19:12:10 · 6701 阅读 · 1 评论 -
《React-Native系列》11、 图解RN布局之FlexBox,三分钟上手写RN界面
前面其实已经写过很多RN界面了,今天再来回顾下FlexBox布局,主要是记录笔记,必备日后查阅。综述flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。采用flex布局的元素,称为flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称"项目"。f原创 2016-08-12 12:55:02 · 10403 阅读 · 1 评论 -
《React-Native系列》10、 RN组件之Text和TextInput以及注意要点
今天把写的RN程序从iOS上迁移到Android上,发现了一些问题,主要涉及到Text和TextInput这两个组件,所以用一节来专门记录下来。Text组件我们先来看官网给的例子:renderText: function() { return ( {this.state.titleText + '\n\n'}原创 2016-08-11 22:51:32 · 16330 阅读 · 0 评论 -
《React-Native系列》25、 详解Redux的connect方法
上面一篇文章,我们只是从Demo的角度讲解了Redux,对于connect的部分,我们只是一笔带过。那么我们这篇文章同样是基于上一篇文章中的Demo,来从实战的角度来详细讲解下connect方法。connect方法声明如下:connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])作用:连原创 2016-09-02 12:38:52 · 8654 阅读 · 0 评论