最近在摸索react-native，雖然蘋果爸爸已經(jīng)在之前封殺了JSPatch捣炬，我還是抱著試一試的態(tài)度先學(xué)一個(gè)療程熊昌，畢竟，知識(shí)嘛湿酸，多學(xué)點(diǎn)總是好的婿屹。
其實(shí)對(duì)于js我了解的不多，所以一些東西給不了相應(yīng)的解釋推溃，還請(qǐng)見諒（ps：我的學(xué)習(xí)階段都是從模仿開始的）昂利。后面我會(huì)不斷的學(xué)習(xí)基礎(chǔ)知識(shí)，把相應(yīng)的解釋會(huì)添加上去的铁坎。見笑了蜂奸！
接下來先學(xué)習(xí)一下如何創(chuàng)建一個(gè)ListView。
1.先設(shè)置一下樣式
上代碼：
//設(shè)置樣式
const styles = StyleSheet.create({
//整個(gè)listView的樣式設(shè)置
outerViewStyle: {
//占滿窗口
flex: 1
},
//一個(gè)自定義view的樣式設(shè)置
headerViewStyle: {
height: 64,
backgroundColor: 'orange',
justifyContent: 'center',
alignItems: 'center'
},
//列表row的樣式設(shè)置
rowStyle: {
//設(shè)置主軸的方向
flexDirection: 'row',
//側(cè)軸方向居中
alignItems: 'center',
padding: 10,
//單元格底部的線設(shè)置
borderBottomColor: '#e8e8e8',
borderBottomWidth: 0.5
},
//分區(qū)頭部view的樣式設(shè)置
sectionHeaderViewStyle: {
backgroundColor: '#e8e8e8',
justifyContent: 'center',
height: 25
}
});
以上就是本listView能用到的一些設(shè)置硬萍。
2.獲取數(shù)據(jù)
用到的數(shù)據(jù)是本地的json數(shù)據(jù)
//調(diào)取數(shù)據(jù)
componentDidMount(){
this.loadDataFromJson();
},
var Car = require('./Car.json');
loadDataFromJson(){
//獲取json數(shù)據(jù)
var jsonData = Car.data;
//定義一些變量
var dataBlob = {},
sectionIDs = [],
rowIDs = [],
cars = [];
for (var i = 0; i < jsonData.length; i++) {
//1.把區(qū)號(hào)放入sectionIDs數(shù)組中
sectionIDs.push(i);
//2.把區(qū)中的內(nèi)容放入dataBlob對(duì)象中
dataBlob[i] = jsonData[i].title;
//3.取出該組中所有的車
cars = jsonData[i].cars;
rowIDs[i] = [];
//遍歷所有的車數(shù)組
for (var j = 0; j < cars.length; j++) {
//1.把行號(hào)放入rowIDs[i]中
rowIDs[i].push(j);
//2.把每一行的內(nèi)容放入dataBlob對(duì)象中
dataBlob[i + ':' + j] = cars[j];
}
}
//更新狀態(tài)
this.setState({
dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)
});
},
3.初始化函數(shù)
//初始化函數(shù)
getInitialState(){
//配置區(qū)數(shù)據(jù)
var getSectionData = (dataBlob,sectionID) => {
return dataBlob[sectionID];
};
//配置行數(shù)據(jù)
var getRowData = (dataBlob,sectionID,rowID) => {
return dataBlob[sectionID + ':' +rowID];
};
return {
dataSource : new ListView.DataSource({
getSectionData: getSectionData,//獲取區(qū)中的數(shù)據(jù)
getRowData: getRowData,//獲取行中的數(shù)據(jù)
rowHasChanged: (r1,r2) => r1 !== r2,
sectionHeaderHasChanged: (s1,s2) => s1 !== s2
})
}
},
render() {
return (<ListView />);
},
4.配置數(shù)據(jù)
// 每一行的數(shù)據(jù)
renderRow(rowData){
return(
<TouchableOpacity activeOpacity={0.5}>
<View style={styles.rowStyle}>
<Text style={{marginLeft:5}}>{rowData.name}</Text>
</View>
</TouchableOpacity>
);
},
renderSectionHeader(sectionData,sectionID) {
return(
<View style={styles.sectionHeaderViewStyle}>
<Text style={{marginLeft:5,color:'red'}}>{sectionData}</Text>
</View>
);
}
5.界面顯示
render(){
return (
<View style = {styles.outerViewStyle}>
<View style={styles.headerViewStyle}>
<Text style={{color:'white',fontSize:25}}>車的品牌</Text>
</View>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
renderSectionHeader={this.renderSectionHeader}
/>
</View>
);
},
上一個(gè)效果圖：
這里寫圖片描述
由于本人也是剛剛窺探rn扩所，所以很多地方都是不求甚解，所以很多地方?jīng)]有給出相應(yīng)的解釋朴乖，還請(qǐng)見諒祖屏！這里給出源碼，大家可以共同學(xué)習(xí)买羞！
