我想我要寫一篇長長的部落格來總結一下這幾天的學習。畢竟之前做安卓的都是用java，第一次接觸js，還是發現有點困難。      首先，講一下我自己對RN這個總結的理解吧（是相對於安卓），安卓的話，想必都知道Activty是mvc模式，那麼RN是怎麼渲染檢視的呢，我是不是都劇透了，把渲染這個詞都說出來了。      -  -。。。  好吧。RN的話 ，我自己的理解是採用CSS樣式，然後渲染檢視。具體的我們接下來會有介紹。      然後，吐槽一下js吧，js比起java感覺好隨意，但我真的不是隨意的人啊，所以用起來真的好難！！      - -。。      好吧，無論如何，有圖有真相。      程式碼見分曉吧。      我借用的ListView的Demo是官方的示例，官網API      然後經過我的畫蛇添足 =。=    原始碼地址      那麼，下面就正式開始了，====================================================》     =========================================================================》     我們自己定義封裝一個ListView（MyListView）    ①自定義一個類的寫法：

<pre class="javascript" name="code">export default class MyListView extends Component{
  //構造方法，可以等同於es5的getInitialState方法
  constructor(props){
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(this._genRows()),

    }
  }
 

render()</span>{    return(      <ListView style={styles.sub_item}        dataSource = {this.state.dataSource}        renderRow = {this._renderRow.bind(this)}      />    )   }<div>//系統renderRow會提供以下的引數  _renderRow(rowData: string, sectionID: number, rowID: number){    var imageSrc = IMAGES[rowID%IMAGES.length];    return(      <TouchableOpacity  onPress = {this._pressRow.bind(this,rowID)}>        <View style={styles.item}></div><div></div><div>            <Image style={styles.pic} source={imageSrc}/></div><div></div><div>            <View style={styles.sub_item}>               <View >                   <Text style = {styles.text}>ListView</Text>               </View>               <View>                   <Text  style = {styles.text}> {rowData}+{sectionID}+{rowID}</Text>               </View>            </View>        </View>      </TouchableOpacity>    )  }</div><div></div><div>  _genRows(): Array<string> {    var dataBlob = [];    for (var ii = 0; ii < 100; ii++) {</div><div></div><div>      dataBlob.push('Row ' + ii );    }    return dataBlob;  }  _pressRow(x){    console.log('click'+x);  }}</div><div></div><div>const styles = StyleSheet.create({  item:{    flex:1,    flexDirection:'row',    height:100,    borderWidth:1,    borderRadius:5,    marginBottom:10,    justifyContent: 'center',    alignItems: 'center',</div><div></div><div>  },</div><div></div><div>  pic:{  flex:1,    borderRadius:20,  resizeMode: Image.resizeMode.contain</div><div></div><div>  },  sub_item:{    flex:1,</div><div></div><div>  },  text:{    textAlign: 'center',</div><div></div><div>  }</div><div></div><div>});</div>

</pre><pre class="javascript" name="code">
 

    上面的程式碼中，首先我們注意到export default 這個呢是表明這個類可以被外部引用，export關鍵字在安卓也出現過吧，意思其實差不多的。然後接下來看到構造方法，並不陌生吧，與java不同的是，JS不支援函式的過載。構造方法預設的書寫就是帶props引數，理解的話這個props可以理解成java當中的構造方法的引數，但嚴格的說起來，props和state都是用於描述component狀態的，就是說不管你用或不用，它都在那裡，從java的觀點來看這兩個屬性，我第一個問題都是他們是什麼型別的吧，經過我的嚴密觀察，從嚴謹的角度來講，他們是物件型別的，可以隨便新增屬性，就是你用到什麼，你就可以給他新增什麼屬性。是不是

很隨意。那我又有問題了，反正都是可以新增屬性的，用一個就夠了，為啥又有兩個，然後我又嚴密觀察了一下，其中有setState方法，顧名思義，但是這個方法的特殊就在於會觸發render方法，就是重繪檢視。那樣的話區別就有了吧，一般props存放一些不變的屬性，state存放一些屬性值改變會導致檢視重繪的屬性。

   render()這個方法就是繪製檢視，返回的檢視就是要顯示在介面的檢視啦。

   ListView的基本用法的話我就簡單介紹一下。我們先看一下重要程式碼

  <ListView style={styles.sub_item}
        dataSource = {this.state.dataSource}
        renderRow = {this._renderRow.bind(this)}
      />

</pre></p><p></p><p>    ListView最簡單的用法就是這樣啦，dataSource是所有資料，renderRow是Item的檢視。還有其他的可以看<a target=_blank href="http://react-native.cn/" target="_blank">官網API</a>。有一點需要強調的是，資料的話，需要進行簡單處理一下，</p><pre class="javascript" name="code">  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(this._genRows())}

    這裡資料片段，第一句話的意思大概是這樣的意思，r1 和 r2 是不同時刻的Item，相等則不變，不相等則變成r2,這樣的意義在於在資料發生變化重新渲染檢視時只改變有所變化的Item這一行，其他的不變。然後第三句話就是把第一句話這種格式賦給真正的資料。我這裡_genRows()這個方法返回的是100個數組，就是偽造100個數據吧。

    然後基本上就實現了我們的ListView了，我猜想作為安卓開發者，這個時候一定是要問那每個Item的點選事件怎麼設定呢。好，既然這位同學你發出了這樣的問題，那麼我就簡單說明一下。

     RN中有幾種點選控制元件，，Touchable,可以觸控的，就是可以點選的咯，給誰設定點選事件就用他們之一來包裹誰。這裡就是檢視的部分了，我們看一下我這裡的佈局，

  <TouchableOpacity  onPress = {this._pressRow.bind(this,rowID)}>
        <View style={styles.item}>

            <Image style={styles.pic} source={imageSrc}/>

            <View style={styles.sub_item}>
               <View >
                   <Text style = {styles.text}>ListView</Text>
               </View>
               <View>
                   <Text  style = {styles.text}> {rowData}+{sectionID}+{rowID}</Text>
               </View>
            </View>
        </View>
      </TouchableOpacity>

     以上是Item的佈局，最外層是TouchableOpacity,至於為什麼我選這個還不選其他的，任性。。。。。  有興趣的可以研究一下每一個的區別。  然後onPress就是設定點選事件了。至於樣式什麼的，就省略了。

     好了，就到此結束了。畢竟剛學兩天，好多地方說的不對的明示一下我，免得我一直被自己誤導。