React-Native牛刀小试仿京东砍啊砍砍到你手软

React-Native基础教程

*React-Native基础篇作者git

*React-Native官方文档

*Demo

    几个月前facebook推出了React Native框架，允许开发着使用Javascript代码来实现iOS原生的应用，随后十月份安卓版的也相继问世，从此我们可以优雅的Learn once, write anywhere…

    早在几年前开发者就开始使用Javascript＋html和PhoneGap来编写各式各样的app了，开发者可以优雅的完成一套js的shell，然后分别在不同的平台下进行打包，最终生成不同平台的app，知识app的最终的展现形式都是html类型的。一度曾经出现webapp 是否要取代native ，这么多年过去，结果大家也不言而知了。

    但是react native的确是一个很了不起的东西，开发者们都不禁为之欢呼，react native所展现出来的应用实质上是native应用，开发者完成同一套js代码，分别在iOS和安卓平台下分别打包最终分别能映射生成分属不同的安卓原生应用与iOS原生应用，这个优势可能是目前为止被广大开发最为喜欢的地方，一直以来web app最为大家所诟病的可能就是html的页面永远无法与原生页面的体验相比拟。

• 通过react native框架，你可以用Javascript来编写和运行应用程序逻辑，而UI却可以是真正的本地代码编写的，因此，你完全不需要一个HTML5编写的UI。

• React框架采用了一种新颖的、激进的和高度函数式的方式来构建UI。简单说，应用程序的UI可以简单地用一个函数来表示应用程序当前的状态

    React Native的重点是把React编程模型引进到移动App的开发中去。它的目的并不是跨平台，一次编写到处运行。它真正的目标是“一次学习多处编写”。这是一个重大的区别。本教程只涉及iOS，但一旦你学会了它的思想，你就可以快速将同样的知识应用到Android App的编写上。

    React Native的编写模式更加友好于从事于js的前端开发者，它本身采用了React js的模式，尤其是从事React js的开发人员，只需要熟悉下基本的文档就能瞬间变成一个iOS＋安卓双向通吃的移动专家，React内部引入可一些新的概念，如 DOM和reconciliation，React直接将函数式编程的理念用到了UI层面。
不过相对来说，OC的开发人员只要熟悉一下基本demo看上几个例子应该就不会有太多问题了，如果之前有过web端开发经验的话相信上手会更快一些。

下面介绍一个简单的demo操作，这个教程一起带你去体验一下京东促销砍啊砍页面的OC->React 移植过程，通过本教程你就可以了解React Native的一些基本开发流程了。
效果：

getInitialState:function(){

      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      return {
        dataSource: new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
        }),
        loaded:false,
        currentPage:0,
      };
  }

getInitialState:function()类似于OC中的init函数，我们一般的习惯喜欢在init函数初始化一个变量等数据，在React Native依旧是这样。

发起网络请求，获取数据，缓存在全局变量List中

//定义request url 
var urlPath = 'http://ccguo.gitcafe.io/cut.json';
var CACHE = [];

//componentDidMount:function  系统方法
componentDidMount:function(){
  this.fetchData();
  },
//自定义函数处理网络获取数据，将数据放入全局变量CACHE
  cache:function(items){
      for (var i in items) {
        CACHE.push(items[i]);
      }
      this.setState({
               dataSource: this.state.dataSource.cloneWithRows(CACHE),
        });
    },

//发起 网络请求，获得json
  fetchData:function(){
      console.log('hello world');
  fetch(urlPath)
    .then((response) => response.json())
        .then((responseText) => {
          console.log(responseText.cutList);
          this.cache(responseText.cutList);
        })
        .catch((error) => {
          console.log(error);
        });
  }

    这个过程模拟了在iOS原生应用里面，初始化网络request，发起网络请求，得到数据，解析数据，然后将数据存入list这一些列操作，其实在js中，js脚本处理json的能力还是很强的，我们再也不需要像OC中哪些objectForKey:的操作了，我们不需要任何MJExtension、JSONModel、 Mantle等一些潜在的工具了，省去了很多的麻烦，我们直接拿到一个json对象，直接对对象进行操作。

    另外React的网络请求此处我们只是使用了fetch API
脸谱官方的api(脸谱对于网络请求提供了多种API，如：fetch WebSocket XMLHttpRequest等，具体可参照API)

    从代码上看js的链式编程刚看上去有点不太习惯，不过整体使用起来还是比OC中快捷多了，foreach遍历、消息队列进出栈，总之脚步里面省去了以往还不得不在意的好多麻烦，其实这块相对swift而言，新的版本中渐渐的已经得到了部分提升，不过还是要感谢脸谱团队，没有他们，可能还见识不到React的强大。

构建cell

_renderRow:function(data,sectionID,rowID){
    return (
       this._pressRow(data,rowID)}>
      
                        
            京东价318.00
            
            已有256人砍价
            马上砍
            
          
        
          
        
      
      );
  },
  _pressRow: function(data,rowID) {
    this.props.navigator.push({
      component: detail,
      passProps: {data: data}
    });
  }

在上述初始化ListView UI的时间，我们指定了renderRow 对应的action事件，此处我们可以直接在_renderRow:function中构建自己的cell模版，至于React Native中UI的标签基本用法，大家可以去头部基础教程里面找，有点类似于html标签，总之我们在_renderRow:function纯碎是构造cell的代码，这个类似于tableViewCell subClass, cell点击事件我们使用一个TouchableHighlight来代替

  this._pressRow(data,rowID)}>
 ....
 

TouchableHighlight事件处理action同样是一个函数（不解释），在_pressRow事件中我们处理自己的cell点击跳转，顺便插一句下一步的操作，_pressRow（data,rowID）是带有形参的
另外 ListView renderRow 事件的重载函数，形参类型这个具体参照脸谱官方的api

_renderRow:function(data,sectionID,rowID)。

整体运行效果如下：

处理cell跳转事件

var detail = require('./Detail');

 _pressRow: function(data,rowID) {
    this.props.navigator.push({
      component: detail,
      passProps: {data: data}
    });
  }

React在处理事件跳转的时间，仍旧采用进栈出栈的形式，这一点和Apple的理念还是类似的。

• component:     参数对应将要跳转的目标页面，
• passProps:     传参字典，内部为key-val形式，相当于一个容器，到了目标页面后可以根据key从容器中取出传递的值。

获取页面跳转时间容器中的值

<Text hljs-value">{styles.view}>{this.props.data.wname}Text>

到了目标页面后，我们直接从props容器直接根据key就能将传递的参数去处，此处我们传递参数的本身是一个json,我们只是讲wname显示到detail页面。
效果如下：

接下来做什么

恭喜你，你的第一个React Native App终于完成了！你可以在GitHub上找到每一个”可运行的“步骤的项目源文件，如果你搞不定的时候它们会非常有用的 :]

如果你来自Web领域，你可能觉得在代码中用JS和React框架建立基于本地化UI的App的界面并实现导航不过是小菜一碟。但如果你主要开发的是本地App，我希望你能从中感受到React Native的优点：快速的App迭代，现代Javascript语法的支持和清晰的CSS样式规则。

在你的下一个App中，你是会使用这个框架，还是会继续顽固不化地使用Swift和O-C呢？

无论你怎么选择，我都希望你能从本文的介绍中学习到一些有趣的新东西，并把其中一些原理应用到你的下一个项目中。

如果你有任何问题及建议，请参与到下面的讨论中来！