用心敲出的代码
文章平均质量分 79
一个没有bug的代码是不完美的!每个坑都是一个成长
chanzhu
每个代码都有一段故事
展开
-
React Native 学习指南
本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests!原文地址:https://github.com/ele828/react-native-guide同时还有Awesome React-Native系列https://github.com/jondot/awesome-react-native原创 2017-03-15 17:33:40 · 646 阅读 · 0 评论 -
ES5与ES6的对比不同点
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是ES5版本的,所以很多人在学习的时候连照猫画虎都不知道怎么做。今天在此整理了一些ES5和ES6的写法对照表,希望大家以后读到ES5的代码,也能通过对照,在ES6下实现相同的功能。原创 2017-03-17 11:08:16 · 17054 阅读 · 2 评论 -
React Native调试技巧
在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。Developer MenuDeveloper Menu是React Native给开发者定制的一个开发者菜单,来帮助开发者调试React Nativ原创 2017-03-18 11:37:32 · 563 阅读 · 0 评论 -
React Native之React速学教程(上)
概述本篇为《React Native之React速学教程》的第一篇。本篇将从React的特点、如何使用React、JSX语法、组件(Component)以及组件的属性,状态等方面进行讲解。What’s ReactReact是一个用于组建用户界面的JavaScript库,让你以更简单的方式来创建交互式用户界面。当数据改变时,React将高效的更新和渲染需要更新的组件。原创 2017-03-20 16:10:09 · 338 阅读 · 0 评论 -
React Native之React速学教程(中)
概述本篇为《React Native之React速学教程》的第二篇。本篇将从组件(Component)的详细说明、组件的生命周期(Component Lifecycle)、isMounted是个反模式等方面进行讲解,让大家对组件(Component)有个更系统以及更深入的认识。组件的详细说明当通过调用 React.createClass() 来创建组件的时候,每个组件必须提原创 2017-03-20 16:11:34 · 289 阅读 · 0 评论 -
React Native之React速学教程(下)
概述本篇为《React Native之React速学教程》的最后一篇。本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习React /React Native过程中对于ES6与ES5的一些困惑。ES6的特性何为ES6?ES6全称ECMAScript 6.0,ES6于2015年6月17日发布,ECMAScrip原创 2017-03-20 16:12:59 · 310 阅读 · 0 评论 -
React Native布局详细指南
一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox。 在React Native中布局采用的是FleBox(弹性框)进行布局。FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范,目前还处于最终征求意见稿 (Last Call Working Draft)阶段,并不是所有的浏览器都支持F原创 2017-03-20 16:22:16 · 314 阅读 · 0 评论 -
React Native 性能优化之可取消的异步操作
概述在项目开发中离不了的需要进行一些异步操作,这些异步操作在改善用户体验的同时也带来了一些性能隐患。 比如,在某页面进行异步操作,异步操作还没有完成时,该页面已经关闭,这时由于异步操作的存在,导致系统无法及时的回收资源,从而导致性能的降低,甚至出现oom。总而言之,异步操作在改善用户体验,增强系统灵活性的同时也带来了一些性能隐患,如果使用不当则会带来一些副作用。那么如何在使原创 2017-03-20 17:08:39 · 905 阅读 · 0 评论 -
React Native按钮详解|Touchable系列组件使用详解
在做App开发过程中离不了的需要用户交互,说到交互,我们首先会想到的就是按钮了,在React Native中没有专门的按钮组件。 为了能让视图能够响应用的的点击事件,我们需要借助Touchablexxx组件,来包裹我们的视图。为什么说是Touchablexxx呢,因为它不只是一个组件,而是一组组件,一下四个组件都可以用来包裹视图来响应用户的点击事件。TouchableWithoutFeed原创 2017-03-20 17:14:42 · 1868 阅读 · 0 评论 -
React Native应用部署/热更新-CodePush最新集成总结(新)
React Native的出现为移动开发领域带来了两大革命性的创新:整合了移动端APP的开发,不仅缩短了APP的开发时间,也提高了APP的开发效率。为移动APP动态更新提供了基础。本文将向大家分享React Natvie应用部署/动态更新方面的内容。React Native支持大家用React Native技术开发APP,并打包生成一个APP。在动态更新方面React Na原创 2017-03-21 17:15:27 · 1597 阅读 · 0 评论 -
React Native原生模块向JS传递数据的几种方式(Android)
在做React Native开发的时候避免不了的需要原生模块和JS之间进行数据传递,这篇文章将向大家分享原生模块向JS传递数据的几种方式。方式一:通过Callbacks的方式说起Callbacks大家都不陌生,它是最常用的设计模式之一。无论是Java,Object-c,C#,还是JavaScript等都会看到Callbacks的身影。原生模块支持Callbacks类型的参数原创 2017-03-21 17:28:21 · 4033 阅读 · 0 评论 -
NPM 使用介绍
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可原创 2017-03-21 17:37:11 · 394 阅读 · 0 评论 -
Redux 核心概念
http://gaearon.github.io/redux/index.html ,文档在 http://rackt.github.io/redux/index.html 。本文不是官方文档的翻译。你可以在阅读官方文档之前和之后阅读本文,以加深其中的重点概念。根据该项目源码的习惯,示例都是基于 ES2015 的语法来写的。Redux 是应用状态管理服务。虽然本身受到了 Flux原创 2017-03-22 11:28:44 · 540 阅读 · 0 评论 -
Redux 入门教程(一):基本用法
React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。有两个方面,它没涉及。代码结构组件之间的通信对于大型的复杂应用来说,这两方面恰恰是最关键的。因此,只用 React 没法写大型应用。为了解决这个问题,2014年 Facebook 提出了 Flux 架构的概念,引发了很多的实现。2015年,Redux 出现,将 Flux 与函数式原创 2017-03-22 11:33:31 · 323 阅读 · 0 评论 -
Redux 入门教程(二):中间件与异步操作
一、中间件的概念为了理解中间件,让我们站在框架作者的角度思考问题:如果要添加功能,你会在哪个环节添加?(1)Reducer:纯函数,只承担计算 State 的功能,不合适承担其他功能,也承担不了,因为理论上,纯函数不能进行读写操作。(2)View:与 State 一一对应,可以看作 State 的视觉层,也不合适承担其他功能。(3)Action:存放数据的对象,原创 2017-03-22 11:42:57 · 336 阅读 · 0 评论 -
Redux 入门教程(三):React-Redux 的用法
为了方便使用,Redux 的作者封装了一个 React 专用的库 React-Redux,本文主要介绍它。这个库是可以选用的。实际项目中,你应该权衡一下,是直接使用 Redux,还是使用 React-Redux。后者虽然提供了便利,但是需要掌握额外的 API,并且要遵守它的组件拆分规范。一、UI 组件React-Redux 将所有组件分成两大类:UI 组件(pres原创 2017-03-22 11:46:13 · 560 阅读 · 0 评论 -
实例讲解基于 React+Redux 的前端开发流程
前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的angular 1 的 49000+;redux 的 star 数也要接近 20000,可见大家对其的热情程度,究竟是什么魔力让大家为之疯狂呢?让我们上车,亲自体验一波试试~~本文章偏向于讲解redux流原创 2017-03-22 11:55:05 · 1632 阅读 · 1 评论 -
React-redux开发之echarts组件封装
谈一下react开发如何使用echarts。echarts是个好东西,很强大的配置功能,很多开发者都在使用它。那么在react里面如何去调用echarts?如何封装echarts呢?react开发者,首先会想到的是上github搜索“react echarts”,然后找最多start的那个插件,比如“echarts-for-react”,那么,我们是不是真的有必要用插件来做呢?原创 2017-03-22 14:31:30 · 3386 阅读 · 0 评论 -
如何用React+Redux+ImmutableJS进行SPA开发
使用React + Redux + Immutable.js进行富客户端的开发是云莱坞在2016-2017年进行前端研发的基本技术栈,但不意味着在任何时候对它进行滥用,应该至少满足如下三个条件:数据集合较庞大、数据关联性较强业务流程较复杂绝大多数子业务可被抽象为复用的视图或者组件因此,比如一个简单的静态页面、一个虽然数据项很多但是仅仅为纯表单的页面都不满足上述条件,因此不建原创 2017-03-22 14:35:02 · 2275 阅读 · 0 评论 -
NPM 使用介绍
NPM 使用介绍NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。由于新版的nodejs已经集成了npm,所以之前np原创 2017-03-22 17:17:40 · 753 阅读 · 0 评论 -
推荐 11 款 React Native 开源移动 UI 组件
本文推荐 11 个非常棒的 React Native 开源组件,希望能给移动应用开发者提供帮助。React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架,已经用于 Facebook 的生产环境。React Native 可以使用最近非常流行的 React.js 库来开发 iOS 和 Android 原生 APP。1. iOS 表单处理控件 tco原创 2017-03-22 17:38:37 · 5992 阅读 · 0 评论 -
React Native 启动白屏问题解决方案,教程
目录问题描述问题分析Android启动白屏解决方案iOS启动白屏解决方案开源库最后项目源码:react-native-splash-screen问题描述:用React Native架构的无论是Android APP还是iOS APP,在启动时都出现白屏现象,时间大概1~3s(根据手机或模拟器的性能不同而不同)。问题分析:为什么会产生白屏?Re原创 2017-03-22 18:52:51 · 3691 阅读 · 0 评论 -
ReactNaivet在Webstore中的配置
jsx语法设置在没有进行设置的情况下,每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示:当然我们点击转换后就可以了,但是每次都会提示,所以还是来一个一劳永逸的方法把它给去掉吧:然后Apply/OK即可。设置.js文件中支持react-native语法高亮首先会发现在js文件中有不少的警告,类似这样:原创 2017-03-25 16:34:54 · 671 阅读 · 0 评论 -
ReactNative环境搭建与开发技巧以及重新启动adb
reactnative重新启动adb下一步到这一步项目创建完成下面要将React Native集成到上面的Android项目中环境搭建Python 2 安装下载安装完成之后,要添加环境变量python环境变量配置Node.js安装配置node.js官网下载召唤原创 2017-03-29 11:29:37 · 3672 阅读 · 3 评论 -
react-native最新的ES6基于页面跳转和传值
引导页面:/** * Sample React Native App * https://github.com/facebook/react-native */import React, { AppRegistry, Platform, Component, TouchableOpacity, StyleSheet, Navigator,原创 2017-03-29 16:58:41 · 5500 阅读 · 2 评论 -
react-native沉浸式状态栏
该StatusBar状态栏组件用来实现控制应用的状态栏的效果。根据官方文档说明了StatusBar(状态栏)和Navigator(导航器)搭配的用法:StatusBar组件可以同时加载多个组件,该组件的属性可以按照加载的顺序进行合并。一种常见的用法就是:我们可以在使用Navitator的时候,针对不同的路由页面进行设置特殊的状态栏样式。具体可以看一下官方实例代码:?原创 2017-03-29 18:41:18 · 8950 阅读 · 0 评论 -
ReactNative bug:Application has not bean registered.This is either due to require()error dur
错误提示Invariant Violation:Applicaction 项目名 has not been registered.This is either due to a require() error during initialization or failure to call AppRegistry.registerCommponent.原创 2017-03-30 15:02:22 · 2210 阅读 · 0 评论 -
React-Native创建Component的三种方式
从ES5-ES6过程中,有多种创建Component的过程,今天我就给大家介绍我新写的几种创建Component的写法:/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {Component} from 'react';import原创 2017-03-30 17:41:00 · 2246 阅读 · 0 评论 -
使用mobx实现react的MVVM框架mobx-roof,比redux简单太多
Mobx-RoofMobx-Roof219是基于mobx123的简单React MVVM框架, 目标是通过更ORM化的思维来管理数据, 如通过继承, 重载 等面向对象方式来实现数据模型的扩展, 并通过Relation来实现数据间的关联.下边完整的例子可以在项目example目录中找到基础篇先看下要实现的效果1.创建模型我们先通过cre原创 2017-03-30 18:10:42 · 2071 阅读 · 0 评论 -
MobX —— 10分钟极速入门 MobX 与 React
MobX 是一个简单、方便扩展、久经考验的状态管理解决方案。这个教程旨在十分钟内向你介绍 MobX 的一些重要概念。MobX 是一个独立的苦,不过大多数人都把它和 React 一起使用,所以本教程也就着眼于这个组合展开。核心概念State 是每一个应用程序的核心部分,而使用一个不合规范的 State 则是让你的应用充满 bug 和失控的不二法门,或者就是局部变量环绕,让你的 sta原创 2017-03-30 18:14:20 · 4471 阅读 · 3 评论