React Native中的分区ListView

什么是分区ListView？做iOS开发的都知道tableView是有分区表一说的，其实在这里是一样的，ReactNative中也是有分区的ListView的，跟之前的ListView其实差不多，只是要注意dataBlob也就是数据的组合，要按照一定的结构去组合，还有就是区头的设置，来看一下代码的实现

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    TouchableOpacity,
    AlertIOS
} from 'react-native';

//导入json数据
var car = require('./Car.json');

var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');

var listTable = React.createClass({//类名一定要大写开头
    //初始化函数
    getInitialState(){
        var getSectionData = (dataBlob, sectionID) => {
            return dataBlob[sectionID];
        };

        var getRowData = (dataBlob, sectionID, rowID) => {
            return dataBlob[sectionID + ':' + rowID];
        };

        return{
            dataSource: new ListView.DataSource({
                getSectionData:getSectionData, //获取组中的数据
                getRowData:getRowData, //获取行中的数据
                rowHasChanged: (r1, r2) => r1 !== r2,
                sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
            })
        }
    },

    //做一些复杂的操作:数据请求 或者 异步操作(定时器)
    componentDidMount(){
        //调用json数据
        this.loadDataFromJson();
    },

    loadDataFromJson(){
        //拿到json数据
        var jsonData = car.data;

        //定义一些变量
        var dataBlob = {},
            sectionIDs = [],
            rowIDs = [],
            cars = [];

        //遍历
        for (var i = 0; i < jsonData.length; i++) {
            //1.把组号放入sectionIDs数组中
            sectionIDs.push(i);

            //2.把组中内容放入dataBlob对象中
            dataBlob[i] = jsonData[i].title;

            //3.取出该组中所有的车
            cars = jsonData[i].cars;
            rowIDs[i] = [];

            //4.遍历所有的车数组
            for (var j = 0; j < cars.length; j++) {
                //把行号放入rowIDs中
                rowIDs[i].push(j);
                //把每一行中的内容放入dataBlob中
                dataBlob[i + ':' + j] = cars[j];
            }
        }
        //更新状态
        this.setState({
            dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)
        });
    },
    

    render(){
        return(
            
                {/*头部*/}
                
                    SeeMyGo品牌
                
                {/*ListView*/}
                
            
        );
    },
    
    //每一行的数据
    renderRow(rowData){
        return(
            {AlertIOS.alert(rowData.name)}}>
                
                    
                    { rowData.name }
                
            
        );
    },

    // 每一组中的数据
    renderSectionHeader(sectionData, sectionID){
        return(
            
                {sectionData}
            
        );
    }
});


const styles = StyleSheet.create({
    outerViewStyle:{
        //占满屏幕
        flex:1,
    },
    headerViewStyle:{
        height:64,
        backgroundColor:'orange',

        justifyContent:'center',
        alignItems:'center'
    },
    rowStyle:{
        //设置主轴方向
        flexDirection:'row',
        alignItems:'center',
        padding:10,
        borderBottomColor:'#e8e8e8',
        borderBottomWidth:0.5
    },
    rowImageStyle:{
        width:70,
        height:70,
    },
    sectionHeaderViewStyle:{
        backgroundColor:'#e8e8e8',
        height:25,

        justifyContent:'center',
    }
});

//输出类
module.exports = listTable;

只需要看好数据的组成结构就行，还有就是写代码的时候要专心，我这里面写的时候就是分心写错了几个字母就报错了
来看一下运行结果