ReactNative實現ListView分組，懸浮效果

實現效果

其實在ReactNative中實現ListView的分組效果的方式與Android中的ExpandableListview非常相似，只是在表現形式上更趨近於IOS中的UITableView而已。
在ReactNative中ListView分組效果的數據結構為

var dataBlob = {
    'sectionId1' : {...sectionId1 data},
    'sectionId1:rowId1' : {...row1 data},
    'sectionId1:rowId2' : {...row2 data},
    'sectionId2' : {...sectionId2 data},
    'sectionId2:rowId1' : {...row1 data},
    'sectionId2:rowId2' : {...row2 data},
    ...
}

var sectionIds = ['sectionId1','sectionId2','sectionId3'...];

var rowIds = [['rowId1','rowId2'...],['rowId1','rowId2'...],...];

如上所示，在RN中ListView中的分組數據全部放入dataBlob 中，通過 ‘sectionId ’ 來獲取每個組的header中的數據，通過 ‘sectionId:rowId’ 這種形式來獲取每個組中對應的列的數據。其中’sectionId ‘保存在一個一維數組中，’rowIds’保存在一個二維數組中。

在state中去設置dataSource的方式也與普通的ListView有所不同。

// 初始化函數
   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
           })
       }

   }

下面是具體代碼的實現方式：

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

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

var Car = require('./Cars.json');

var SectionListView = 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,
            })
        };
    },

    render(){
        return(
            
        );
    },

    componentDidMount(){
      this.loadListViewDataFormJson();
    },

    loadListViewDataFormJson(){
    //    拿到所有的json數據
        var jsonData = Car.data;

    //    定義變量
        var dataBlob = {},
            sectionIDs = [],
            rowIDs = [];

        for (var i = 0 ; i < jsonData.length ; i++){
        //    1.拿到所有的sectionId
            sectionIDs.push(i);

        //    2.把組中的內容放入dataBlob內容中
            dataBlob[i] = jsonData[i].title;

        //    3.設置改組中每條數據的結構
            rowIDs[i] = [];

        //    4.取出改組中所有的數據
            var cars = jsonData[i].cars;

        //    5.便利cars,設置每組的列表數據
            for (var j = 0 ; j < cars.length ; j++){
            //    改組中的每條對應的rowId
                rowIDs[i].push(j);

            // 把每一行中的內容放入dataBlob對象中
                dataBlob[i+':'+j] = cars[j];
            }
        }

        // 更新狀態
        this.setState({
            dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)
        });
    },

    // 每一行中的數據
    renderRow(rowData){
        return (
            
                
                    
                    
                        {rowData.name}
                    
                
            
        );
    },

    // 每一組對應的數據
    renderSectionHeader(sectionData,sectionId){
        return (
            
                {sectionData}
            
        );
    }

});


const styles = StyleSheet.create({
    listStyle:{

    },
    sectionView:{
        height:22,
        backgroundColor:"#c3c3c3",
        justifyContent:"center"
    },

    sectionTitle:{
        marginLeft:16,
    },
    rowView:{
        height:44,
        flexDirection:'row',
        paddingLeft:16,
        alignItems:'center'
    },
    rowImage:{
        width:44,
        height:44
    },
    rowTitleSup:{
        height:44,
        width:700,
        borderBottomWidth:1,
        borderBottomColor:"#c3c3c3",
        marginLeft:16,
        justifyContent:'center'
    },
    rowTitle:{
        fontSize:16,
    }
});

module.exports = SectionListView;

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"
    }
  ]
}