React-Native 之ListView
阿新 • • 發佈:2019-02-05
最近在摸索react-native
,雖然蘋果爸爸已經在之前封殺了JSPatch
,我還是抱著試一試的態度先學一個療程,畢竟,知識嘛,多學點總是好的。
其實對於js我瞭解的不多,所以一些東西給不了相應的解釋,還請見諒(ps:我的學習階段都是從模仿開始的)。後面我會不斷的學習基礎知識,把相應的解釋會新增上去的。見笑了!
接下來先學習一下如何建立一個ListView
。
1.先設定一下樣式
上程式碼:
//設定樣式
const styles = StyleSheet.create({
//整個listView的樣式設定
outerViewStyle: {
//佔滿視窗
flex: 1
},
//一個自定義view的樣式設定
headerViewStyle: {
height: 64,
backgroundColor: 'orange',
justifyContent: 'center',
alignItems: 'center'
},
//列表row的樣式設定
rowStyle: {
//設定主軸的方向
flexDirection: 'row',
//側軸方向居中
alignItems: 'center',
padding: 10,
//單元格底部的線設定
borderBottomColor: '#e8e8e8' ,
borderBottomWidth: 0.5
},
//分割槽頭部view的樣式設定
sectionHeaderViewStyle: {
backgroundColor: '#e8e8e8',
justifyContent: 'center',
height: 25
}
});
以上就是本listView能用到的一些設定。
2.獲取資料
用到的資料是本地的json資料
//調取資料
componentDidMount(){
this.loadDataFromJson();
},
var Car = require('./Car.json' );
loadDataFromJson(){
//獲取json資料
var jsonData = Car.data;
//定義一些變數
var dataBlob = {},
sectionIDs = [],
rowIDs = [],
cars = [];
for (var i = 0; i < jsonData.length; i++) {
//1.把區號放入sectionIDs陣列中
sectionIDs.push(i);
//2.把區中的內容放入dataBlob物件中
dataBlob[i] = jsonData[i].title;
//3.取出該組中所有的車
cars = jsonData[i].cars;
rowIDs[i] = [];
//遍歷所有的車陣列
for (var j = 0; j < cars.length; j++) {
//1.把行號放入rowIDs[i]中
rowIDs[i].push(j);
//2.把每一行的內容放入dataBlob物件中
dataBlob[i + ':' + j] = cars[j];
}
}
//更新狀態
this.setState({
dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)
});
},
3.初始化函式
//初始化函式
getInitialState(){
//配置區資料
var getSectionData = (dataBlob,sectionID) => {
return dataBlob[sectionID];
};
//配置行資料
var getRowData = (dataBlob,sectionID,rowID) => {
return dataBlob[sectionID + ':' +rowID];
};
return {
dataSource : new ListView.DataSource({
getSectionData: getSectionData,//獲取區中的資料
getRowData: getRowData,//獲取行中的資料
rowHasChanged: (r1,r2) => r1 !== r2,
sectionHeaderHasChanged: (s1,s2) => s1 !== s2
})
}
},
render() {
return (<ListView />);
},
4.配置資料
// 每一行的資料
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>
);
},
上一個效果圖:
由於本人也是剛剛窺探rn,所以很多地方都是不求甚解,所以很多地方沒有給出相應的解釋,還請見諒!這裡給出原始碼,大家可以共同學習!
開發交流群: 860196537