2016年09月_coder_小刀

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

原创《React-Native系列》37、 ReactNative百度地图开源组件使用

上一篇文章写了ReactNative自带的MapView，很显然不是我们想要的。今天我们介绍一下一个开源的百度地图开源组件，详细描述它的使用方法。开源地址：https://github.com/lovebing/react-native-baidu-map 百度地图 React Native 模块，支持 react native 0.30+好，我们来描述它的使用步骤，以及需要注意的问题，我是在

2016-09-30 16:26:55 16418 3

原创《React-Native系列》36、 ReactNative地图组件

写在前面的话：明天就国庆了，祝伟大的祖国母亲节日快乐！今天，介绍地图组件。ReactNative官方提供了一个MapView的组件，我们先来说说它吧。先来看下他的API吧。iOS annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLef

2016-09-30 15:03:58 9967 3

原创《React-Native系列》35、 RN在Android下支持gif的另一种方案

在前面的文章中，我们介绍过在RN中Android如果处理Gif格式的图片。参考：http://blog.csdn.net/codetomylaw/article/details/52280828我们是把图片切成n张，如果利用定时器去轮播图片。这种方案存在的问题：1、需要预加载n张图片，哪怕页面最后不使用gif，n张图片也会被加载到内存；2、需要自己处理定时器逻辑；有没有什么更好的方式呢？好，我们今

2016-09-28 18:42:58 5459 2

原创《React-Native系列》34、 ReactNative的那些坑

梳理了下ReactNative中的一些坑，你踩没踩过，它就在那里。1、fetchfetch没有提供超时时间，设置timeout貌似没有作用。标红的地方不能调用response.json() 或 .text()方法，哪怕是通过console.log()输出也不行，如果想查看数据，只能alert。2、Image标签使用本地资源图片的时候需要制定宽度和高度，使用网络资源没有限制。3、Text标签iOS下

2016-09-24 18:21:51 6471

原创《React-Native系列》33、键盘遮挡问题处理

最近在项目中，使用TextInput组件的时候，发现键盘弹出的时候，遮盖了表单。咨询了下做iOS的同学，他们的处理是计算键盘的高度和当前输入域的位置，将界面向上移动一段距离。那在ReactNative中是否也可以有类似的处理方法呢？答案是肯定的，我们使用ScrollVIew的scrollTo方法，我们也主要是讲这种方法。具体方案如下：组件render方法中使用ScrollView，并且设置scro

2016-09-23 21:08:44 17469 3

原创《React-Native系列》32、基于Fetch封装HTTPUtil工具类

关于http请求的工具类，有很多，譬如：httpclient，okhttp。那么关于RN的处理HTTP请求的工具类呢，目前还没有找到，所以自己简单封装了一个，避免代码里到处都是fetch方法。好了，完整代码如下：var HTTPUtil = {};/** * 基于 fetch 封装的 GET请求 * @param url * @param params {} * @param head

2016-09-19 21:41:15 9631 1

原创《React-Native系列》31、 Fetch发送POST请求的坑与解决方案

我们在请求http接口时候，通常都会使用get和post的方式，针对表单提交这类的请求，我们通常采用post方式。那么在RN中的Fetch API中post提交有哪些坑呢？让我们撸起来。我们先来说说Server端的代码，通常我们从Request获取参数时的方法为：String paraValue = request.getParameter(paraName);我们下面说的判断能不能获取参数，就是

2016-09-19 19:24:39 29171 17

原创《React-Native系列》30、 RN组件间通信

今天我们来说一说RN的组件之间的通信。ReactNative的核心之一是他的组件化，组件化的核心是组件之间的通信。组件是有层级来区分的，譬如：父组件子组件。我们先来讲解一个例子。这个是我们要实现的功能，是一个表单的一部分，首先我们想到的是抽象组件。组件有2种状态选中状态，显示后面的课时未选中状态，不显示后面的课时组件的代码如下：import React, { Component } from '

2016-09-13 09:11:29 6055

原创《React-Native系列》29、 RN组件之WebView

说起WebView，我们还是很熟悉的吧。特别是做过Hybrid开发的同学，Web+Native一个很经典的开发模式，包括现在依然很多App上都在使用。我们列举几个比较重要的属性吧source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number 在W

2016-09-09 20:51:43 20143

原创《React-Native系列》28、 RN之AsyncStorage

AsyncStorage是一个简单的、未加密的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的。它用来代替LocalStorage。iOS中存储类似于NSUserDefault,存储问plist文件存放在设备中。Android中存储会在 RocksDB 或者 SQLite 中，取决于你使用哪个。我们还是来看看官网文档，AsyncStorage提供的方法如下：static g

2016-09-09 19:12:10 6650 1

原创《React-Native系列》27、 Redux的异步数据流

我们再前面讲的 redux 中的数据流都是同步的，流程如下：view -> actionCreator -> action -> reducer -> newState -> container component 但是，在大多数的前端业务场景中，需要和后端产生异步交互，譬如:网络api的请求。Redux中怎么来实现异步的数据流呢？异步Action通常我们创建的Action如下：export co

2016-09-08 21:03:12 4647

原创《React-Native系列》26、 ReactNative实现图片上传功能

在查看ReactNative的官方文档的时候，你会发现其实Fackbook是没有提供图片上传功能的。如果我们的项目里需要使用图片上传（用JS 实现图片上传），那我们有没有什么办法呢？通过搜索react-native的github，会发现里面有这么一篇文章：https://github.com/facebook/react-native/issues/5308解决方案：采用FormData来实现，

2016-09-06 09:13:43 25745 2

原创《React-Native系列》25、详解Redux的connect方法

上面一篇文章，我们只是从Demo的角度讲解了Redux，对于connect的部分，我们只是一笔带过。那么我们这篇文章同样是基于上一篇文章中的Demo，来从实战的角度来详细讲解下connect方法。connect方法声明如下：connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])作用：连

2016-09-02 12:38:52 8608