【React Native開發】React Native控件之ListView組件講解以及最齊全實例(19)

EliseConyer 8年前發布 | 87K 次閱讀 Android開發移動開發 React Native

來自： http://blog.csdn.net/developer_jiangqq/article/details/50635659

轉載請標明出處：

http://blog.csdn.net/developer_jiangqq/article/details/50635659

本文出自:【江清清的博客】

</div>

( 一 ) 前言

【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏: http://www.lcode.org

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

剛創建的 React Native 技術交流群 ( 282693535 ), 歡迎各位大牛 , React Native 技術愛好者加入交流 ! 同時博客左側歡迎微信掃描關注訂閱號 , 移動技術干貨 , 精彩文章技術推送 !

List View 組件是 React Native 中一個比較核心的組件，用途非常的廣。該組件設計用來高效的展示垂直滾動的數據列表。最簡單的API就是創建一個 ListView.DataSource 對象，同時給該對象傳入一個簡單的數據集合。并且使用數據源 (data source) 實例化一個 ListView 組件 , 定義一個 renderRow 回調方法 ( 該方法的參數是一個數組 ) ，該 renderRow 方法會返回一個可渲染的組件 ( 該就是列表的每一行的 item)

( 二 ) 官方 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 以及一些性能方面的優化特性。

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

只更新渲染數據變化的那一行，row HasChanged 方法會告訴 ListView 組件是否需要重新渲染當前那一行。具體可以查看 ListViewDataSource 實例

選擇渲染的頻率默認情況下面每一個 event-loop( 事件循環 ) 只會渲染一行 ( 可以同page Size 自定義屬性設置 ) 。這樣可以把大的工作量進行分隔，提供整體渲染的性能。

( 四 ) 基本屬性方法

Scroll View 相關屬性樣式全部繼承

dataSource ListViewDataSource 設置 ListView 的數據源

initialListSize number 進行設置 List View 組件剛剛加載的時候渲染的列表行數，用這個屬性確定首屏或者首頁加載的數量，而不是花大量的時間渲染加載很多頁面數據，提供性能哦

onChange VisibleRows function (visibleRows,changedRows)=>void 。當可見的行發生變化的時候回調該方法。vis ibleRows 參數對所有可見的行為 { select ionID:{rowId:true}} 的形式，changed Row 參數對已經改變可見的行為 {selectionID:{rowID:true|false}} 。該值true代表可見，false代表在視圖之外不可見的行。

on EndReachedThreshold number 當偏移量達到設置的臨界值調用 onE nd Reached

onEndReached function 方法，當所有的數據項行被渲染之后，并且列表往下進行滾動。一直滾動到距離底部 onEndReachedThredshold 設置的值進行回調該方法。原生的滾動事件進行傳遞 ( 通過參數的形式 ) 。

page Size number 每一次事件的循環渲染的行數

remove ClippedSubviews bool 該屬性用于提供大數據列表的滾動性能。該使用的時候需要給每一行 (row) 的布局添加over :'hidden' 樣式。該屬性默認是開啟狀態。

re nderFooter function 方法 ()=>renderable ，在每次渲染過程中頭和尾總會重新進行渲染。如果發現該重新繪制的性能開銷比較大的時候，可以使用 StaticContainer 容器或者其他合適的組件。在每一次渲染過程中Footer ( 尾 ) 該會一直在列表的底部， header( 頭 ) 該會一直在列表的頭部

ren derHeader function 方法使用情況和上面的 renderFooter 差不多

render Row function 方法 ( ro w Data ,sectionID,rowID,highlightRow)=>renderable 該方法有四個參數，其中分別為數據源中一條數據，分組的ID，行的ID，以及標記是否是高亮選中的狀態信息。

renderScrollComponent function 方法 (props)=>renderable 該方法可以返回一個可以滾動的組件。默認該會返回一個 ScrollView

renderSectionHeader function (sectionData,sectionID)=>renderable 如果設置了該方法，這樣會為每一個 section 渲染一個粘性的 header 視圖。該視圖粘性的效果是當剛剛被渲染開始的時候，該會處于對應的內容的頂部，然后開始滑動的時候，該會跑到屏幕的頂端。直到滑動到下一個 section 的header ( 頭 ) 視圖，然后被替代為止。

rend erSeparator function (sectionID,rowID,adjacentRowHighlighted)=>renderable 如果設置該方法，會在被每一行的下面渲染一個組件作為分隔。除了每一個 section 分組的頭部視圖前面的最后一行。

s crollRenderAheadDistance 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);</pre> 
運行效果如下 : 

 

( 六 ) 最后總結 

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

尊重原創，轉載請注明：From Sky丶清（ http://blog.csdn.net/developer_jiangqq ） 侵權必究！ 

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

 

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

 
</div>
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>