这个是效果：
第一步：准备数据源：Car.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"
}........
}
第二步：
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}>
<SectionList
renderSectionHeader={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={() => <View
style={{backgroundColor: 'yellow', alignItems: 'center',justifyContent: 'center',width:dimension.width,height:50}}><Text>这个是我的表头</Text></View>}
ListFooterComponent={() => <View
style={{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;
如果大家把上面描述的的SectionList的下面两句代码删除，则会出现单行情况，如果有兴趣，自行调试
contentContainerStyle={styles.sectionListStyle}//设置cell的样式
pageSize={4}
renderItem：定义每个元素组件的渲染方式，默认传入参数rowData，要访问其中的"title"可以通过rowData.item.title访问到。
ItemSeparatorComponent：定义每个元素之间分割组件
ListHeaderComponent：定义头部组件
ListFooterComponent：定义底部组件
ListEmptyComponent：data为空时显示的组件
columnWrapperStyle：定义每个组件栏的包裹样式，不支持单行组件
numColumns：number，定义每行显示的元素个数
refreshControl：定义头部刷新组件，例如：
refreshControl={ //下拉刷新组件
<RefreshControl
refreshing={this.state.refreshing} //通过bool值refreshing控制是否刷新
onRefresh={this._onRefresh.bind(this)} //刷新时需要执行的函数
/>
}
onEndReached：在列表滚动到底部一定距离时调用这个函数，一般在此定义滚动到底部时加载新的数据。
onEndReachedThreshold：决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。