这个是效果:
第一步:准备数据源: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:定义底部组件
扫描二维码关注公众号,回复:
3598585 查看本文章
ListEmptyComponent:data为空时显示的组件
columnWrapperStyle:定义每个组件栏的包裹样式,不支持单行组件
numColumns:number,定义每行显示的元素个数
refreshControl:定义头部刷新组件,例如:
refreshControl={ //下拉刷新组件
<RefreshControl
refreshing={this.state.refreshing} //通过bool值refreshing控制是否刷新
onRefresh={this._onRefresh.bind(this)} //刷新时需要执行的函数
/>
}
onEndReached:在列表滚动到底部一定距离时调用这个函数,一般在此定义滚动到底部时加载新的数据。
onEndReachedThreshold:决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如,0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。