轉載請標明出處：

(一)前言

        【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org

今天我們一起來看一下ListView元件的使用詳解以及具體事例

剛建立的React Native技術交流3群(496508742),React Native技術交流4群(458982758)，請不要重複加群！歡迎各位大牛,React Native技術愛好者加入交流!同時部落格左側歡迎微信掃描關注訂閱號,移動技術乾貨,精彩文章技術推送!

ListView元件是React Native中一個比較核心的元件，用途非常的廣。該元件設計用來高效的展示垂直滾動的資料列表。最簡單的API就是建立一個

(二)官方ListView簡單例項

下面看一個關於ListView最簡單的例子:

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  ListView,
} from'react-native';
var ListViewDemo =React.createClass({
    getInitialState: function() {
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        return {
          dataSource: ds.cloneWithRows(['row1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8']),
        };
    },
    render: function() {
      return (
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) =><Text>{rowData}</Text>}
        />
      );
    }
});
AppRegistry.registerComponent('ListViewDemo',() => ListViewDemo);
 

例項執行效果如下:

(三)高階特性

         ListView可以支援一些高階特性，包括設定每一組的粘性的頭部(類似於iPhone)、支援設定列表的header以及footer檢視、當資料列表滑動到最底部的時候支援onEndReached方法回撥、裝置螢幕列表可見的檢視資料發生變化的時候回撥onChangeVisibleRows以及一些效能方面的優化特性。

ListView設計的時候，當需要動態載入非常大的資料的時候，下面有一些方法效能優化的方法可以讓我媽ListView滾動的時候更加平滑：

• 只更新渲染資料變化的那一行，rowHasChanged方法會告訴ListView元件是否需要重新渲染當前那一行。具體可以檢視
  ListViewDataSource例項
• 選擇渲染的頻率預設情況下面每一個event-loop(事件迴圈)只會渲染一行(可以同pageSize自定義屬性設定)。這樣可以把大的工作量進行分隔，提供整體渲染的效能。

(四)基本屬性方法

• ScrollView相關屬性樣式全部繼承
• dataSource   ListViewDataSource  設定ListView的資料來源
• initialListSize  number  進行設定ListView元件剛剛載入的時候渲染的列表行數，用這個屬性確定首屏或者首頁載入的數量，而不是花大量的時間渲染載入很多頁面資料，提供效能哦
• onChangeVisibleRows  function  (visibleRows,changedRows)=>void。當可見的行發生變化的時候回撥該方法。visibleRows引數對所有可見的行為{selectionID:{rowId:true}}的形式，changedRow引數對已經改變可見的行為{selectionID:{rowID:true|false}}。該值true代表可見，false代表在檢視之外不可見的行。
• onEndReachedThreshold  number 當偏移量達到設定的臨界值呼叫onEndReached
• onEndReached function 方法，當所有的資料項行被渲染之後，並且列表往下進行滾動。一直滾動到距離底部onEndReachedThredshold設定的值進行回撥該方法。原生的滾動事件進行傳遞(通過引數的形式)。
• pageSize   number 每一次事件的迴圈渲染的行數
• removeClippedSubviews  bool  該屬性用於提供大資料列表的滾動效能。該使用的時候需要給每一行(row)的佈局新增over:'hidden'樣式。該屬性預設是開啟狀態。
• renderFooter function 方法  ()=>renderable ，在每次渲染過程中頭和尾總會重新進行渲染。如果發現該重新繪製的效能開銷比較大的時候，可以使用StaticContainer容器或者其他合適的元件。在每一次渲染過程中Footer(尾)該會一直在列表的底部，header(頭)該會一直在列表的頭部
• renderHeader  function 方法使用情況和上面的renderFooter差不多
• renderRow function 方法   (rowData,sectionID,rowID,highlightRow)=>renderable   該方法有四個引數，其中分別為資料來源中一條資料，分組的ID，行的ID，以及標記是否是高亮選中的狀態資訊。
• renderScrollComponent function 方法 (props)=>renderable  該方法可以返回一個可以滾動的元件。預設該會返回一個ScrollView
• renderSectionHeader function (sectionData,sectionID)=>renderable   如果設定了該方法，這樣會為每一個section渲染一個粘性的header檢視。該檢視粘性的效果是當剛剛被渲染開始的時候，該會處於對應的內容的頂部，然後開始滑動的時候，該會跑到螢幕的頂端。直到滑動到下一個section的header(頭)檢視，然後被替代為止。
• renderSeparator function  (sectionID,rowID,adjacentRowHighlighted)=>renderable 如果設定該方法，會在被每一行的下面渲染一個元件作為分隔。除了每一個section分組的頭部檢視前面的最後一行。
• scrollRenderAheadDistance number  進行設定當該行進入螢幕多少畫素以內之後就開始渲染該行

(五)使用例項

     5.1.首先看一個相對簡單的例項，列表每一行顯示一個圖片以及文字，具體程式碼如下:

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  ListView,
  Image,
  TouchableOpacity,
} from'react-native';
var THUMB_URLS = [
  require('./imgs/like.png'),
  require('./imgs/dislike.png'),
  require('./imgs/call.png'),
  require('./imgs/fist.png'),
  require('./imgs/bandaged.png'),
  require('./imgs/flowers.png'),
  require('./imgs/heart.png'),
  require('./imgs/liking.png'),
  require('./imgs/party.png'),
  require('./imgs/poke.png'),
  require('./imgs/superlike.png'),
  require('./imgs/victory.png'),
  ];
var ListViewDemo =React.createClass({
    getInitialState: function() {
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        return {
          dataSource: ds.cloneWithRows(['row1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8','row 9','row10','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 + '我是測試行號哦~'}
              </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('ListViewDemo',() => ListViewDemo);

執行效果如下:

    5.2.例項實現表格佈局，程式碼如下:

'use strict';
var React =require('react-native');
var {
  AppRegistry,
  Image,
  ListView,
  TouchableHighlight,
  StyleSheet,
  Text,
  View,
} = React;
 
var THUMB_URLS = [
  require('./imgs/like.png'),
  require('./imgs/dislike.png'),
  require('./imgs/call.png'),
  require('./imgs/fist.png'),
  require('./imgs/bandaged.png'),
  require('./imgs/flowers.png'),
  require('./imgs/heart.png'),
  require('./imgs/liking.png'),
  require('./imgs/party.png'),
  require('./imgs/poke.png'),
  require('./imgs/superlike.png'),
  require('./imgs/victory.png'),
  require('./imgs/logo.png'),
];
 
var ListViewDemo =React.createClass({
  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource:ds.cloneWithRows(this._genRows({})),
    };
  },
  _pressData: ({}: {[key: number]: boolean}),
  componentWillMount: function() {
    this._pressData = {};
  },
  render: function() {
    return (
      <ListView
        initialListSize={12}
        contentContainerStyle={styles.list}
        dataSource={this.state.dataSource}
        renderRow={this._renderRow}
      />
    );
  },
  _renderRow: function(rowData: string,sectionID: number, rowID: number) {
    var imgSource = THUMB_URLS[rowID];
    return (
      <TouchableHighlight underlayColor="red">
        <View>
          <View style={styles.row}>
            <Image style={styles.thumb} source={imgSource} />
            <Text style={styles.text}>
              {rowData}
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  },
  _genRows: function(pressData: {[key: number]:boolean}): Array<string> {
    var dataBlob = [];
    for (var ii = 0; ii < THUMB_URLS.length;ii++) {
      dataBlob.push('單元格 ' + ii);
    }
    return dataBlob;
  },
});
var styles =StyleSheet.create({
  list: {
    marginTop:5,
    justifyContent: 'space-around',
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  row: {
    justifyContent: 'center',
    padding: 5,
    margin: 3,
    width: 85,
    height: 85,
    backgroundColor: '#F6F6F6',
    alignItems: 'center',
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#CCC'
  },
  thumb: {
    width: 45,
    height: 45
  },
  text: {
    flex: 1,
    marginTop: 5,
    fontWeight: 'bold'
  },
});
AppRegistry.registerComponent('ListViewDemo',() => ListViewDemo);

執行效果如下:

(六)最後總結

今天我們主要學習一下ListView元件的諒解以及相關例項演示。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回覆一下。

       關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),專案管理以及部落格文章!(歡迎關注，第一時間推送精彩文章)

     關注我的微博，可以獲得更多精彩內容