ListView組件講解以及最齊全實例(19) · React Native學習指南

# 轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50635659](http://blog.csdn.net/developer_jiangqq/article/details/50635659) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言 ? ? ? ??【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)?????? ? ? ? ? ??今天我們一起來看一下ListView組件的使用詳解以及具體事例 ?????????剛創建的React Native技術交流1群(282693535),React Native交流2群:(496601483)，請不要重復加群！歡迎各位大牛,React?Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! ??????????ListView組件是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); ~~~ ??????實例運行效果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fc03c1979.jpg) # (三)高級特性 ???????? 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); ~~~ ???運行效果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fc03d533c.jpg) ??? 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); ~~~ ??運行效果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fc03e8957.jpg) # (六)最后總結 ??????????今天我們主要學習一下ListView組件的諒解以及相關實例演示。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。 ? ? ? ?尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)）侵權必究！ ? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章) ![](https://box.kancloud.cn/2016-02-29_56d3fbf75e010.jpg) ? ? ?關注我的微博，可以獲得更多精彩內容 ? ? ??[![](https://box.kancloud.cn/2016-02-29_56d3fc00eb890.png)](http://weibo.com/u/1855428195?s=6uyXnP)