React
关注
分享
扫一扫
文章平均质量分 82
future_challenger
这个作者很懒，什么都没留下…
展开
-
玩转React样式
很久很久以前，就有人用CSS来时给HTML内容添加样式。CSS可以最大限度的分离样式和内容，选择器也可以很方便的给某些元素添加样式。你根本找不到任何不用CSS的理由。但是在React这里就是另外一回事了，虽然React不是不用CSS。但是，它在给元素添加样式的时候方式不同。React的核心哲学之一就是让可视化的组件自包含，并且可复用。这就是为什么HTML元素和Javascript放在一起组成了Com原创 2016-09-09 23:44:43 · 13434 阅读 · 0 评论 -
React Native填坑之旅--动画篇
动画是提高用户体验不可缺少的一个元素。恰如其分的动画可以让用户更明确的感知当前的操作是什么。无疑在使用React Native开发应用的时候也需要动画。这就需要知道RN都给我们提供了那些动画，和每个动画可以处理的功能有哪些。填坑材料Animated动画API提供了一些现成的组件：Animated.View，Animated.Text和Animated.Image默认支持动画。动画API会调用iOS或原创 2016-09-27 20:41:46 · 3978 阅读 · 0 评论 -
React Native填坑之旅--ListView篇
列表显示数据，基本什么应用都是必须。今天就来从浅到深的看看React Native的ListView怎么使用。笔者写作的时候RN版本是0.34。最简单的//@flowimport React from 'react';import { Text, View, ListView} from 'react-native';export default class DemoList ext原创 2016-10-05 15:16:32 · 8472 阅读 · 0 评论 -
React Native填坑之旅--LayoutAnimation篇
比较精细的动画可以用Animated来控制。但是，在一些简单的界面切换、更新的时候所做的动画里再去计算开始值、结束值和插值器如何运作绝对是浪费时间。RN正好给我们提供了LayoutAnimation来解决这个问题。按照官方的说法：LayoutAnimation就是用于在下一个绘制或者布局周期（render/layout cycle)里处理界面中全部视图的动画的。下面看一个例子：export defa原创 2016-10-07 20:27:37 · 1642 阅读 · 1 评论 -
React Native填坑之旅--布局篇
回头看看RN的填坑之旅系列，发现一路写下来都是我在开发中遇到的问题如何解决的。兴之所至，不问顺序。于是出现一个问题，填坑系列和学习知识的顺序不是很一致。比如今天要说的布局问题。其实在一个app开发之前，就应该有所了解。否则的话每次看到的<View style={{flex: 1}} />代表的是什么呢？上来就是一个疑问。在这个系列进行到一定程度的时候，我会花时间重新整理全系列的文章，让各位可以按照知原创 2016-10-21 00:22:17 · 1337 阅读 · 0 评论 -
React Native填坑之旅--ListView的Section Header
React Native自己实现的ListView还有一个隐藏功能那就是Section。Section在文档里连一句话都没有给足，但确确实实的是内置的。使用Section可以给数据分组，并且每一个Section都有一个Header。Section Header可以像iOS的TableView的Section Header一样在滑动的时候保持当前的Section Header浮动在Table View原创 2016-11-14 10:33:12 · 4850 阅读 · 0 评论 -
打造Redux中间件
简单的基本中间件：const customMiddleware = store => next => action => { if(action.type !== 'CUSTOM_ACT_TYPE') { return next(action) // 其他代码 }}使用：import {createStore, applyMiddleware} fr翻译 2017-03-01 22:31:14 · 1109 阅读 · 0 评论 -
理解React组件的生命周期
理解React组件的生命周期本文作者写作的时间较早，所以里面会出现很多的旧版ES5的时代的方法。不过，虽然如此并不影响读者理解组件的生命周期。反而是作者分为几种不同的触发机制来解释生命周期的各个方法，让读者更加容易理解涉及到的概念。以下是正文。简介React在创建组件的时候会触发组件生命周期各个方法的调用。这篇文章就分别介绍其中的各种不同的绘制触发之后调用的各个生命周期的方法。理解组件的生命周期，你翻译 2017-02-15 15:52:04 · 609 阅读 · 0 评论 -
React Native桥接器初探
本文假设你已经有一定的React Native基础，并且想要了解React Native的JS和原生代码之间是如何交互的。React Native的工作线程shadow queue：布局在这个线程工作main thread：UIKit在这里工作Javascript thread：Js代码在这里工作另外每一个原生模块都有自己的一个工作GCD queue，除非你明确指定它的工作队列*shadow翻译 2017-02-25 00:35:27 · 3461 阅读 · 1 评论 -
React Native填坑之旅--Button篇
从React过来，发现React Native（以下简称RN）居然没有Button。隔壁的iOS是有UIButton的，隔壁的隔壁的Android里也是有的。没有Button，就没有点击效果啊。这还真是让人郁闷了。坑什么叫Button。略去各种细节可以得出一个定义：可以处理用户点击，在用户按下的时候有按下的效果，松开之后立即回复到原来的效果上。在React里，可以使用直接使用HTML的元素。比如，<原创 2016-09-25 15:12:36 · 3194 阅读 · 1 评论 -
React Native填坑之旅--HTTP请求篇
React Native填坑之旅–Button篇 React Native填坑之旅–动画 React Native填坑之旅–HTTP请求篇如果不能从头到尾的建立一个RN应用，那么RN将失色不少。本以为HTTP请求部分需要使用Native的实现，Android和iOS各回各家，各调各库了。Google了一下之后居然RN可以使用fetch库。这个库是用来代替流传已久的XHR的。下面看看如何使用fet原创 2016-10-03 21:40:17 · 5623 阅读 · 0 评论 -
React与ES6（一）开篇介绍
ES2015（也就是ES6）带来了很多新的语言特性。比如：类、箭头方法、rest参数、promise、generator等很多。如果你对ES6还不是很熟悉的话可以看这里。但是浏览器对于ES6的支持还不是很好。你可以看看这个ES6兼容表。显而易见的是不同浏览器对于ES6的兼容参差不齐。于是就有人想把ES6的代码转成ES5的不就可以兼容了吗。这其中做的最好的就是Babel, 一个非常棒的工具。后面会详细翻译 2016-09-13 11:33:07 · 2831 阅读 · 0 评论 -
React和ES6（二）ES6的类和ES7的property initializer
前一篇的内容太简单了，会不会很失望。这次就来一个接近实际应用的例子，对应的React的组件也会更加复杂。这次开发一个购物车的页面。在这个页面中你会看到某个产品的信息，比如：图片、名称和价格。另外，一个用户可以增加和减少该商品的数量。创建cart_item.html<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8">翻译 2016-09-15 20:38:57 · 1829 阅读 · 0 评论 -
React与ES6（三）ES6类和方法绑定
如果你看到前篇里CartItem的render方法里的这一句：{this.increaseQty.bind(this)}你可能会很意外为什么要bind。如果把bind删掉的话会怎么样呢？会报错Uncaught TypeError: Cannot read property ‘setState’ of undeined。这是因为this.increaseQty的this指向的不是类，而是undefin翻译 2016-09-19 21:00:08 · 3305 阅读 · 0 评论 -
React与ES6（四）ES6如何处理React mixins
在使用React.createClass()的时候你也许使用过一个所谓的mixin的东西。使用它，你可以给React组件天剑很多其他的功能。这个概念不止用在React上，也用在很多其他的编程语言或者框架上。在ES6中不能够在使用React的mixin机制。本文不会纠结于原因为何。我们只关注ES6中的替代方法。High-Order Component或者可以叫做高阶组件。我们使用前文中使用的CartI翻译 2016-09-20 11:37:43 · 4175 阅读 · 0 评论 -
React Native填坑之旅--Flow篇（番外）
flow不是React Native必会的技能，但是作为正式的产品开发优势很有必要掌握的技能之一。所以，算是RN填坑之旅系列的番外篇。Flow是一个静态的检查类型检查工具，设计之初的目的就是为了可以发现JavaScript脚本里不容易被发现的错误。在js开发的过程中，总会遇到一些问题。小的还可以，比如用alert或者console等输出一些信息可以debug，并解决。但是如果项目比较大的时候，这些手原创 2016-10-09 20:40:28 · 1435 阅读 · 0 评论 -
React面试必会--React的Diff算法
使用React或者RN开发APP如果不知道Diff算法的话简直是说不过去啊。毕竟“知其然，知其所以然”这句老话从远古喊到现代了。以下内容基本是官网文章的一个总结、压缩。这次要谦虚一下，毕竟深入研究RN的时间不多，如果有什么理解的不对的地方还请各位读者指正。React的组件在渲染之后组成了一个树形结构。在React绘制的时候，会在内存里对应每一个组件建立一个节点，并最终形成一个和组件树结构一样的树。我原创 2016-10-11 20:20:56 · 17774 阅读 · 0 评论 -
React Native填坑之旅--Navigation篇
React Native的导航有两种，一种是iOS和Android通用的叫做Navigator，一种是支持iOS的叫做NavigatorIOS。我们这里只讨论通用的Navigator。会了Navigator，NavigatorIOS也就不是什么难事了。本文所使用的是React Native 0.34。FB团队更新的太快了，我会在后续出现大的改动的时候更新本文以及代码。Navigator基础Navig原创 2016-10-13 20:30:33 · 1599 阅读 · 0 评论 -
React Native填坑之旅--重新认识RN（番外篇）
如同黑夜里的一道光一样，就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会。每次大会都会release相应的APP，iOS、Android都有。之前都是用Native开发的，但是2016的这一次是用React Native开发的。FB开源了RN的App这次fb不仅开源了纯RN写的App，而且一同发布的还有开发这个App的教程。FB承诺会不断的更新这个app。教程放在make it原创 2016-10-25 14:13:19 · 693 阅读 · 0 评论 -
React Native填坑之旅 -- 使用iOS原生视图（高德地图）
在开发React Native的App的时候，你会遇到很多情况是原生的视图组件已经开发好了的。有的是系统的SDK提供的，有的是第三方试图组件，总之你的APP可以直接使用的原生视图是很多的。React Native提供了一套完善的机制，你可以非常简单的用来包装已有的原生视图。代码地址：https://github.com/future-challenger/react-native-gaode-map原创 2017-02-27 09:15:59 · 1566 阅读 · 0 评论