React Native 使用SectionList实现分组列表

接上一篇博客导航器框架实现基础上实现分组列表；
简述：ReactNative在0.43.0版本中开始推出SectionList,RN高性能的分组(section)列表组件,支持下面的这些常用功能：

完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。

如果你的列表不需要分组(section)，那么可以使用结构更简单的<FlatList>。
在0.43版本中，如果希望section的头部能够吸顶悬浮，请暂时先使用老版的<ListView>。下一个版本开始可以支持悬浮的section头部。
想要了解更多的SectionList可以参考RN官网，点击此处！
目录
1、SectionList简述
2、SectionList常用属性和方法
3、SectionList示例，通讯录实现以及源码
正文
1、SectionList常用属性和方法
属性集合

方法集合

2、SectionList示例，二级列表展开、收缩功能实现及源码
源码，可直接复制修改使用:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    Button,
    SectionList
} from 'react-native';
// 初始化总数据
var AllArr=[
    {name:'食品生鲜',citys:[{name:'螃蟹'},{name:'龙虾'},{name:'车厘子'},{name:'百香果'},{name:'草莓'}]},
    {name:'家用电器',citys:[{name:'超薄电视'},{name:'空调'},{name:'机器人'},{name:'洗衣机'},{name:'取暖器'}]},
    {name:'手机数码',citys:[{name:'手机'},{name:'单反相机'},{name:'音响'},{name:'智能手环'},{name:'平板'}]},
    {name:'吉林省',citys:[{name:'长春市'},{name:'吉林市'},{name:'四平市'},{name:'辽源市'},{name:'通化市'}]},
    {name:'美妆个护',citys:[{name:'面膜'},{name:'防晒'},{name:'口红'}]},
    {name:'奢侈品',citys:[{name:'LV箱包'},{name:'饰品'},{name:'钻石'},{name:'瑞士手表'}]},
    {name:'全球购',citys:[{name:'全世界'},{name:'都'},{name:'是'},{name:'中国'},{name:'的'}]},
];

export default class CityJiNan extends Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        headerTitle: `${navigation.state.params.login_title}`,
    });


    constructor(props) {
        super(props);
        this.state = {
            //改变数据的数组
            Arr:[
                {name:'食品生鲜',citys:[{name:'螃蟹'},{name:'龙虾'},{name:'车厘子'},{name:'百香果'},{name:'草莓'}]},
                {name:'家用电器',citys:[{name:'超薄电视'},{name:'空调'},{name:'机器人'},{name:'洗衣机'},{name:'取暖器'}]},
                {name:'手机数码',citys:[{name:'手机'},{name:'单反相机'},{name:'音响'},{name:'智能手环'},{name:'平板'}]},
                {name:'吉林省',citys:[{name:'长春市'},{name:'吉林市'},{name:'四平市'},{name:'辽源市'},{name:'通化市'}]},
                {name:'美妆个护',citys:[{name:'面膜'},{name:'防晒'},{name:'口红'}]},
                {name:'奢侈品',citys:[{name:'LV箱包'},{name:'饰品'},{name:'钻石'},{name:'瑞士手表'}]},
                {name:'全球购',citys:[{name:'全世界'},{name:'都'},{name:'是'},{name:'中国'},{name:'的'}]},
            ]
        };
        //for循环添加字段删除字段添加标示和key
        for (var i = 0; i < this.state.Arr.length; i++) {
            this.state.Arr[i]['data'] = [];
            this.state.Arr[i]['key'] = i;
            this.state.Arr[i]['isShow'] = 'off';
            delete this.state.Arr[i]['citys'];

        }
    }

    //分组创建的cell
    Cell(data){
        return(
            <View style={{height:40,backgroundColor:'green',justifyContent: 'center',}}>
                <View style={{height:39,backgroundColor:'pink',justifyContent: 'center',}}>
                    <Text>{data.item.name}</Text>
                </View>
            </View>
        );
    }
    // 展开改变数据源，增加数据，合上删除数组里的数据，根据isShow状态判断
    show(data){
        if (data.isShow==='off') {
            this.state.Arr[data.key]['data'] = AllArr[data.key].citys;
            this.state.Arr[data.key]['isShow'] = 'on';
            this.setState({
                Arr:this.state.Arr,
            });
        }else{
            this.state.Arr[data.key]['data'] = [];
            this.state.Arr[data.key]['isShow'] = 'off';
            this.setState({
                Arr:this.state.Arr,
            });
        }

    }
    //列表分组的header
    Header({section}){
        return(
            <TouchableOpacity style={{height:50,
                backgroundColor:'wheat',
                justifyContent: 'center',}}
                              onPress={()=>{this.show(section)}}>
                <View>
                    <Text style={{fontSize:20}}>{section.name}</Text>
                </View>
            </TouchableOpacity>
        );
    }
    //去除警告
    extraUniqueKey(item,index){
        return index+item;
    }
    render() {
        console.log('========'+JSON.stringify(this.state.Arr));
        return (
            <View style={styles.container}>
                <SectionList
                    sections={this.state.Arr}//数据源
                    renderItem={this.Cell.bind(this)}//cell绑定时间创建cell
                    keyExtractor = {this.extraUniqueKey}//去除警告
                    renderSectionHeader={this.Header.bind(this)}//Header绑定时间创建表头
                    scrollEnabled={true}//默认是true，false禁止滚动

                >
                </SectionList>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

SectionList的使用就暂且到这里了！