#
轉載請標明出處:
[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);
~~~
??????實例運行效果如下:

# (三)高級特性
???????? 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)或者底下進行回復一下。
? ? ? ?尊重原創,轉載請注明:From Sky丶清([http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)) 侵權必究!
? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注,第一時間推送精彩文章)

? ? ?關注我的微博,可以獲得更多精彩內容
? ? ??[](http://weibo.com/u/1855428195?s=6uyXnP)
- 前言
- React Native For Android環境配置以及第一個實例(1)
- React Native開發IDE安裝及配置(2)
- React Native應用設備運行(Running)以及調試(Debugging)(3)
- React Native移植原生Android項目(4)
- React Native進行簽名打包成Apk(5)
- React Native庫版本升級(Upgrading)與降級講解(6)
- React Native控件之View視圖講解(7)
- React Native配置運行官方例子-初學者的福音(8)
- React Native控件之Text組件講解(9)
- React Native控件之Image組件講解與美團首頁頂部效果實例(10)
- TextInput組件講解與QQ登錄界面實現(11)
- ProgressBarAndroid進度條講解(12)
- DrawerLayoutAndroid抽屜導航切換組件講解(13)
- ScrollView組件講解(14)
- ToolbarAndroid工具欄控件講解以及使用(15)
- Switch開關與Picker選擇器組件講解以及使用(16)
- ViewPagerAndroid講解以及美團首頁頂部效果實例(17)
- Touchable*系列組件詳解(18)
- React Native專題文章講解,不斷更新中.....
- ListView組件講解以及最齊全實例(19)
- 超詳細Windows版本編譯運行React Native官方實例UIExplorer項目(多圖慎入)
- React Native超棒的LayoutAnimation(布局動畫)
- PullToRefreshViewAndroid下拉刷新組件講解(20)
- RefreshControl組件詳解(21)
- WebView組件詳解以及實例使用(22)