React Native 入门

理念

组件（components）

工程师希望能像搭积木s 一样开发和维护系统，通过组装模块得到一个完整的系统。
在 RN 中，就是通过把 html、css 和 JS 放在一起维护，变成一个可以组合的单元，来搭建网页。

数据-视图 state - render

数据变化后，对应的视图部分就会变化。

语法

ES6 vs ES5

RN 官方文档的教程默认用的是 ES6 语法(但组件和API这块还夹杂着大量的ES5语法)。另外，RN 项目在本地 node_modules 有个 bable 的包，可以把 ES6 转换为 ES5，所以不用担心新语法不能被现有浏览器编译。

先简单介绍下默认项目中使用的几个 ES6 语法点，但不展开。

let 和 const 与 val 类似，都是用来声明变量的。
箭头函数

(x)  => 2*x   
 // 相当于
function(x){return 2*x}

Class 类

//定义类 
class Title {  
  // 构造函数 
  constructor(text) { 
    this.text= text; 
  }   
 // 原型链方法 
  render() { 
    return (
       <header>this.text</header>
    )
  } 
} 

// ES5 
function Title (text){ 
  this.text= text; 
} 
Point.prototype.render= function () { 
  return '<header>'+this.text+'</header>'; 
} 

继承 用 extends 继承类

class SubHeader  extends Header  {}

模块引用

// ES6
import { Component, StyleSheet, View } from 'react-native'; 

// 等同于
let _rn= require('react-native'); 
let Component= _rn.Component, StyleSheet= _rn.StyleSheet, View = _rn.View; 

// 项目开始时，先引入默认模块和其他模块
import React, {
  AppRegistry,
  Component,
  Image,
  ListView,
  StyleSheet,
  Text,
  View,
} from 'react-native';

JSX vs HTML(模板) & CSS & JS

JSX 是一种混合 HTML、CSS 和 JS 的语法，所以在 JSX 中忘了结构、样式、行为分离吧。在 React 中只有模块，JSX这种语法也是为组件服务的。

最简单的组件

render 方法用来渲染组件。每个组件由首先由最基本的 HTML 结构 或其他组件组成。
View 就是一个 RN 封装好的组件，它对应着 div，UIView，android.view，用于页面布局。
Text 也是一个 RN 封装好的组件，它类似着 span 之类的标签，里面装的是文字。RN 是没有匿名文本节点的，所有文字必须装在 Text 中间。

class TitleList extends Component{
  render() {
    return (
<View>
   <Text>React Native</Text>
</View>
    ); 
  }
}

我们只要将数据 TitleList 输出到虚拟机的 app（MyProject）中，即可看到写好的文本。

// 将 TitleList 注入到 app 中
AppRegistry.registerComponent('MyProject', () => TitleList);

我们可以用变量代替文字。

let title = 'React Native';

class TitleList extends Component{
  render() {
    return (
<View>
    <Text>{title}</Text>
</View>
    ); 
  }
}

给组件加点样式

直接在组件中写 style={} ，在中间使用对象的写法书写样式即可。

let title = 'React Native';

class TitleList extends React.Component{
  render() {
    return (
        <View style={{flexDirection: 'row', height: 100, padding: 20}}>
        <Text>React Native</Text>
        </View>
    );
  }
}

当然也可用直接给个在 style 中 class 名

let title = 'React Native';

const styles = StyleSheet.create({
  title : {
    flexDirection: 'row',
    height: 100,
    padding: 20,
  }
});
class TitleList   extends React.Component{
  render() {
    return (
        <View style={styles.title }>
               <Text>React Native</Text>
        </View>

    );
  }
}

拼装组件

有了单个 title 碎片后，希望把它拼装成一个真正的 list。我们需要引入一个原生组件 ListView ，并把定义的 title 组件和真实的数据拼装到 ListView 组件中去。

// 首先将 title 碎片 拿出来
renderTitle (titles) {
  return (
    <View style={styles.title}>
      <Text >{titles.description}</Text>
    </View>
  );
}
//  引入一个原生组件 ListView
//  用 renderRow 属性引用 renderTitle 组件。
//  再将用 dataSource 属性引用数据，这里用 this.state.dataSource 表示数据，后续会对其初始化
render() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderTitle}
      />
  );
}

组件的数据流

然后用 constructor 对 this.state.dataSource 初始化

  constructor (props) {
    // 继承父类
    super(props);
    // 实例化一个 ListView.DataSource 对象。并且只修改改变数据，这可以保证只渲染改动的地方。
    // RN 的 state 属性对应的数据变了，那么组件就会被重新渲染。只修改局部数据，那么直有组件的局部被重新渲染。
    let ListDate = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    //  初始化 ListView数据，注意 state 一般用于可能被事件触发并改变视图的数据。
    this.state = {
      dataSource: ListDate.cloneWithRows([
        { description: 'RN1' },
        { description: 'RN2' },
        { description: 'RN2' },
        { description: 'RN2' },
        { description: 'RN2' },
      ])
    };
  }

完整的组件

class TitleList extends React.Component{

  // 初始化
  constructor (props) {
    // 不知道干嘛用，不加会报错。
    super(props);
    // 实例化一个 ListView.DataSource 对象。并且只修改改变数据，这可以保证只渲染改动的地方。
    // RN 的 state 属性对应的数据变了，那么组件就会被重新渲染。只修改局部数据，那么直有组件的局部被重新渲染。
    let ListDate = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    //  初始化 ListView 数据
    this.state = {
      dataSource: ListDate.cloneWithRows([
        { description: 'RN1' },
        { description: 'RN2' },
      ])
    };
  }

  // 渲染
  render() {
    // ListView 是个原生组件
    // dataSource 属性声明的是组件的数据
    // renderRow 将 renderTitle 按排渲染
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderTitle}
        />
    );
  }

  // title 碎片
  renderTitle(titles){
    return (
      // styles 样式
      <View style={styles.title}>
        // dataSource 传来的数据
        <Text >{titles.description}</Text>
      </View>
    );
  }
}

工具
启动 命令行
编辑器 webstrom 支持 JSX
调试 chrome

参考文献
React 入门实例教程（阮一峰） http://www.ruanyifeng.com/blog/2015/03/react
ECMAScript 6 入门（阮一峰） http://es6.ruanyifeng.com/
es5-es6写法对照表（天地之灵） http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8
React Native 官网 http://facebook.github.io/react-native/
React Native 中文 http://reactnative.cn/
React 官网 https://facebook.github.io/react/index.html