React Native的組件ListView類似於iOS中的UITableView和UICollectionView,也就是說React Native的組件ListView既可以實現UITableView也可以實現UICollectionView。
ListView的使用方法：
1.首先創建一個ListView.DataSource數據源，然后向他傳遞一個普通的數據源數組。
2.使用該數據源實例化一個ListView組件，定義一個renderRow回調函數，這個函數會接收數組中的每個數據作為參數，並返回一個可以渲染的組件部分。這個組件部分就是ListView的每一行。
//設置初始值
getInitialState(){
//設置數據源
var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2}); //當且僅當cell中的任意兩行不相等時才重新渲染
//設置返回數據
return{
dataSource:ds.cloneWithRows(Wine)
}
},
render(){
return(
<ListView
dataSource={this.state.dataSource} //數據源
renderRow={this.renderRow} //返回具體的cell,有四個參數 => 1:一條信息 2:分組ID 3:行ID 4:標記是否高亮選中的狀態信息.不帶()表示參數自傳遞
/>
);
},
演示代碼如下：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 listView
* 2016-09-21
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ListView
} from 'react-native';
//導入json數據
var Wine = require('./WineJson.json'); //json數組
var Project = React.createClass({
//設置初始值
getInitialState(){
//設置數據源
var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2}); //當且僅當cell中的任意兩行不相等時才重新渲染
//設置返回數據
return{
dataSource:ds.cloneWithRows(Wine)
}
},
render(){
return(
<ListView
dataSource={this.state.dataSource} //數據源
renderRow={this.renderRow} //返回具體的cell,有四個參數 => 1:一條信息 2:分組ID 3:行ID 4:標記是否高亮選中的狀態信息.不帶()表示參數自傳遞
/>
);
},
//返回具體的cell
renderRow(rowData,sectionID,rowID,highlightRow){
return(
<View style={styles.cellViewStyle}>
{/*左邊的圖片*/}
<Image source={{uri:rowData.image}} style={styles.leftImageStyle} />
{/*右邊的View*/}
<View style={styles.rightViewStyle}>
<Text style={styles.nameTextStyle}>{rowData.name}</Text>
<Text style={styles.montyTextStyle}>${rowData.money}</Text>
</View>
</View>
);
}
});
const styles = StyleSheet.create({
cellViewStyle:{
flexDirection:'row',//主軸方向
borderBottomWidth:1,
borderBottomColor:'cyan'
},
leftImageStyle:{
width:60,
height:60
},
rightViewStyle:{
},
nameTextStyle:{
},
montyTextStyle:{
color:'red',
//距底部2
position:'absolute',
bottom:2
}
});
AppRegistry.registerComponent('Project', () => Project);
涉及到的json數據如下:
[
{
"image":"1.png",
"money":"319",
"name":"酒名1"
},
{
"image":"2.png",
"money":"339",
"name":"酒名2酒名2酒名2酒名22酒名2酒名酒名2"
},
{
"image":"3.png",
"money":"319",
"name":"酒名4"
},
{
"image":"4.png",
"money":"29",
"name":"酒名4"
},
{
"image":"5.png",
"money":"55",
"name":"酒名5"
},
{
"image":"6.png",
"money":"67",
"name":"酒名6"
},
{
"image":"7.png",
"money":"37",
"name":"酒名7"
},
{
"image":"8.png",
"money":"33",
"name":"酒名8"
},
{
"image":"9.png",
"money":"35",
"name":"酒名9"
},
{
"image":"10.png",
"money":"22",
"name":"酒名10"
},
{
"image":"11.png",
"money":"19",
"name":"酒名11"
},
{
"image":"12.png",
"money":"392",
"name":"酒名12"
},
{
"image":"13.png",
"money":"339",
"name":"酒名13"
},
{
"image":"14.png",
"money":"439",
"name":"酒名14"
},
{
"image":"15.png",
"money":"359",
"name":"酒名15"
},
{
"image":"16.png",
"money":"369",
"name":"酒名16"
},
{
"image":"17.png",
"money":"7397",
"name":"酒名17"
},
{
"image":"18.png",
"money":"7397",
"name":"酒名18"
},
{
"image":"19.png",
"money":"7397",
"name":"酒名19"
},
{
"image":"20.png",
"money":"7207",
"name":"酒名20"
},
{
"image":"21.png",
"money":"7397",
"name":"酒名21"
}
]
效果如下：
九宮格演示:
代碼:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 ListView1
* 2016-09-21
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ListView,
AlertIOS,
TouchableOpacity
} from 'react-native';
//導入json
var shareData= require('./shareJson.json');
//Dimentsions
var Dimensions = require('Dimensions');
var screenWidth = Dimensions.get('window').width;
//一些常量設置
var cols = 3; //一行幾個cell
var cellWH = 100; //cell的寬高
var vMargin = (screenWidth - cellWH * cols)/ (cols + 1); //cell之間的邊距
var hMargin = 20;
var Project = React.createClass({
//設置默認值(不可修改)
getDefaultProps(){
return{
}
},
//設置初始值(可以修改)
getInitialState(){
var ds = new ListView.DataSource({rowHasChanged:(r1,r2)=> r1 !== r2});
return{
dataSource : ds.cloneWithRows(shareData.data)
}
},
render(){
return(
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
contentContainerStyle={styles.listViewStyle}
/>
);
},
//單獨的cell
renderRow(rowData){
return(
<TouchableOpacity activeOpacity={0.5} onPress={()=>{this.cellOnclick()}}>
<View style={styles.innerViewStyle}>
<Image source={{uri:rowData.icon}} style={styles.iconStyle}/>
<Text>{rowData.title}</Text>
</View>
</TouchableOpacity>
);
},
cellOnclick(){
AlertIOS.alert("點擊了cell")
}
});
const styles = StyleSheet.create({
listViewStyle:{
//改變主軸方向
flexDirection:'row',
//多行顯示
flexWrap:'wrap'
},
innerViewStyle:{
width:cellWH,
height:cellWH,
marginLeft:vMargin,
marginTop:hMargin,
alignItems:'center'
},
iconStyle :{
width:80,
height:80
}
});
AppRegistry.registerComponent('Project', () => Project);
涉及到的json:
{
"data":[
{
"icon":"icon1",
"title":"分享1"
},
{
"icon":"icon2",
"title":"分享2"
},
{
"icon":"icon3",
"title":"分享3"
},
{
"icon":"icon4",
"title":"分享5"
},
{
"icon":"icon5",
"title":"分享5"
},
{
"icon":"icon6",
"title":"分享6"
},
{
"icon":"icon7",
"title":"分享7"
},
{
"icon":"icon8",
"title":"分享8"
},
{
"icon":"icon9",
"title":"分享9"
},
{
"icon":"icon10",
"title":"分享10"
}
]
}
效果如下:
帶有表頭的listView:
代碼:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 ListView
* 帶有分組的ListView 使用cloneWithRowsAndSections設置數據源,三個參數:sectionIDs,rowIDs,dataBlob
* 2016-09-22
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ListView,
TouchableOpacity
} from 'react-native';
//導入外部的json數據
var Car = require('./Car.json');
var Project = React.createClass({
//初始化函數 在這里准備數據源
getInitialState(){
var sectionData = (dataBlob,sectionID) => {
return dataBlob[sectionID];
};
var rowData = (dataBlob,sectionID,rowID) => {
return dataBlob[sectionID + ':' + rowID];
};
return{
dataSource:new ListView.DataSource({
getSectionData:sectionData,
getRowData:rowData,
rowHasChanged:(r1,r2) => r1 !== r2,
sectionHeaderHasChanged:(s1,s2) => s1 !== s2
})
}
},
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
renderSectionHeader={this.renderSectionHeader}
/>
);
},
//每一行數據
renderRow(rowData){
return(
<TouchableOpacity activeOpacity={0.5}>
<View style={styles.rowStyle}>
<Image source={{uri:rowData.icon}} style={styles.rowImageStyle}/>
<Text style={{marginLeft: 5}}>{rowData.name}</Text>
</View>
</TouchableOpacity>
);
},
//組數據
renderSectionHeader(sectionData,sectionID){
return(
<View style={styles.sectionHeaderStyle}>
<Text style={{color: 'red',marginLeft:5}}>{sectionData}</Text>
</View>
);
},
//做一些復雜的操作:數據請求
componentDidMount() {
this.loadDataFormJson();
},
loadDataFormJson(){
//先取到data數據
var jsonData = Car.data;
//定義一些變量數組用來存值
var dataBlob = {},sectionIDs = [],rowIDs = [],cars = [];
//遍歷
for(var i = 0;i<jsonData.length;i++){
//把組號放入sectionIDs數組中
sectionIDs.push(i);
//把組中內容放入dataBlob對象中
dataBlob[i] = jsonData[i].title;
//把組中的每行數據的數組放入cars
cars = jsonData[i].cars;
//先確定rowIDs的第一維
rowIDs[i] = [];
//遍歷cars數組,確定rowIDs的第二維
for(var j = 0;j<cars.length;j++){
rowIDs[i].push(j);
//把每一行中的內容放入dataBlob對象中
dataBlob[i+':'+j] = cars[j];
}
}
this.setState({
dataSource:this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)
});
}
});
const styles = StyleSheet.create({
rowImageStyle:{
width:70,
height:70
},
rowStyle:{
flexDirection:'row',
alignItems:'center',
padding:10,
borderBottomColor:'#e8e8e8',
borderBottomWidth:0.5
},
sectionHeaderStyle:{
backgroundColor:'#e8e8e8',
height:25,
justifyContent:'center'
}
});
AppRegistry.registerComponent('Project', () => Project);
涉及到的json:
{
"data": [
{
"cars": [
{
"icon": "m_180_100.png",
"name": "AC Schnitzer"
},
{
"icon": "m_92_100.png",
"name": "阿爾法·羅密歐"
},
{
"icon": "m_9_100.png",
"name": "奧迪"
},
{
"icon": "m_97_100.png",
"name": "阿斯頓·馬丁"
}
],
"title": "A"
},
{
"cars": [
{
"icon": "m_172_100.png",
"name": "巴博斯"
},
{
"icon": "m_157_100.png",
"name": "寶駿"
},
{
"icon": "m_3_100.png",
"name": "寶馬"
},
{
"icon": "m_82_100.png",
"name": "保時捷"
},
{
"icon": "m_163_100.png",
"name": "北京汽車"
},
{
"icon": "m_211_100.png",
"name": "北汽幻速"
},
{
"icon": "m_168_100.png",
"name": "北汽威旺"
},
{
"icon": "m_14_100.png",
"name": "北汽制造"
},
{
"icon": "m_2_100.png",
"name": "奔馳"
},
{
"icon": "m_59_100.png",
"name": "奔騰"
},
{
"icon": "m_26_100.png",
"name": "本田"
},
{
"icon": "m_5_100.png",
"name": "標致"
},
{
"icon": "m_127_100.png",
"name": "別克"
},
{
"icon": "m_85_100.png",
"name": "賓利"
},
{
"icon": "m_15_100.png",
"name": "比亞迪"
},
{
"icon": "m_135_100.png",
"name": "布加迪"
}
],
"title": "B"
},
{
"cars": [
{
"icon": "m_129_100.png",
"name": "昌河"
}
],
"title": "C"
},
{
"cars": [
{
"icon": "m_113_100.png",
"name": "道奇"
},
{
"icon": "m_165_100.png",
"name": "大通"
},
{
"icon": "m_8_100.png",
"name": "大眾"
},
{
"icon": "m_27_100.png",
"name": "東風"
},
{
"icon": "m_197_100.png",
"name": "東風風度"
},
{
"icon": "m_141_100.png",
"name": "東風風神"
},
{
"icon": "m_115_100.png",
"name": "東風風行"
},
{
"icon": "m_205_100.png",
"name": "東風小康"
},
{
"icon": "m_29_100.png",
"name": "東南"
},
{
"icon": "m_179_100.png",
"name": "DS"
}
],
"title": "D"
},
{
"cars": [
{
"icon": "m_91_100.png",
"name": "法拉利"
},
{
"icon": "m_199_100.png",
"name": "飛馳商務車"
},
{
"icon": "m_164_100.png",
"name": "菲斯克"
},
{
"icon": "m_40_100.png",
"name": "菲亞特"
},
{
"icon": "m_7_100.png",
"name": "豐田"
},
{
"icon": "m_67_100.png",
"name": "福迪"
},
{
"icon": "m_190_100.png",
"name": "弗那薩利"
},
{
"icon": "m_208_100.png",
"name": "福汽啟騰"
},
{
"icon": "m_17_100.png",
"name": "福特"
},
{
"icon": "m_128_100.png",
"name": "福田"
}
],
"title": "F"
},
{
"cars": [
{
"icon": "m_109_100.png",
"name": "GMC"
},
{
"icon": "m_110_100.png",
"name": "光岡"
},
{
"icon": "m_147_100.png",
"name": "廣汽"
},
{
"icon": "m_63_100.png",
"name": "廣汽吉奧"
},
{
"icon": "m_133_100.png",
"name": "廣汽日野"
},
{
"icon": "m_182_100.png",
"name": "觀致汽車"
}
],
"title": "G"
},
{
"cars": [
{
"icon": "m_31_100.png",
"name": "哈飛"
},
{
"icon": "m_196_100.png",
"name": "哈弗"
},
{
"icon": "m_170_100.png",
"name": "海格"
},
{
"icon": "m_32_100.png",
"name": "海馬"
},
{
"icon": "m_149_100.png",
"name": "海馬商用車"
},
{
"icon": "m_181_100.png",
"name": "恆天汽車"
},
{
"icon": "m_58_100.png",
"name": "紅旗"
},
{
"icon": "m_52_100.png",
"name": "黃海"
},
{
"icon": "m_112_100.png",
"name": "華泰"
},
{
"icon": "m_45_100.png",
"name": "匯眾"
}
],
"title": "H"
},
{
"cars": [
{
"icon": "m_35_100.png",
"name": "江淮"
},
{
"icon": "m_37_100.png",
"name": "江鈴"
},
{
"icon": "m_38_100.png",
"name": "江南"
},
{
"icon": "m_98_100.png",
"name": "捷豹"
},
{
"icon": "m_143_100.png",
"name": "吉利帝豪"
},
{
"icon": "m_144_100.png",
"name": "吉利全球鷹"
},
{
"icon": "m_148_100.png",
"name": "吉利英倫"
},
{
"icon": "m_39_100.png",
"name": "金杯"
},
{
"icon": "m_57_100.png",
"name": "金龍聯合"
},
{
"icon": "m_161_100.png",
"name": "金旅客車"
},
{
"icon": "m_152_100.png",
"name": "九龍"
},
{
"icon": "m_4_100.png",
"name": "Jeep"
}
],
"title": "J"
},
{
"cars": [
{
"icon": "m_188_100.png",
"name": "卡爾森"
},
{
"icon": "m_107_100.png",
"name": "凱迪拉克"
},
{
"icon": "m_150_100.png",
"name": "開瑞"
},
{
"icon": "m_51_100.png",
"name": "克萊斯勒"
},
{
"icon": "m_145_100.png",
"name": "科尼塞克"
},
{
"icon": "m_212_100.png",
"name": "KTM"
}
],
"title": "K"
},
{
"cars": [
{
"icon": "m_86_100.png",
"name": "蘭博基尼"
},
{
"icon": "m_200_100.png",
"name": "藍海房車"
},
{
"icon": "m_80_100.png",
"name": "勞斯萊斯"
},
{
"icon": "m_94_100.png",
"name": "雷克薩斯"
},
{
"icon": "m_99_100.png",
"name": "雷諾"
},
{
"icon": "m_146_100.png",
"name": "蓮花"
},
{
"icon": "m_153_100.png",
"name": "獵豹汽車"
},
{
"icon": "m_76_100.png",
"name": "力帆"
},
{
"icon": "m_16_100.png",
"name": "鈴木"
},
{
"icon": "m_166_100.png",
"name": "理念"
},
{
"icon": "m_95_100.png",
"name": "林肯"
},
{
"icon": "m_36_100.png",
"name": "陸風"
},
{
"icon": "m_96_100.png",
"name": "路虎"
},
{
"icon": "m_83_100.png",
"name": "路特斯"
}
],
"title": "L"
},
{
"cars": [
{
"icon": "m_183_100.png",
"name": "邁凱倫"
},
{
"icon": "m_93_100.png",
"name": "瑪莎拉蒂"
},
{
"icon": "m_18_100.png",
"name": "馬自達"
},
{
"icon": "m_79_100.png",
"name": "MG"
},
{
"icon": "m_81_100.png",
"name": "MINI"
},
{
"icon": "m_201_100.png",
"name": "摩根"
}
],
"title": "M"
},
{
"cars": [
{
"icon": "m_155_100.png",
"name": "納智捷"
}
],
"title": "N"
},
{
"cars": [
{
"icon": "m_104_100.png",
"name": "歐寶"
},
{
"icon": "m_84_100.png",
"name": "謳歌"
},
{
"icon": "m_171_100.png",
"name": "歐朗"
}
],
"title": "O"
},
{
"cars": [
{
"icon": "m_156_100.png",
"name": "啟辰"
},
{
"icon": "m_43_100.png",
"name": "慶鈴"
},
{
"icon": "m_42_100.png",
"name": "奇瑞"
},
{
"icon": "m_28_100.png",
"name": "起亞"
}
],
"title": "Q"
},
{
"cars": [
{
"icon": "m_30_100.png",
"name": "日產"
},
{
"icon": "m_78_100.png",
"name": "榮威"
},
{
"icon": "m_142_100.png",
"name": "瑞麒"
}
],
"title": "R"
},
{
"cars": [
{
"icon": "m_25_100.png",
"name": "三菱"
},
{
"icon": "m_209_100.png",
"name": "山姆"
},
{
"icon": "m_195_100.png",
"name": "紳寶"
},
{
"icon": "m_50_100.png",
"name": "雙環"
},
{
"icon": "m_102_100.png",
"name": "雙龍"
},
{
"icon": "m_111_100.png",
"name": "斯巴魯"
},
{
"icon": "m_10_100.png",
"name": "斯柯達"
},
{
"icon": "m_89_100.png",
"name": "smart"
}
],
"title": "S"
},
{
"cars": [
{
"icon": "m_202_100.png",
"name": "泰卡特"
},
{
"icon": "m_189_100.png",
"name": "特斯拉"
}
],
"title": "T"
},
{
"cars": [
{
"icon": "m_140_100.png",
"name": "威麟"
},
{
"icon": "m_186_100.png",
"name": "威茲曼"
},
{
"icon": "m_19_100.png",
"name": "沃爾沃"
},
{
"icon": "m_48_100.png",
"name": "五菱"
}
],
"title": "W"
},
{
"cars": [
{
"icon": "m_13_100.png",
"name": "現代"
},
{
"icon": "m_174_100.png",
"name": "星客特"
},
{
"icon": "m_71_100.png",
"name": "新凱"
},
{
"icon": "m_87_100.png",
"name": "西雅特"
},
{
"icon": "m_49_100.png",
"name": "雪佛蘭"
},
{
"icon": "m_6_100.png",
"name": "雪鐵龍"
}
],
"title": "X"
},
{
"cars": [
{
"icon": "m_194_100.png",
"name": "揚州亞星客車"
},
{
"icon": "m_138_100.png",
"name": "野馬汽車"
},
{
"icon": "m_100_100.png",
"name": "英菲尼迪"
},
{
"icon": "m_53_100.png",
"name": "一汽"
},
{
"icon": "m_41_100.png",
"name": "依維柯"
},
{
"icon": "m_75_100.png",
"name": "永源"
}
],
"title": "Y"
},
{
"cars": [
{
"icon": "m_136_100.png",
"name": "長安轎車"
},
{
"icon": "m_159_100.png",
"name": "長安商用"
},
{
"icon": "m_21_100.png",
"name": "長城"
},
{
"icon": "m_203_100.png",
"name": "之諾"
},
{
"icon": "m_60_100.png",
"name": "中華"
},
{
"icon": "m_167_100.png",
"name": "中歐"
},
{
"icon": "m_77_100.png",
"name": "眾泰"
},
{
"icon": "m_204_100.png",
"name": "中通客車"
},
{
"icon": "m_33_100.png",
"name": "中興"
}
],
"title": "Z"
}
]
}
效果如下:
