SectionList组件与FlatLiat组件使用基本一致。
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Image,
Dimensions,
SectionList,
} from 'react-native';
const Dimenis = require('Dimensions');
const { width, height, scale } = Dimensions.get('window');
//引入数据
var Car = require('./Car.json');
class main extends Component {
constructor(props) {
super(props);
//必须是title 和 data
let dataSource = Car.data.map((item,index)=>{
let tmpData = {};
tmpData.title = item.title;
tmpData.data = item.cars;
return tmpData;
});
this.state = {
dataSource: dataSource,
refreshing: false,
}
}
render() {
return (
(
{title}
)}//区头的样式
renderSectionFooter = {({ section: { title } }) => (
{title}
)}//区脚的样式
renderItem={({ item, index, section }) => this.renderItem(item, index, section)}//cell的样式
ItemSeparatorComponent={this.separator}//分割线样式
keyExtractor={(item, index) => item + index}//唯一标识符,不实现会有警告
ListEmptyComponent={this.createEmpty}//无数据展示的视图
ListFooterComponent={this.listFooterComponent}//底部组件
ListHeaderComponent={this.listHeaderComponent}//头部组件
inverted={false}//从上到下(默认),还是从下到上
refreshing={this.state.refreshing} // 是否刷新 ,自带刷新控件
onRefresh={() => {
this.refresh();
}}
// 刷新方法,写了此方法,下拉才会出现 刷新控件,使用此方法必须写 refreshing
onEndReached={() => this._onLoadMore()}
onEndReachedThreshold={0.1}
//决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如,0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发。
/>
)
}
refresh(){
this.setState({
refreshing: true,
});
setTimeout(()=>{
this.setState({
refreshing: false,
})
},2000);
}
_onLoadMore(){
console.log('加载更多。。。');
}
renderItem(item, index, section) {
var url = item.icon;
return (
{item.name}
)
}
separator() {
return (
)
}
createEmpty() {
return (
暂无列表数据,下啦刷新
)
}
listHeaderComponent() {
return (
头部布局
)
}
listFooterComponent() {
return (
底部布局
)
}
}
const styles = StyleSheet.create({
content: {
marginTop: 40,
marginBottom: 40,
width: width,
backgroundColor: 'red',
},
cellView: {
position: 'relative',
width: width,
height: 70,
backgroundColor: 'yellow',
},
image: {
position: 'absolute',
top: 5,
left: 5,
height: 60,
width: 60,
},
text: {
position: 'absolute',
left: 70,
top: 0,
lineHeight: 70,
}
});
module.exports = main;