React Native知識10-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);

效果圖：

 

 

最近有個妹子弄的一個關於擴大眼界跟內含的訂閱號，每天都會更新一些深度內容，在這里如果你感興趣也可以關注一下(嘿對美女跟知識感興趣)，當然可以關注后輸入：github 會有我的微信號，如果有問題你也可以在那找到我；當然不感興趣無視此信息；