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