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": "雙環(huán)"
        },
        {
          "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閱讀 222,464評論 6贊 517
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件垛贤，死亡現場離奇詭異，居然都是意外死亡趣倾，警方通過查閱死者的電腦和手機聘惦，發(fā)現死者居然都...
    沈念sama閱讀 95,033評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來儒恋，“玉大人善绎，你說我怎么就攤上這事〗刖。” “怎么了禀酱？”我有些...
    開封第一講書人閱讀 169,078評論 0贊 362
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長箱锐。 經常有香客問我比勉，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 59,979評論 1贊 299
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮垢油，結果婚禮上蒂誉，老公的妹妹穿的比我還像新娘。我一直安慰自己墓捻，他們只是感情好，可當我...
    茶點故事閱讀 69,001評論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布坊夫。 她就那樣靜靜地躺著砖第，像睡著了一般。 火紅的嫁衣襯著肌膚如雪环凿。 梳的紋絲不亂的頭發(fā)上梧兼，一...
    開封第一講書人閱讀 52,584評論 1贊 312
  • 城市分裂傳說
    那天，我揣著相機與錄音智听，去河邊找鬼羽杰。 笑死，一個胖子當著我的面吹牛到推，可吹牛的內容都是我干的考赛。 我是一名探鬼主播，決...
    沈念sama閱讀 41,085評論 3贊 422
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼莉测，長吁一口氣：“原來是場噩夢啊……” “哼颜骤！你這毒婦竟也來了？” 一聲冷哼從身側響起捣卤，我...
    開封第一講書人閱讀 40,023評論 0贊 277
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤忍抽，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后腌零，有當地人在樹林里發(fā)現了一具尸體梯找，經...
    沈念sama閱讀 46,555評論 1贊 319
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3贊 342
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年益涧，在試婚紗的時候發(fā)現自己被綠了锈锤。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,769評論 1贊 353
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡闲询，死狀恐怖久免，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情扭弧，我是刑警寧澤阎姥，帶...
    沈念sama閱讀 36,439評論 5贊 351
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站鸽捻，受9級特大地震影響呼巴，放射性物質發(fā)生泄漏泽腮。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3贊 335
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一衣赶、第九天 我趴在偏房一處隱蔽的房頂上張望诊赊。 院中可真熱鬧，春花似錦府瞄、人聲如沸碧磅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0贊 25
  • 一樁弒父案遵馆，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽鲸郊。三九已至，卻和暖如春货邓，著一層夾襖步出監(jiān)牢的瞬間秆撮，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國打工逻恐， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留像吻，地道東北人。 一個月前我還...
    沈念sama閱讀 49,191評論 3贊 378
  • 代替公主和親
    正文 我出身青樓复隆，卻偏偏與公主長得像，于是被迫代替她去往敵國和親姆涩。 傳聞我的和親對象是個殘疾皇子挽拂，可洞房花燭夜當晚...
    茶點故事閱讀 45,781評論 2贊 361

推薦閱讀更多精彩內容