ReactNative SectionList组件

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 (
            <View style={{ flex: 1, backgroundColor: 'green' }}>
                <SectionList style={styles.content}
                    sections = {this.state.dataSource}//类似于FlatList的data决定有多少个区
                    renderSectionHeader={({ section: { title } }) => (
                        <Text style={{ fontWeight: "bold",left: 20,lineHeight:40, }}>{title}</Text>
                    )}//区头的样式
                    renderSectionFooter = {({ section: { title } }) => (
                        <Text style={{ fontWeight: "bold",left: 20,lineHeight:40, }}>{title}</Text>
                    )}//区脚的样式
                    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 表示距离内容最底部的距离为当前列表可见长度的一半时触发。
                />
            </View>
        )
    }
    refresh(){
        this.setState({
            refreshing: true,
        });
        setTimeout(()=>{
            this.setState({
                refreshing: false,
            })
        },2000);

    }
    _onLoadMore(){
        console.log('加载更多。。。');
    }
    renderItem(item, index, section) {
        var url = item.icon;
        return (
            <View style={styles.cellView}>
                <Image style={styles.image} source={{uri:url}} />
                <Text style={styles.text}>{item.name}</Text>
            </View>
        )
    }
    separator() {
        return (
            <View style={{ width: width, height: 5, backgroundColor: 'orange' }}>
            </View>
        )
    }
    createEmpty() {
        return (
            <View style={{ height: 100, alignItems: 'center', justifyContent: 'center' }}>
                <Text style={{ fontSize: 16 }}>
                    暂无列表数据，下啦刷新
                </Text>
            </View>
        )
    }
    listHeaderComponent() {
        return (
            <View style={{ height: 50, alignItems: 'center', justifyContent: 'center' }}>
                <Text style={{ color: 'white' }}>
                    头部布局
                </Text>
            </View>
        )
    }
    listFooterComponent() {
        return (
            <View style={{ height: 50, alignItems: 'center' }}>
                <Text style={{ color: 'white',lineHeight:50 }}>
                    底部布局
                </Text>
            </View>
        )
    }
}


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;

完成效果