{"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"}........
}

import React, {Component} from 'react';
import {AppRegistry,StyleSheet,Text,View,SectionList,Dimensions,Image
} from 'react-native';const dimension = Dimensions.get('window')
var Car = require('./Car.json');var itemWidth = 100;
var cols = 3;
var cMargin = (dimension.width - (itemWidth * cols)) / 4.0;
var rMargin = 12;export default class SectionListView1 extends Component {componentDidMount() {}_renderSectionHeader(info) {return (<View><Text key={info.section.key} style={styles.sectionStyle}>{info.section.title}</Text></View>)}_renderItem(info) {return (<View style={styles.cellStyle}><Image source={{uri: info.item.icon}} style={styles.imageStyle}/><Text>{info.item.name}</Text></View>)}_separatorCom() {return (<View style={{height: 4, width: 500, backgroundColor: 'orange'}}></View>)}render() {var dataSource = [];for (var i = 0; i < Car.data.length; i++) {let datas = [];for (var j = 0; j < Car.data[i].cars.length; j++) {datas.push(Car.data[i].cars[j]);}dataSource.push({key: i, data: datas, title: Car.data[i].title});}return (<View style={styles.container}><SectionListrenderSectionHeader={this._renderSectionHeader}renderItem={this._renderItem}sections={dataSource}// refreshing={false}// onRefresh={()=>{alert("刷新")}}// ItemSeparatorComponent={this._separatorCom}// SectionSeparatorComponent={() => <View style={{height: 20, backgroundColor: 'blue'}}></View>}keyExtractor={(item, index) => ("index" + index + item)}// onEndReached={(info)=>{alert("到达底部")}}// onEndReachedThreshold={0}// stickySectionHeadersEnabled={true}ListHeaderComponent={() => <Viewstyle={{backgroundColor: 'yellow', alignItems: 'center',justifyContent: 'center',width:dimension.width,height:50}}><Text>这个是我的表头</Text></View>}ListFooterComponent={() => <Viewstyle={{backgroundColor: 'red', alignItems: 'center',width:dimension.width}}><Text>这个是我的表尾</Text></View>}contentContainerStyle={styles.sectionListStyle}//设置cell的样式pageSize={4}/></View>);}
}const styles = StyleSheet.create({sectionListStyle: {flexDirection: 'row',flexWrap: 'wrap',alignItems: 'flex-start',backgroundColor: '#dd6ddd',},sectionStyle: {width: dimension.width,padding: 12,backgroundColor: '#21c6cd',color: '#fff'},cellStyle: {alignItems: 'center',borderRadius: 5,borderWidth: 1,borderColor: '#ff496b',marginLeft: cMargin,marginTop:rMargin,marginBottom:rMargin,padding: 6,width:itemWidth},imageStyle: {width: 70,height: 70}})
;module.exports = SectionListView1;

contentContainerStyle={styles.sectionListStyle}//设置cell的样式pageSize={4}