SectionList的使用

这个是效果：

第一步：准备数据源：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表示距离内容最底部的距离为当前列表可见长度的一半时触发。