• ListView這個(gè)是用的最多的核心組件

基本屬性方法

• ScrollView相關(guān)屬性樣式全部繼承
• dataSource ListViewDataSource 設(shè)置ListView的數(shù)據(jù)源
• initialListSize number 進(jìn)行設(shè)置ListView組件剛剛加載的時(shí)候渲染的列表行數(shù)，用這個(gè)屬性確定首屏或者首頁(yè)加載的數(shù)量，而不是花大量的時(shí)間渲染加載很多頁(yè)面數(shù)據(jù)，提高性能
• onChangeVisibleRows function (visibleRows,changedRows)=>void。當(dāng)可見(jiàn)的行發(fā)生變化的時(shí)候回調(diào)該方法。visibleRows參數(shù)對(duì)所有可見(jiàn)的行為{selectionID:{rowId:true}}的形式，changedRow參數(shù)對(duì)已經(jīng)改變可見(jiàn)的行為{selectionID:{rowID:true|false}}。該值true代表可見(jiàn)，false代表在視圖之外不可見(jiàn)的行。
• onEndReachedThreshold number 當(dāng)偏移量達(dá)到設(shè)置的臨界值調(diào)用onEndReached
• onEndReached function 方法，當(dāng)所有的數(shù)據(jù)項(xiàng)行被渲染之后，并且列表往下進(jìn)行滾動(dòng)。一直滾動(dòng)到距離底部onEndReachedThredshold設(shè)置的值進(jìn)行回調(diào)該方法。原生的滾動(dòng)事件進(jìn)行傳遞(通過(guò)參數(shù)的形式)。
• pageSize number 每一次事件的循環(huán)渲染的行數(shù)
• removeClippedSubviews bool 該屬性用于提供大數(shù)據(jù)列表的滾動(dòng)性能。該使用的時(shí)候需要給每一行(row)的布局添加over:'hidden'樣式。該屬性默認(rèn)是開(kāi)啟狀態(tài)。
• renderFooter function 方法 ()=>renderable ，在每次渲染過(guò)程中頭和尾總會(huì)重新進(jìn)行渲染。如果發(fā)現(xiàn)該重新繪制的性能開(kāi)銷(xiāo)比較大的時(shí)候，可以使用StaticContainer容器或者其他合適的組件。在每一次渲染過(guò)程中Footer(尾)該會(huì)一直在列表的底部，header(頭)該會(huì)一直在列表的頭部
• renderHeader function 方法 使用情況和上面的renderFooter差不多
• renderRow function 方法 (rowData,sectionID,rowID,highlightRow)=>renderable 該方法有四個(gè)參數(shù)，其中分別為數(shù)據(jù)源中一條數(shù)據(jù)，分組的ID，行的ID，以及標(biāo)記是否是高亮選中的狀態(tài)信息。
• renderScrollComponent function 方法 (props)=>renderable 該方法可以返回一個(gè)可以滾動(dòng)的組件。默認(rèn)該會(huì)返回一個(gè)ScrollView
• renderSectionHeader function (sectionData,sectionID)=>renderable 如果設(shè)置了該方法，這樣會(huì)為每一個(gè)section渲染一個(gè)粘性的header視圖。該視圖粘性的效果是當(dāng)剛剛被渲染開(kāi)始的時(shí)候，該會(huì)處于對(duì)應(yīng)的內(nèi)容的頂部，然后開(kāi)始滑動(dòng)的時(shí)候，該會(huì)跑到屏幕的頂端。直到滑動(dòng)到下一個(gè)section的header(頭)視圖，然后被替代為止。
• renderSeparator function (sectionID,rowID,adjacentRowHighlighted)=>renderable 如果設(shè)置該方法，會(huì)在被每一行的下面渲染一個(gè)組件作為分隔。除了每一個(gè)section分組的頭部視圖前面的最后一行。
• scrollRenderAheadDistance number 進(jìn)行設(shè)置當(dāng)該行進(jìn)入屏幕多少像素以?xún)?nèi)之后就開(kāi)始渲染該行

實(shí)例

'use strict';
import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  Image,
  TouchableOpacity,
} from 'react-native';
//引入

var THUMB_URLS = [
  require('./imgs/send.png'),
  require('./imgs/send.png'),
  require('./imgs/send.png'),
  require('./imgs/send.png'),
  require('./imgs/send.png'),
  require('./imgs/send.png'),
  require('./imgs/send.png'),
  require('./imgs/send.png'),
  require('./imgs/send.png'),
  require('./imgs/send.png'),
  require('./imgs/send.png'),
  require('./imgs/send.png'),
];
var RnDemo = React.createClass({
  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(['row 1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8','row 9','row 10','row 11','row 12']),
    };
  },
  _renderRow: function(rowData: string, sectionID: number, rowID: number) {
    var imgSource = THUMB_URLS[rowID];
    return (
      <TouchableOpacity>
        <View>
          <View style={styles.row}>
            <Image style={styles.thumb} source={imgSource} />
            <Text style={{flex:1,fontSize:16,color:'blue'}}>
              {rowData + '我是測(cè)試行號(hào)哦~'}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  },
  render: function() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this._renderRow}
      />
    );
  }
});
var styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#F6F6F6',
  },
  thumb: {
    width: 50,
    height: 50,
  },
});
AppRegistry.registerComponent('RnDemo', () => RnDemo);