ReactNative分组表格

使用ListView来实现分组表格，总体不难，值得注意的是相关的数据结构。数据结构类似如下：

var db = {
            'sectionID-1':{section1 data},
            'sectionID-1':rowID1':{row1 data}
            'sectionID-1':rowID2':{row2 data}
            'sectionID-2':{section1 data},
            'sectionID-2':rowID1':{row1 data}
            'sectionID-2':rowID2':{row2 data}
        }

        var sectionIDs  = ['sectionID-1','sectionID-2'];
       //注意rowIDs是一个二维的数组，与sectionIDs不同
        var rowIDs      = [['rowID1','rowID2'],['rowID1','rowID2']]

代码如下：

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

let carData = require('./Car.json').data;

let ListViewDemoC = React.createClass({
    getInitialState(){
        let getRowData = (dataBlob,sectionID,rowID) => {
            return dataBlob[sectionID + ":" + rowID];
        };
        let getSectionHeaderData = (dataBlob,sectionID) => {
            return dataBlob[sectionID];
        };
        return {
            dataSource: new ListView.DataSource({
                getRowData:getRowData,
                getSectionHeaderData:getSectionHeaderData,
                rowHasChanged:(r1,r2) => r1 !== r2,
                sectionHeaderHasChanged:(s1,s2) => s1 !== s2
            })
        }
    },
    render() {
        return (
            <ListView dataSource={this.state.dataSource}
                      renderRow={this.renderRow}
                      renderSectionHeader={this.renderSectionHeader}
                      style={styles.listStyle}
            />
        );
    },

    renderRow(rowData){
        return (
            <View style={styles.cellStyle}>
                <Image source={{url:rowData.icon}} style={styles.iconStyle} />
                <Text style={styles.nameStyle}>{rowData.name}</Text>
            </View>
        );
    },
    renderSectionHeader(sectionData,sectionID){
        return (
            <View style={styles.headerStyle}>
                <Text style={styles.headerTitleStyle}>{sectionData.title}</Text>
            </View>
        );
    },
    componentDidMount() {
        //数据处理，
        var dataBlob = [],sectionIDs = [],rowIDs = [];
        for (var  i = 0; i < carData.length; i++) {
            //1.把组号放入sectionIDs
            sectionIDs.push(i);
            //2.将组的内容放置到dataBlob中
            let item = carData[i];
            dataBlob[i] = item ;
            //3.取出组中所有的车
            let cars = item.cars;
            rowIDs[i] = [];//rowIDs是一个二维数组
            //4.遍历所有的车数组 
            for (var j = 0; j < cars.length; j++) {
                rowIDs[i].push(j);
                dataBlob[i + ":" + j] = cars[j];
            }
        }
        console.log(dataBlob);
        //更新ds
        this.setState({
            dataSource:this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)
        });
    }
});

const styles = StyleSheet.create({
    cellStyle: {
        flexDirection:'row',
        height:90,
        borderBottomColor:'#e0e8EF',
        borderBottomWidth:1,
        alignItems:'center'
    },
    iconStyle: {
        width:70,
        height:70,
        marginLeft:15,
        marginRight:8
    },
    nameStyle: {

    },
    listStyle: {
        marginTop: 20
    },
    headerStyle: {
        height:45,
        backgroundColor:"#efefef",
        justifyContent:'center'
    },
    headerTitleStyle: {
        marginLeft: 15
    }
});

AppRegistry.registerComponent('ListViewDemoC', () => ListViewDemoC);

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"
    },
    {
      "cars": [
        {
          "icon": "m_172_100.png",
          "name": "巴博斯"
        },
        {
          "icon": "m_157_100.png",
          "name": "宝骏"
        },
        {
          "icon": "m_3_100.png",
          "name": "宝马"
        },
        {
          "icon": "m_82_100.png",
          "name": "保时捷"
        },
        {
          "icon": "m_163_100.png",
          "name": "北京汽车"
        },
        {
          "icon": "m_211_100.png",
          "name": "北汽幻速"
        },
        {
          "icon": "m_168_100.png",
          "name": "北汽威旺"
        },
        {
          "icon": "m_14_100.png",
          "name": "北汽制造"
        },
        {
          "icon": "m_2_100.png",
          "name": "奔驰"
        },
        {
          "icon": "m_59_100.png",
          "name": "奔腾"
        },
        {
          "icon": "m_26_100.png",
          "name": "本田"
        },
        {
          "icon": "m_5_100.png",
          "name": "标致"
        },
        {
          "icon": "m_127_100.png",
          "name": "别克"
        },
        {
          "icon": "m_85_100.png",
          "name": "宾利"
        },
        {
          "icon": "m_15_100.png",
          "name": "比亚迪"
        },
        {
          "icon": "m_135_100.png",
          "name": "布加迪"
        }
      ],
      "title": "B"
    },
    {
      "cars": [
        {
          "icon": "m_129_100.png",
          "name": "昌河"
        }
      ],
      "title": "C"
    },
    {
      "cars": [
        {
          "icon": "m_113_100.png",
          "name": "道奇"
        },
        {
          "icon": "m_165_100.png",
          "name": "大通"
        },
        {
          "icon": "m_8_100.png",
          "name": "大众"
        },
        {
          "icon": "m_27_100.png",
          "name": "东风"
        },
        {
          "icon": "m_197_100.png",
          "name": "东风风度"
        },
        {
          "icon": "m_141_100.png",
          "name": "东风风神"
        },
        {
          "icon": "m_115_100.png",
          "name": "东风风行"
        },
        {
          "icon": "m_205_100.png",
          "name": "东风小康"
        },
        {
          "icon": "m_29_100.png",
          "name": "东南"
        },
        {
          "icon": "m_179_100.png",
          "name": "DS"
        }
      ],
      "title": "D"
    },
    {
      "cars": [
        {
          "icon": "m_91_100.png",
          "name": "法拉利"
        },
        {
          "icon": "m_199_100.png",
          "name": "飞驰商务车"
        },
        {
          "icon": "m_164_100.png",
          "name": "菲斯克"
        },
        {
          "icon": "m_40_100.png",
          "name": "菲亚特"
        },
        {
          "icon": "m_7_100.png",
          "name": "丰田"
        },
        {
          "icon": "m_67_100.png",
          "name": "福迪"
        },
        {
          "icon": "m_190_100.png",
          "name": "弗那萨利"
        },
        {
          "icon": "m_208_100.png",
          "name": "福汽启腾"
        },
        {
          "icon": "m_17_100.png",
          "name": "福特"
        },
        {
          "icon": "m_128_100.png",
          "name": "福田"
        }
      ],
      "title": "F"
    },
    {
      "cars": [
        {
          "icon": "m_109_100.png",
          "name": "GMC"
        },
        {
          "icon": "m_110_100.png",
          "name": "光冈"
        },
        {
          "icon": "m_147_100.png",
          "name": "广汽"
        },
        {
          "icon": "m_63_100.png",
          "name": "广汽吉奥"
        },
        {
          "icon": "m_133_100.png",
          "name": "广汽日野"
        },
        {
          "icon": "m_182_100.png",
          "name": "观致汽车"
        }
      ],
      "title": "G"
    },
    {
      "cars": [
        {
          "icon": "m_31_100.png",
          "name": "哈飞"
        },
        {
          "icon": "m_196_100.png",
          "name": "哈弗"
        },
        {
          "icon": "m_170_100.png",
          "name": "海格"
        },
        {
          "icon": "m_32_100.png",
          "name": "海马"
        },
        {
          "icon": "m_149_100.png",
          "name": "海马商用车"
        },
        {
          "icon": "m_181_100.png",
          "name": "恒天汽车"
        },
        {
          "icon": "m_58_100.png",
          "name": "红旗"
        },
        {
          "icon": "m_52_100.png",
          "name": "黄海"
        },
        {
          "icon": "m_112_100.png",
          "name": "华泰"
        },
        {
          "icon": "m_45_100.png",
          "name": "汇众"
        }
      ],
      "title": "H"
    },
    {
      "cars": [
        {
          "icon": "m_35_100.png",
          "name": "江淮"
        },
        {
          "icon": "m_37_100.png",
          "name": "江铃"
        },
        {
          "icon": "m_38_100.png",
          "name": "江南"
        },
        {
          "icon": "m_98_100.png",
          "name": "捷豹"
        },
        {
          "icon": "m_143_100.png",
          "name": "吉利帝豪"
        },
        {
          "icon": "m_144_100.png",
          "name": "吉利全球鹰"
        },
        {
          "icon": "m_148_100.png",
          "name": "吉利英伦"
        },
        {
          "icon": "m_39_100.png",
          "name": "金杯"
        },
        {
          "icon": "m_57_100.png",
          "name": "金龙联合"
        },
        {
          "icon": "m_161_100.png",
          "name": "金旅客车"
        },
        {
          "icon": "m_152_100.png",
          "name": "九龙"
        },
        {
          "icon": "m_4_100.png",
          "name": "Jeep"
        }
      ],
      "title": "J"
    },
    {
      "cars": [
        {
          "icon": "m_188_100.png",
          "name": "卡尔森"
        },
        {
          "icon": "m_107_100.png",
          "name": "凯迪拉克"
        },
        {
          "icon": "m_150_100.png",
          "name": "开瑞"
        },
        {
          "icon": "m_51_100.png",
          "name": "克莱斯勒"
        },
        {
          "icon": "m_145_100.png",
          "name": "科尼塞克"
        },
        {
          "icon": "m_212_100.png",
          "name": "KTM"
        }
      ],
      "title": "K"
    },
    {
      "cars": [
        {
          "icon": "m_86_100.png",
          "name": "兰博基尼"
        },
        {
          "icon": "m_200_100.png",
          "name": "蓝海房车"
        },
        {
          "icon": "m_80_100.png",
          "name": "劳斯莱斯"
        },
        {
          "icon": "m_94_100.png",
          "name": "雷克萨斯"
        },
        {
          "icon": "m_99_100.png",
          "name": "雷诺"
        },
        {
          "icon": "m_146_100.png",
          "name": "莲花"
        },
        {
          "icon": "m_153_100.png",
          "name": "猎豹汽车"
        },
        {
          "icon": "m_76_100.png",
          "name": "力帆"
        },
        {
          "icon": "m_16_100.png",
          "name": "铃木"
        },
        {
          "icon": "m_166_100.png",
          "name": "理念"
        },
        {
          "icon": "m_95_100.png",
          "name": "林肯"
        },
        {
          "icon": "m_36_100.png",
          "name": "陆风"
        },
        {
          "icon": "m_96_100.png",
          "name": "路虎"
        },
        {
          "icon": "m_83_100.png",
          "name": "路特斯"
        }
      ],
      "title": "L"
    },
    {
      "cars": [
        {
          "icon": "m_183_100.png",
          "name": "迈凯伦"
        },
        {
          "icon": "m_93_100.png",
          "name": "玛莎拉蒂"
        },
        {
          "icon": "m_18_100.png",
          "name": "马自达"
        },
        {
          "icon": "m_79_100.png",
          "name": "MG"
        },
        {
          "icon": "m_81_100.png",
          "name": "MINI"
        },
        {
          "icon": "m_201_100.png",
          "name": "摩根"
        }
      ],
      "title": "M"
    },
    {
      "cars": [
        {
          "icon": "m_155_100.png",
          "name": "纳智捷"
        }
      ],
      "title": "N"
    },
    {
      "cars": [
        {
          "icon": "m_104_100.png",
          "name": "欧宝"
        },
        {
          "icon": "m_84_100.png",
          "name": "讴歌"
        },
        {
          "icon": "m_171_100.png",
          "name": "欧朗"
        }
      ],
      "title": "O"
    },
    {
      "cars": [
        {
          "icon": "m_156_100.png",
          "name": "启辰"
        },
        {
          "icon": "m_43_100.png",
          "name": "庆铃"
        },
        {
          "icon": "m_42_100.png",
          "name": "奇瑞"
        },
        {
          "icon": "m_28_100.png",
          "name": "起亚"
        }
      ],
      "title": "Q"
    },
    {
      "cars": [
        {
          "icon": "m_30_100.png",
          "name": "日产"
        },
        {
          "icon": "m_78_100.png",
          "name": "荣威"
        },
        {
          "icon": "m_142_100.png",
          "name": "瑞麒"
        }
      ],
      "title": "R"
    },
    {
      "cars": [
        {
          "icon": "m_25_100.png",
          "name": "三菱"
        },
        {
          "icon": "m_209_100.png",
          "name": "山姆"
        },
        {
          "icon": "m_195_100.png",
          "name": "绅宝"
        },
        {
          "icon": "m_50_100.png",
          "name": "双环"
        },
        {
          "icon": "m_102_100.png",
          "name": "双龙"
        },
        {
          "icon": "m_111_100.png",
          "name": "斯巴鲁"
        },
        {
          "icon": "m_10_100.png",
          "name": "斯柯达"
        },
        {
          "icon": "m_89_100.png",
          "name": "smart"
        }
      ],
      "title": "S"
    },
    {
      "cars": [
        {
          "icon": "m_202_100.png",
          "name": "泰卡特"
        },
        {
          "icon": "m_189_100.png",
          "name": "特斯拉"
        }
      ],
      "title": "T"
    },
    {
      "cars": [
        {
          "icon": "m_140_100.png",
          "name": "威麟"
        },
        {
          "icon": "m_186_100.png",
          "name": "威兹曼"
        },
        {
          "icon": "m_19_100.png",
          "name": "沃尔沃"
        },
        {
          "icon": "m_48_100.png",
          "name": "五菱"
        }
      ],
      "title": "W"
    },
    {
      "cars": [
        {
          "icon": "m_13_100.png",
          "name": "现代"
        },
        {
          "icon": "m_174_100.png",
          "name": "星客特"
        },
        {
          "icon": "m_71_100.png",
          "name": "新凯"
        },
        {
          "icon": "m_87_100.png",
          "name": "西雅特"
        },
        {
          "icon": "m_49_100.png",
          "name": "雪佛兰"
        },
        {
          "icon": "m_6_100.png",
          "name": "雪铁龙"
        }
      ],
      "title": "X"
    },
    {
      "cars": [
        {
          "icon": "m_194_100.png",
          "name": "扬州亚星客车"
        },
        {
          "icon": "m_138_100.png",
          "name": "野马汽车"
        },
        {
          "icon": "m_100_100.png",
          "name": "英菲尼迪"
        },
        {
          "icon": "m_53_100.png",
          "name": "一汽"
        },
        {
          "icon": "m_41_100.png",
          "name": "依维柯"
        },
        {
          "icon": "m_75_100.png",
          "name": "永源"
        }
      ],
      "title": "Y"
    },
    {
      "cars": [
        {
          "icon": "m_136_100.png",
          "name": "长安轿车"
        },
        {
          "icon": "m_159_100.png",
          "name": "长安商用"
        },
        {
          "icon": "m_21_100.png",
          "name": "长城"
        },
        {
          "icon": "m_203_100.png",
          "name": "之诺"
        },
        {
          "icon": "m_60_100.png",
          "name": "中华"
        },
        {
          "icon": "m_167_100.png",
          "name": "中欧"
        },
        {
          "icon": "m_77_100.png",
          "name": "众泰"
        },
        {
          "icon": "m_204_100.png",
          "name": "中通客车"
        },
        {
          "icon": "m_33_100.png",
          "name": "中兴"
        }
      ],
      "title": "Z"
    }
  ]
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,519评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,842评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,544评论 0赞 330
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,742评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,646评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,027评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,513评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,169评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,324评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,996评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,591评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2赞 345
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2赞 341

推荐阅读更多精彩内容