coder_小刀-CSDN博客

原创与我联系

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

2016-11-22 20:40:00 2377 3

原创《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 6997 4

原创《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 7680 4

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

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

2017-02-17 20:26:34 7346 3

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

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

2016-12-29 12:32:33 3261 4

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

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

2016-11-23 23:19:21 4154

原创《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 21139 5

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

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

2016-11-03 11:31:03 8304 9

原创《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 8112 11

原创 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使用google diff的话，这

2016-10-20 14:22:46 15602 5

原创《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 15749 5

原创《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 4759

原创《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 16415 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 9967 3

原创《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 5457 2

原创《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 6469

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

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

2016-09-23 21:08:44 17466 3

原创《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 9628 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 29167 17

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

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

2016-09-13 09:11:29 6052

原创《React-Native系列》29、 RN组件之WebView

说起WebView，我们还是很熟悉的吧。特别是做过Hybrid开发的同学，Web+Native一个很经典的开发模式，包括现在依然很多App上都在使用。我们列举几个比较重要的属性吧source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number 在W

2016-09-09 20:51:43 20142

原创《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 6644 1

原创《React-Native系列》27、 Redux的异步数据流

我们再前面讲的 redux 中的数据流都是同步的，流程如下：view -> actionCreator -> action -> reducer -> newState -> container component 但是，在大多数的前端业务场景中，需要和后端产生异步交互，譬如:网络api的请求。Redux中怎么来实现异步的数据流呢？异步Action通常我们创建的Action如下：export co

2016-09-08 21:03:12 4646

原创《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 25740 2

原创《React-Native系列》25、详解Redux的connect方法

上面一篇文章，我们只是从Demo的角度讲解了Redux，对于connect的部分，我们只是一笔带过。那么我们这篇文章同样是基于上一篇文章中的Demo，来从实战的角度来详细讲解下connect方法。connect方法声明如下：connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])作用：连

2016-09-02 12:38:52 8606

原创《React-Native系列》24、结合Demo学习Redux框架

8月的最后一天了，那就打响最后一炮吧！我们介绍了Flux框架，我们打算在接下来的项目里使用Redux框架，这两天简单学习了下Redux。打算结合一个Demo来讲解。还是先来说说概念吧。Redux 三个基本原则：单一数据源整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。这让同构应

2016-08-31 23:06:23 7337 2

原创《React-Native系列》23、 js实现下拉刷新效果（Android和iOS通用）

这几天项目里有这么个需求：一个列表页需要支持下拉刷新和上拉刷新。其中上拉刷新效果已经时间，具体思路见：《React-Native系列》19、 ListView组件之上拉刷新（iOS和Android通用）今天我们重点来说说下拉刷新的实现。ReactNative提供一个组件RefreshControl，但是不支持自定义刷新UI，我们的RN项目只是整个APP的一部分，需要和原生的UI

2016-08-24 22:30:27 8909 3

原创《React-Native系列》22、 Flux框架Demo详解

今天我们来结合一个简单的Demo来讲解Flux框架，让大家了解Flux框架的真面目。先上一张比较漂亮的图（对漂亮的图，总是没有抵抗力:-) ）。我们再来回顾下Flux框架的四大组成部分View：视图层Action（动作）：视图层发出的消息（比如mouseClick）Dispatcher（派发器）：用来接收Actions、执行回调函数Store（数据层）：用来存放应

2016-08-23 09:16:30 3624 2

原创《React-Native系列》21、解决RN在Android下不支持gif问题

由于RN在Android平台上不支持gif格式的图片，今天介绍下我们是怎么处理这个问题的。先来看看我们需要实现的效果，这是一张gif图片，当我们列表上拉加载下一页的时候需要使用这个效果，如下图：我们的解决方案是：将gif切成15长png的图片，暂且命名为loading1、loading2.... loading15然后循环的setState修改图片，就像看电影一样，达到

2016-08-22 22:14:36 6147 2

原创《React-Native系列》20、 RN数据流之Flux概览

今天我们来看下ReactNative的数据流框架Flux。Flux是Facebook用来构建用户端的web应用的应用程序体系架构。它通过利用数据的单向流动为React的可复用的视图组件提供了补充。相比于形式化的框架它更像是一个架构思想，不需要太多新的代码你就可以马上使用Flux构建你的应用。React 标榜自己是 MVC 里面 V 的部分，那么 Flux 就相当于添加 M 和

2016-08-21 17:21:31 2808

原创《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 13194 16

原创《React-Native系列》18、 RN之定时器Timer

在web开发中，我们通常需要使用定时器功能，使用setTimeout和setInterval函数。那么在ReactNative中，是否也提供了定时器的功能呢？答案是肯定的。我们还是先看看官网怎么说的。定时器是一个应用中非常重要的部分。React Native实现了和浏览器一致的定时器Timer。提供的方法如下：setTimeout, clearTimeouts

2016-08-17 22:07:48 18338 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 26593

原创《React-Native系列》16、 RN组件之ListView

今天来谈谈ReactNative提供的ListView组件，ListView是我们最常用的组件。还是先来看看官网怎么说的。ListView - 一个核心组件，用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源来实例化一个ListView组件，并且定义它的renderRow回调

2016-08-15 22:52:23 7401

原创《React-Native系列》15、 RN之可触摸组件

今天，我们来看下ReactNative提供的可触摸组件。分别为:TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback。TouchableWithoutFeedback控件是触摸点击不带反馈效果的，另外三个都是有反馈效果。这三个组件都继承了所有TouchableWithoutF

2016-08-14 23:12:58 3870 1

原创《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 6683

原创《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 6148 15

原创《React-Native系列》12、 API模块之PixelRatio和Dimensions

PixelRatio和Dimensions 是ReactNative提供的API，这个在我们编写RN页面的时候必须要使用的。PixelRatio我们还是先看看官网怎么介绍的。PixelRatio类提供了访问设备的像素密度的方法。根据像素密度获取指定大小的图片如果应用运行在一个高像素密度的设备上，显示的图片也应当分辨率更高。一个取得缩略图的好规则就是将显示尺寸乘以像素密度比：

2016-08-13 22:14:58 6869

原创《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 10324 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 16235