React Native知識10-ListView組件，react10-listview

React Native知識10-ListView組件，react10-listview

ListView - 一個核心組件，用於高效地顯示一個可以垂直滾動的變化的資料列表。最基本的使用方式就是建立一個ListView.DataSource資料來源，然後給它傳遞一個普通的資料數組，再使用資料來源來執行個體化一個ListView組件，並且定義它的renderRow回呼函數，這個函數會接受數組中的每個資料作為參數，返回一個可渲染的組件（作為listview的每一行）。

ListView還支援一些進階特性，譬如給每段/組(section)資料添加一個帶有粘性的頭部（類似iPhone的通訊錄，其首字母會在滑動過程中吸附在螢幕上方）；在列表頭部和尾部增加單獨的內容；在到達列表尾部的時候調用回呼函數(onEndReached)，還有在視野內可見的資料變化時調用回呼函數(onChangeVisibleRows)，以及一些效能方面的最佳化。

有一些效能最佳化使得ListView可以滾動的更加平滑，尤其是在動態載入可能很大（或者概念上無限長的）資料集的時候：

只更新變化的行 - 提供給資料來源的rowHasChanged函數可以告訴ListView它是否需要重繪一行資料（即：資料是否發生了變化）參見ListViewDataSource

限制頻率的行渲染 - 預設情況下，每次訊息迴圈只有一行會被渲染（可以用pageSize屬性配置）。這把較大的工作分散成小的片段，以降低因為渲染而導致丟幀的可能性。

 

一：屬性

1：ScrollView props... 

譯註：這意味著ListView可以使用所有ScrollView的屬性。

2：dataSource ListViewDataSource 

3：ListView.DataSource執行個體（列表依賴的資料來源）

4：initialListSize number 

指定在組件剛掛載的時候渲染多少行資料。用這個屬性來確保首屏顯示合適數量的資料，而不是花費太多幀逐步顯示出來。

5：onChangeVisibleRows function 

(visibleRows, changedRows) => void

當可見的行的集合變化的時候調用此回呼函數。visibleRows 以 { sectionID: { rowID: true }}的格式包含了所有可見行，而changedRows 以{ sectionID: { rowID: true | false }}的格式包含了所有剛剛改變了可見度的行，其中如果值為true表示一個行變得可見，而為false表示行剛剛離開可視地區而變得不可見。

6：onEndReached function 

當所有的資料都已經渲染過，並且列表被滾動到距離最底部不足onEndReachedThreshold個像素的距離時調用。原生的滾動事件會被作為參數傳遞。譯註：當第一次渲染時，如果資料不足一屏（比如初始值是空的），這個事件也會被觸發。

7：onEndReachedThreshold number 

調用onEndReached之前的臨界值，單位是像素。

8：pageSize number 

每次事件迴圈（每幀）渲染的行數。

9：removeClippedSubviews bool 

用於提升大列表的滾動效能。需要給行容器添加樣式overflow:'hidden'。（Android已預設添加此樣式）。此屬性預設開啟。

10：renderFooter function 

() => renderable

頁頭與頁尾會在每次渲染過程中都重新渲染（如果提供了這些屬性）。如果它們重繪的效能開銷很大，把他們封裝到一個StaticContainer或者其它恰當的結構中。頁尾會永遠在列表的最底部，而頁頭會在最頂部。

11：renderHeader function 

renderRow function 

(rowData, sectionID, rowID, highlightRow) => renderable

從資料來源(Data source)中接受一條資料，以及它和它所在section的ID。返回一個可渲染的組件來為這行資料進行渲染。預設情況下參數中的資料就是放進資料來源中的資料本身，不過也可以提供一些轉換器。

如果某一行正在被高亮（通過調用highlightRow函數），ListView會得到相應的通知。當一行被高亮時，其兩側的分割線會被隱藏。行的高亮狀態可以通過調用highlightRow(null)來重設。

12：renderScrollComponent function 

(props) => renderable

指定一個函數，在其中返回一個可以滾動的組件。ListView將會在該組件內部進行渲染。預設情況下會返回一個包含指定屬性的ScrollView。

13：renderSectionHeader function 

(sectionData, sectionID) => renderable

如果提供了此函數，會為每個小節(section)渲染一個粘性的標題。

粘性是指當它剛出現時，會處在對應小節的內容頂部；繼續下滑當它到達螢幕頂端的時候，它會停留在螢幕頂端，一直到對應的位置被下一個小節的標題佔據為止。

14：renderSeparator function 

(sectionID, rowID, adjacentRowHighlighted) => renderable

如果提供了此屬性，一個可渲染的組件會被渲染在每一行下面，除了小區段標頭的前面的最後一行。在其上方的小節ID和行ID，以及鄰近的行是否被高亮會作為參數傳遞進來。

15：scrollRenderAheadDistance number 

當一個行接近螢幕範圍多少像素之內的時候，就開始渲染這一行。

16：iosstickyHeaderIndices [number] 

一個子視圖下標的數組，用於決定哪些成員會在滾動之後固定在螢幕頂端。舉個例子，傳遞stickyHeaderIndices={[0]}會讓第一個成員固定在滾動視圖頂端。這個屬性不能和horizontal={true}一起使用。

 

二：方法

1：getMetrics() 

匯出一些用於效能分析的資料。

2：scrollTo(...args) 

滾動到指定的x, y位移處，可以指定是否加上過渡動畫。

參考 ScrollView#scrollTo.

 

三：執行個體代碼

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  TextInput,  Alert,  ListView} from 'react-native';class ReactNativeProject extends Component {  constructor(props) {  super(props);  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});  this.state = {    dataSource: ds.cloneWithRows(['第一行內容', '第二行內容']),  };}render() {  return (    <ListView style={styles.contentContainer}      dataSource={this.state.dataSource}      renderRow={(rowData) => <Text>{rowData}</Text>}    />  );}}const styles = StyleSheet.create({  contentContainer: {      marginTop:64,      backgroundColor:"#ff0000",    }});AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

：

2:圖文行執行個體

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  TextInput,  Alert,  ListView,  Image,  TouchableOpacity,} from 'react-native';var THUMB_URLS = [  {uri:"http://www.qq745.com/uploads/allimg/150408/1-15040PJ142-50.jpg"},  {uri:"http://ww2.sinaimg.cn/large/8989048bjw1dutawvaz66j.jpg"},  {uri:"http://img.lenovomm.com/s3/img/app/app-img-lestore/1993-2015-07-14062642-1436869602788.jpg?isCompress=true&width=342&height=513&quantity=0.8&rotate=true&dk=2"},  {uri:"http://c.hiphotos.baidu.com/exp/whcrop=160,120/sign=57e0ac939058d109c4b6fff0be28f18e/b8389b504fc2d5620f811f00e51190ef77c66c56.jpg"},  {uri:"http://f.hiphotos.baidu.com/exp/whcrop=160,120/sign=c3918fdeba014a90816b10ffc6070423/34fae6cd7b899e51d2350a7841a7d933c8950d26.jpg"},  {uri:"http://f.hiphotos.baidu.com/exp/whcrop=160,120/sign=2aba0e6674c6a7efb973fe64928a9260/902397dda144ad3494292c3ed2a20cf430ad85f1.jpg"},  {uri:"http://v1.qzone.cc/avatar/201503/04/17/44/54f6d3f8ae76c662.jpg%21200x200.jpg"},  {uri:"http://awb.img.xmtbang.com/img/uploadnew/201510/22/8d822cf398d1482fbe3d0ac6208050c4.jpg"},  {uri:"http://awb.img1.xmtbang.com/wechatmsg2015/article201506/20150601/thumb/6abcaf1a9c69496b8d51ec13eabfb5dd.jpg"},  {uri:"http://photo.jokeji.cn/uppic/15-06/27/17424334047046.jpg"},  {uri:"http://imgsrc.baidu.com/forum/w%3D580/sign=7eb05e9eddf9d72a17641015e428282a/3e87194c510fd9f9b3d66fc8212dd42a2a34a4c9.jpg"},  {uri:"http://img3.redocn.com/tupian/20120703/pazaimeinvdatuishangdeheibaichangmaochongwugou_664529_small.jpg"},  ];class ReactNativeProject extends Component {  constructor(props) {    super(props);    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});    this.state = {      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(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 + '我是測試行號哦~'}                    </Text>                  </View>                </View>              </TouchableOpacity>          );      }      render() {        return (          <ListView          dataSource={this.state.dataSource}          renderRow={this._renderRow}        />        );      }}const styles = StyleSheet.create({  row: {    flexDirection: 'row',    justifyContent: 'center',    padding: 10,    backgroundColor: '#F6F6F6',  },  thumb: {    width: 50,    height: 50,  },});AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

：