2016年08月_coder_小刀

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

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

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

2016-08-31 23:06:23 7338 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 8910 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 6150 2

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

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

2016-08-21 17:21:31 2809

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

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

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

2016-08-17 22:07:48 18341 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 26600

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

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

2016-08-15 22:52:23 7403

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

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

2016-08-14 23:12:58 3871 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 6685

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

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

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

2016-08-13 22:14:58 6872

原创《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 10327 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 16246

转载 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 1627

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

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

原创《React-Native系列》7、bundle文件的加载和维护

前段时间，app里某个功能使用RN开发，完成了上线，下面我们来说说我们是怎么处理bundle文件的。先来说一个概念：FaceBook宣传ReactNative时，热更新是不得不提的功能，可是官网文档和网上也没有提供比较完善的热更新的思路。我们先来看看ReactNative是怎么处理bundle文件的。可以有如下两种方式：1、app发版时，将bundle文件内置到app中，同时将

2016-08-04 09:16:11 5972

原创关于读书

不知道从什么时候开始，微信上就时不时的出现一篇文章《你有多久没有静下心来读完一本书了》，或是由一些组织机构发起的读书计划，一个月读完多少本书之类的活动。今天，突然想聊聊读书这个话题。我，一个程序猿，IT从业者，对电子书不怎么感兴趣，可能手机的诱惑太多了吧，可以干其他的事情。而我偏喜欢买书，还喜欢买正版书，一般计算机方面的书价格都不便宜。所以现在我家里的也有许多的计算机方面的书，关于

2016-08-03 23:11:29 973 1