2017年03月_barnett_y_优快云博客

转载 react-native 实现百度地图(ios&Android)

最近公司需要在app上使用地图组件加载地图，从网上找了很多第三方都不是很理想，总会有ios和Android不兼容的问题，后来在GitHub上看到了react-native-baidu-map，觉得可以一试，虽然GitHub上有配置说明，但在过程中遇到许多坑，写篇文章记录一下，免得忘记。准备工作先说明一下，我使用的react-native开发工具是webStorm，同时我们需要你的电

2017-03-31 22:03:34 13461 1

转载 react-native集成超级强大的图表工具native-echarts

闲话不多说，先到上动态图让大家看看。使用起来超级简单，完美适配ios和androidchart.gif简单介绍一下：1.苹果橘子这个可以根据legend这个属性来设置，可一个可多个。具体参考代码2.可以是单独的一种图形，也可以是多种切换3.图形的颜色可以根据color属性来改，具体请参考代码下面介绍下使用方法：1。 npm insta

2017-03-31 21:59:18 17008 3

转载 react-native使用蚂蚁金服的antd-mobile组件库教程

国际惯例，先来展示下这个强大的组建库，常用的大部分组建都可以找到9A99D507-9505-478F-956C-8F243CFECAF5.png3D408F99-BCD5-4C3E-905B-0EDAEB58A858.pngFFC8CB54-EF30-41AB-AA49-83AE3379C69E.pngA52EFACE-8

2017-03-31 21:42:43 34931

转载前端笔试题[1]

http://www.cnblogs.com/Candybunny/category/811557.html闭包和this一.闭包最开始理解闭包是在一个函数内部定义一个函数，可以在外面的环境里进行调用。现在对于闭包的理解是利用函数来保存作用域内的对象。理解闭包首先要理解执行上下文，变量对象，活动对象，作用域链。因为执行上下文在函数执行后会销毁，因

2017-03-31 21:13:45 963

转载 js跨域

js跨域http://www.cnblogs.com/Candybunny/p/5361798.html 项目中因为要把问卷投放到第三方，并且对方要收集统计数据，因此在调用对方接口的时候就会存在跨域的问题。1. 什么叫js跨域浏览器因为安全考虑，所以设置了同源策略。同源策略简单理解就是DNS域名，端口号，协议完全相同就称为同源，同源下的页面之间

2017-03-31 21:11:45 703

转载正则表达式前端使用手册

http://louiszhai.github.io/2016/06/13/regexp/这是一篇历时两个月的文章, 包含了我多年来正则的使用经验, 涵盖了多种语言下的正则技巧. 本文基于前端, 但不止步于前端. 如果您迫切的想要习得强大的文本处理技巧, 那么正则你是避不开的, 希望您能喜欢本文, 谢谢!

2017-03-31 21:10:31 557

转载 ES6笔记 - Promise模式

http://coderlt.coding.me/2016/07/17/ES6-promise/Promise 为异步编程提供统一的解决方案，比传统的回调和事件更加合理有效。多重嵌套的回调函数，代码是横向发展，不是纵向发展，容易乱成一团，不便管理，称之为”callback hell”，回调地狱或回调恶梦。Promise就是为了解决这个问题而提出的。它不是新的语法功能，而是一种新的写法，允许

2017-03-31 21:08:27 398

转载 JavaScript call和apply的区别

写在前面很多来面试前端工程师的人说自己精通Javascript语言，问他call()和apply()这两个方法有什么区别，结果往往是一问三不知。其实区分 apply和call就一句话：http://jafeney.com/2016/01/10/2016-01-10-call/1foo.call(this,arg1,arg2,arg3)==foo.ap

2017-03-31 21:07:40 379

转载使用codepush进行ReactNative热部署react-native-code-push

react-native-code-push 使用codepush进行ReactNative热部署import React, { Component } from 'react'import reducers from './reducers'import thunk from 'redux-thunk'import {Provider} from 'react-redux'impor

2017-03-31 21:05:40 731

转载基于Node的React图片上传组件实现

写在前面红旗不倒，誓把JavaScript进行到底！今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理（React+ Node），花了一些时间，希望对你有所帮助。前端实现遵循React 组件化的思想，我把图片上传做成了一个独立的组件（没有其他依赖），直接import即可。12345678910import Reac

2017-03-31 21:04:22 1984

转载 React Native 使用react-native-image-picker插件上传图片详细步骤

项目需要用到上传图片功能，经过一番折腾勉强完成需求，整理一下做个记录。插件选择是react-native-image-picker，还挺好用的，不过需要分ios和android不同平台去配置.IOS：1.在Xcode右击项目选择Add Files to 'XXX',(这里的xxx就是你的项目).然后找到项目的node_modules ➜ react-native-image-picker

2017-03-31 20:47:53 13045

转载 ReactNative坑点——Date对象正确使用

写在前面昨天遇到了一个非常诡异的场景，ReactNative写的倒计时组件线上版本无法运行，但本地测试却是正常的。我一度以为是ReactNative转换的时候出了问题，不知道从何下手。最后盘查了一圈，发现了一个不得了的事！——ReactNative的JS解析，当打开chrome进行Debug时，用的的确是chrome的内核，但对于转换好的版本，如IOS版本用的是safari的内核，Andr

2017-03-31 13:48:52 1195

转载 React 常用面试题目与分析

1.调用 setState 之后发生了什么？在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界

2017-03-31 13:48:22 1603

转载深入理解React中的上下文this

写在前面JavaScript中的作用域scope 和上下文 context 是这门语言的独到之处，每个函数有不同的变量上下文和作用域。这些概念是JavaScript中一些强大的设计模式的后盾。在ES5规范里，我们可以遵循一个原则——每个function内的上下文this指向该function的调用方。比如：1234567891011121314var Mod

2017-03-31 13:45:43 766

转载 react-native-wechat的使用

react-native-wechat 具有微信登录，分享，收藏，和支付的功能，适合iOS/Android 双平台使用安装与配置安装通过yarn 安装yarn add react-native-wechat配置iOS执行以下命令：react-native link react-native-wechat自动完成配置

2017-03-31 13:44:57 7918 1

转载 React Native 页面间传值总结

各传值方式简述，总结如下:1.正向：navigator.passProps 传递props2.逆向：navigator.passProps 传递func（3种写法）3.注册监听（DeviceEventEmitter）4.全局变量global5.持久化存储（AsynStorage/ react-native-storage）6.Redux- state接下来具体看看，各方式实现：

2017-03-31 13:44:30 4472

转载 React Native基于mobx 实现 listview列表默认选中，选中，取消选中

ListView 在移动开发中是个很常用对的控件，不管是andorid 还是ios，在显示长列表视图时，都是个不错的选择（ps：andorid有更好的新控件），那么在react native中也是如此，本文是从项目中摘出来的，是配合mobx来实现的，当然也可以用redux实现，不过个人觉得redux过于繁杂，不如mobx来的舒服，看有人说就用React的SetState 也可以，但是render

2017-03-31 08:52:21 3918

转载基于Redux的ReactNative项目开发总结（二）

写在前面自从上次写了此系列的一篇文章，公司App项目不幸被搁浅，我也转战到React组件库和Node后端项目的开发，本来的有些断章取义的想法没有很好地去整合，也就不丢出来献丑了。好在峰回路转，新的ReactNative项目袭来，重拾之前的架构，经过1个月的开发和思考，有丢弃也有创新。版本更新带来的BUG修复faceBook对ReactNative版本的更新速度实在是太快

2017-03-30 11:07:34 589

转载 ReactNative接入支付宝支付

写在前面重申一下，ReactNative开发的App是NativeApp，不是WebApp或者HybridApp，所以我们需要开通的是支付宝的App支付功能，别申请错了。申请完成之后就可以接下去开发了。http://jafeney.com/支付宝支付接入支付宝支付前建议先查看支付宝官方文档，先按照要求创建应用并完成配置。不过要注意以下两点：第一，App支付不能在沙

2017-03-30 11:03:31 4462

转载 ReactNative接入微信API

写在前面上一篇简单地讲了 ReactNative 如何接入支付宝支付，那么这一篇就介绍如何接入微信API吧。我们实际用到的一般有微信登录、微信分享、微信支付这三个功能。http://jafeney.com/2016/11/18/2016-11-17-wechat/准备工作微信的东西比较支付宝申请起来要略微麻烦点，步骤多，而且有些资质认证要给微信钱，心太黑。废话不多说，登录微

2017-03-30 11:01:38 1522

转载 ReactNative开发常用的三方模块

写在前面一个好的App缺不了好的三方支持，生活在ReactNative这个活跃的开源社区，寻找合适的三方组件是一个开发者最基本的能力。不过不积跬步，无以至千里，不积小流，无以成江海。下面分享几个我收集的三方模块，希望对大家有点帮助。http://jafeney.com/2017/03/29/2017-03-29-react-native/文件上传 react-nativ

2017-03-30 10:59:38 8009

转载 fetch和XMLHttpRequest讲解

写在前面fetch 同 XMLHttpRequest 非常类似，都是用来做网络请求。但是同复杂的XMLHttpRequest的API相比，fetch使用了Promise，这让它使用起来更加简洁，从而避免陷入”回调地狱”。两者比较比如，如果我们想要实现这样一个需求：请求一个URL地址，获取响应数据并将数据转换成JSON格式。使用fetch和XMLHttpRequest实现的方

2017-03-30 10:55:06 1601

转载如何十倍提高你的webpack构建效率

前言http://jafeney.com/2016/07/10/2016-07-10-webpack/ webpack 是个好东西，和 NPM 搭配起来使用管理模块实在非常方便。而 Babel 更是神一般的存在，让我们在这个浏览器尚未全面普及 ES6 语法的时代可以先一步体验到新的语法带来的便利和效率上的提升。在 React 项目架构中这两个东西基本成为了标配，但 common

2017-03-30 10:54:14 1340

转载 React在ES6中的用法

写在前面http://jafeney.com/2016/04/22/2016-04-22-react-ES6/不管是多么不乐意待见这个不速之客，但ES6已经一点点渗透进了我的生活里，就连我最爱的React到React Native，默认都把ES6做为首选标准。这是FaceBook有计划、有声势地要把ES6推起来，请问还有谁有狗胆站住来堵着路不走。所以我毅然捧着阮一峰老师的《ES6标准入门》

2017-03-30 10:48:19 891

转载基于Redux架构的单页应用开发总结（一）(二)

写在前面http://jafeney.com/2016/06/08/2016-06-07-redux/“大学四年，细细回味。大一，面带稚嫩的面庞，一腔傻傻的热情。可爱帅气的小涵妹，带我认识时尚，好基友终生难忘。大二，踏上程序员之旅，曦点无缘，Smart不弃，恩师点拨学长提携，滴水之恩涌泉报。大三，有了自己的团队，乐雁老朱，编程游戏我们都在一起。项目经验，点点积累，低下小中探寻的是学以致用的

2017-03-30 10:45:44 498

转载基于Redux架构的单页应用开发总结（三）

写在前面这篇具体讲讲Redux使用的一些技巧http://jafeney.com/2016/06/11/2016-06-12-redux/React式编程思维在没有遁入React之前，我是一个DOM操作控，不论是jQuery还是zepto，我在页面交互的实现上用的最多的就是DOM操作，把复杂的交互一步一步通过选择器和事件委托绑定到document上，然后逐个连贯起来。

2017-03-30 10:40:27 309

转载基于Redux的ReactNative项目开发总结（一）

写在前面上周把基于Redux的单页应用开发完紧接着就开始了ReactNative的开发。真的快得不可思议，只花了一周时间，我们两个人就分工把APP也开发完了，并且同时兼容IOS操作系统和Android操作系统。内部测试了一轮，流畅性和用户体验方面也都相当给力！接下去几篇依次介绍项目开发中领悟的技巧和遇到的坑。http://jafeney.com/2016/06/17/2016-

2017-03-30 10:33:10 626

转载基于webpack的模块化构建

写在前面http://jafeney.com/2016/02/02/2016-02-02-webpack/模块化构建会让项目的拓展性、代码复用性和可维护性大大提高，初期可能会增加一些管理的工作量。但是对长远来说绝对是值得的，一个良好的模块化方案会让维护工作变得轻松，这个好处项目越进展到后来越明显。而且模块化构建的框架和工具很多，RequireJS、SeaJS、Grunt、Gulp等，这些虽

2017-03-30 10:25:50 508

转载深入理解gulp自动化

写在前面http://jafeney.com/2016/03/06/2016-03-06-gulp/ gulp使用了有一段时间，公司好几个项目自动化就是用它构建的。不过对这个简单粗暴的工具我常常是又爱又怕。啥意思呢？大牛们写的gulp任务我看得懂，也能依样画葫芦运用到自己的项目，但是如果撇开doc，让我自己写我还真写不好。纸上得来终觉浅啊，考验对一门技术的掌握程度，光看得懂、会套用

2017-03-30 10:19:43 918

转载 jQuery一些技巧总结

写在前面这里总结了一些jQuery开发过程中的一些技巧，希望对大家有所帮助。http://jafeney.com/2016/01/10/2016-01-10-jquery-q/禁用页面的右击菜单12345$(function(){ $(document).on('contextmenu',function(e){ return fa

2017-03-30 10:12:38 600

转载 express搭建nodeJS中间层(一)（二）

express搭建nodeJS中间层（一）2016-01-10写在前面好了，准备了一周的理论知识和开发方案，nodeJS中间层搭建项目从今天就开始了。作为项目的负责人和初次尝试者，我会把开发的过程中用到的技术、碰到的壁一个个用文章记录下来。http://jafeney.com/2016/01/10/2016-01-10-express-1/express框架介绍ex

2017-03-30 10:10:06 5318 1

转载 express搭建nodeJS中间层（三）

写在前面之前2篇已经比较详细地介绍用express搭建nodeJS中间层并部署到centOS服务器，用forever管理nodeJS进程，这一系列工作都是基于项目已经调试完毕了。但实际开发过程中会发现每次修改完代码后都需要关闭node进程然后重启才能生效，特别麻烦，这篇就介绍一个自动监听并同步的的 node工具——supervisor。全局安装 supervis

2017-03-30 10:07:26 1334

转载深入理解express框架

写在前面Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。http://jafeney.com/2016/01/10/2016-01-10-express/Express 框架核心特性：可以设置中间件来响应 HTTP 请求。

2017-03-30 10:06:28 698

转载 CommonJS规范和实现

写在前面一言以蔽：CommonJS是服务器端模块的规范，Node.js采用了这个规范。http://jafeney.com/2016/01/10/2016-01-10-common/commonJS简介根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。举个例子 exa

2017-03-30 10:04:48 732

转载前端模块化两兄弟——requireJS和seaJS

写在前面之前没学过nodeJS，底子不好，对AMD和CMD的实现没法理解，现在nodeJS也算是步入门槛，再回过身好好研究一下这个“模块化加载器”。http://jafeney.com/2016/01/10/2016-01-10-module/SeaJS与RequireJS最大的区别一言以蔽之：执行模块的机制大不一样RequireJS 是执行的 AMD 规范,

2017-03-30 10:02:59 7855

转载结合Vuex创造一个完美的vue-loading/vue-toast组件

ReactNewsApp介绍一个由React.js编写的新闻WebApp。A news WebApp by React.js.本应用仅供学习，请不要用于商业用途，供学习交流

2017-03-30 09:09:05 11856

转载全栈小说阅读类APP

效果图前端react native + redux GitHub地址： https://github.com/dlyt/YCool后端koa2 GitHub地址: https://github.com/dlyt/YCool_Server目前已经实现了基本功能，小说搜索，订阅，邮件提醒小说更新，删除小说等。http://bbs.reactnative.cn/user/dl

2017-03-30 09:06:34 976

转载 react-native-swipe-list-view侧滑删除组件使用

react-native-swipe-list-view 是一个具有侧滑功能的react-native的listview组件此组件由两个子组件组成：是基于listview封装的具有侧滑打开、关闭功能的listview组件，具有一些原生功能行为；例如：当某一行侧滑打开后，在listview滚动或侧滑打开其他行时，会自动关闭此行。如果你只是想拥有具有侧滑功能的row，那么你可以使

2017-03-29 16:52:31 8592

转载 React-Native启动页到主页过渡

启动页是图片过渡两秒，componentWillUnmount()需要清除定时器'use strict';import React from 'react';import { Dimensions, Image, InteractionManager, View, Text,} from 'react-native';import AppMain from

2017-03-29 10:50:28 5801

转载 React中使用CSSTransitionGroup插件实现轮播图

动画效果，是一个页面上必不可少的功能，学习一个新的东西，当然就要学习，如何用新的东西，用它的方法去实现以前的东西啦。今天呢，我就在这里介绍一个试用react-addons-css-transition-group插件，在react中实现轮播图效果。http://www.cnblogs.com/diligentYe/p/6637585.html?utm_source=tuicool&utm_medi

2017-03-29 09:05:22 1765

空空如也

空空如也