阅读本文大约需要3分钟      官方给我们提供了Tab控制器,但是那个不是双平台通用的,不过借助开源的力量可以实现通用的Tab控制器效果。 投稿人:hiphonezhu  地址:http://www.jianshu.com/p/b0cfe7f11ee7 本文所讲知识点 开源项目react-native-scrollable-tab-view的自定义使用方法 前言 在上一篇文章当中，我们学习了re

目录 技术选型 webpack 基础 安装 webpack webpack 简介 使用webpack-dev-server启动服务器 配置 React, ES6 & Babel 6 使用 ESlint 进行代码检查 样式处理 图片处理 区分开发及生产环境 构建流程图 文件说明 参考 完整实例代码 git-repo github issues 1. 技术选型 最近在一个项目初步尝试使用了reactJ

React 下的表格狂想曲 0. 前言 欢迎大家阅读「从零开始的 React 组件开发之路」系列第一篇，表格篇。本系列的特色是从 需求分析、API 设计和代码设计 三个递进的过程中，由简到繁地开发一个 React 组件，并在讲解过程中穿插一些 React 组件开发的技巧和心得。 为什么从表格开始呢？在企业系统中，表格是最常见但功能需求最丰富的组件之一，同时也是基于 React 数据驱动的思想受益最

Redux 进阶教程 原文（保持更新）：https://github.com/kenberkele... 写在前面 相信您已经看过 Redux 简明教程，本教程是简明教程的实战化版本，伴随源码分析 Redux 用的是 ES6 编写，看到有疑惑的地方的，可以复制粘贴到这里在线编译 ES5 § Redux API 总览 在 Redux 的源码目录 src/，我们可以看到如下文件结构： ├── util

Redux 简明教程 原文链接（保持更新）：https://github.com/kenberkele... 写在前面 本教程深入浅出，配套 简明教程、进阶教程（源码精读）以及文档注释丰满的 Demo 等一条龙服务 § 为什么要用 Redux 当然还有 Flux、Reflux、Mobx 等状态管理库可供选择 抛开需求讲实用性都是耍流氓，因此下面由我扮演您那可亲可爱的产品经理 ⊙ 需求 1：在控制台

前言 由于时间的问题，暂且只更新这么多了，后续还会持续更新本文《最快让你上手ReactiveCocoa之进阶篇》，目前只是简短的介绍了些RAC核心的一些方法，后续还需要加上MVVM+ReactiveCocoa实战开发。 如果喜欢我的文章，可以关注我，微博:袁峥Seemygo,欢迎交流。也可以来小码哥，了解下我们的iOS培训课程。之后还会更新 1.ReactiveCocoa常见操作方法介绍。 1.1

从React过来，发现React Native（以下简称RN）居然没有Button。隔壁的iOS是有UIButton的，隔壁的隔壁的Android里也是有的。没有Button，就没有点击效果啊。这还真是让人郁闷了。 坑 什么叫Button。略去各种细节可以得出一个定义：可以处理用户点击，在用户按下的时候有按下的效果，松开之后立即回复到原来的效果上。 在React里，可以使用直接使用HTML的元素。

动画是提高用户体验不可缺少的一个元素。恰如其分的动画可以让用户更明确的感知当前的操作是什么。 无疑在使用React Native开发应用的时候也需要动画。这就需要知道RN都给我们提供了那些动画，和每个动画可以处理的功能有哪些。 填坑材料Animated 动画API提供了一些现成的组件：Animated.View，Animated.Text和Animated.Image默认支持动画。动画API会调用

React Native填坑之旅–Button篇 React Native填坑之旅–动画 React Native填坑之旅–HTTP请求篇 如果不能从头到尾的建立一个RN应用，那么RN将失色不少。本以为HTTP请求部分需要使用Native的实现，Android和iOS各回各家，各调各库了。Google了一下之后居然RN可以使用fetch库。这个库是用来代替流传已久的XHR的。 下面看看如何使用fe

列表显示数据，基本什么应用都是必须。今天就来从浅到深的看看React Native的ListView怎么使用。笔者写作的时候RN版本是0.34。 最简单的 //@flow import React from 'react'; import { Text, View, ListView } from 'react-native'; export default class DemoL

比较精细的动画可以用Animated来控制。但是，在一些简单的界面切换、更新的时候所做的动画里再去计算开始值、结束值和插值器如何运作绝对是浪费时间。 RN正好给我们提供了LayoutAnimation来解决这个问题。按照官方的说法：LayoutAnimation就是用于在下一个绘制或者布局周期（render/layout cycle)里处理界面中全部视图的动画的。 下面看一个例子： export

React Native的导航有两种，一种是iOS和Android通用的叫做Navigator，一种是支持iOS的叫做NavigatorIOS。我们这里只讨论通用的Navigator。会了Navigator，NavigatorIOS也就不是什么难事了。 本文所使用的是React Native 0.34。FB团队更新的太快了，我会在后续出现大的改动的时候更新本文以及代码。 Navigator基础 N

无论React还是RN都已经迈入了ES6的时代，甚至凭借Babel的支持都进入了ES7。ES6内容很多，本文主要讲解类相关的内容。 构造函数 定义侦探类作为例子。 ES5的“类”是如何定义的。 function ES5Detective() { console.log('##ES5Detective contructor'); } ES6定义类： class ES6Detective {

该手册是基于react-router 和 React Router 使用教程 学习编写而成，可能会有描述不够清楚的地方，大家可自行参考原文， React Router 为 React 提供了一个完整的路由库，它允许你通过 URl 的变化来控制组件的切换与变化 有关 React 全家桶的其余相关文章，可以查看以下链接，会持续更新 别眨眼看 React 安装 使用 npm 进行安装： npm inst

代码： https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN的填坑之旅系列，发现一路写下来都是我在开发中遇到的问题如何解决的。兴之所至，不问顺序。于是出现一个问题，填坑系列和学习知识的顺序不是很一致。比如今天要说的布局问题。其实在一个app开发之前，就应该有所了解。

如同黑夜里的一道光一样，就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会。每次大会都会release相应的APP，iOS、Android都有。之前都是用Native开发的，但是2016的这一次是用React Native开发的。 FB开源了RN的App 这次fb不仅开源了纯RN写的App，而且一同发布的还有开发这个App的教程。FB承诺会不断的更新这个app。教程放在make

一.Flex布局 什么是Flex布局?布局的传统解决方案,是基于盒子模型,依赖display属性+position属性+float属性,这种布局方式对于特殊布局非常不方便, 比如,垂直居中就不好实现.2009年,W3c提出的Flex布局,即弹性布局,用来为盒子模型提供最大的灵活性,任何一个容器都可以指定为Flex布局. 1.容器的属性(6个) ReatNative的flex布局和web的略有不同,

最近工作上的项目要接入react-native技术，因此需要把原生项目接入到rn的配置环境中，整个过程遇到了不少坑，rn以后会是个趋势，也许慢慢会有越来越多的人需要将现有项目接入rn，估计在配置的时候都会遇到一些坑，这篇文章记录下整个配置的过程，既为提自己做个记录，也希望能帮到有同样项目需求的人。 搭建开发环境 开发环境的搭建 这部分只要跟着官方文档里就行，一般都会比较顺利。 完成rn环境配置 进

前不久，阿里旗下iconfont网站迎来重大升级，这对于广大前端同胞来说简直是福音啊有木有，我们不仅仅能做出纯色的iconfont，还能在页面中插入多色的图标，而且应用方式也很简单，权当引用一个css文件而已，然而现在react-native正是风生水起，越来越多的小伙伴投入到rn的开发。然而对于图标的选择，我们也不能类似之前的ios，或者android开发那样，利用无数的png来替代，先不说安装

终于开始新一篇的填坑之旅了。RN厉害的一个地方就是RN可以和Native组件通信。这个Native组件包括native的库和自定义视图，我们今天主要设计的内容是native库方面的只是。自定义视图的使用会在后面讲到。 坑是什么样的坑 主要的是遇到一个业务需求，需要检测当前应用的版本是什么。需要返回当前的版本号和build数。 主要的需求在native来说非常简单： NSString * versi