React Native ListView數據展示

/* "use strict" --- 嚴格模式
* - 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
  - 消除代碼運行的一些不安全之處，保證代碼運行的安全；
  - 提高編譯器效率，增加運行速度；
  - 為未來新版本的Javascript做好鋪墊。
* */
"use strict"

import React, { Component } from 'react';
import {
    AppRegistry, // 注冊組件,是應用的JS運行入口
    StyleSheet,  // 樣式表, 類似於一個集合包含各個組件的屬性
    ListView,
    Dimensions,
    Text,
    View
} from 'react-native';

const { width, height } = Dimensions.get('window')


// 聲明一個 Helloworld 組件
class HelloWorld extends Component {

    constructor(props) {

        super(props);
        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2 //
        });
        this.state = {

            dataSource: ds.cloneWithRows(['1', '2', '3', '4', '5', '6', '7', '8', ])
        };
    }

    render() { // 渲染

      return (

          <View style={styles.container}>
              <ListView contentContainerStyle={styles.listViewStyle}
                        showsVerticalScrollIndicator={true}
                        dataSource={this.state.dataSource}
                        renderRow={(rowData) => <Text style={styles.rowStyle}>{rowData}</Text>}
              />
          </View>
    );
  }
}


const styles = StyleSheet.create({

    container: {
        flex: 1, // 當一個元素定義了flex屬性時，表示該元素是可伸縮的（flex的屬性值大於0的時候才可伸縮）,
        backgroundColor: 'white',
        paddingTop: 20,  // 父組件View,距離屏幕頂部20(狀態欄)
        // width: 300, //把 flex: 1 去掉,自行設定width height,可看一下效果
        // height:400,
    },
    listViewStyle: {
        backgroundColor: 'red' // listView北京顏色

    },
    rowStyle: {
        backgroundColor: 'white',
        color: 'black',
        textAlign: 'center',
        fontSize: 20,
        margin: 10 // 距離四周各 10 像素,設置為0,就無法看到 listViewStyle 效果。

    }
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

**************************************** 知識點 ****************************************

 ListView：

1.一個展示垂直列表，類似於OC中TableView （后續研究 水平列表；

2.並不是立刻渲染所有元素（cell），而是優先渲染屏幕上可見的cell，類似tableview 中 cell的重用；

3.必須的兩個屬性：dataSource和renderRow，前者是列表數據源，后者是逐個解析dataSource中的數據然后返回一個設定好的組件來渲染；

4.renderRow 返回一個可渲染的組件；

4.rowHasChanged ：它是react組件記錄state是否更新的一個方法， 告訴ListView是否需要重新渲染一行數據，即數據是否發生了改變，即在需要重繪界面的時候會進行判斷，如果之前頁面中的改行數據沒有發生變化，則不再進行重繪，否則進行重繪；

**************************************** 效果圖 ****************************************