React Native 之ListView2

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

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

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


export default class HeCan extends Component {
    constructor(props){
        super(props);
        var getSectionHeaderData =(dataBlob, sectionID)=>{

            return dataBlob[sectionID];
        };
        var getRowData = (dataBlob, sectionID, rowID) =>{
            //這個是自己定義的規則
            return dataBlob[sectionID+'&'+rowID];

        };

        this.state ={
            dataSource:new ListView.DataSource({



                getSectionHeaderData:getSectionHeaderData,

                getRowData:getRowData,
                rowHasChanged:(r1,r2)=>r1!==r2,
                sectionHeaderHasChanged:(s1,s2)=>s1!==s2,

            })

        }

    }
    //------

    render() {
        return (
            
                {/*头部Nav*/}
                
                    这是汽车品牌展示
                
                {/*ListView*/}
                
            
        );
    }

    //返回每一组头部的内容
    renderSectionHeader(sectionData,sectionID){
        return(
            
                {sectionData}
            
        )
    }

    //返回每一行Cell
    renderRow(rowData){
        return(
            
                
                    
                    {rowData.name}
                
            
        )
    }
    //------

    //這一步需要請求數據
    componentDidMount()
    {
        this.loadJson();
    }


    loadJson(){
        //拿到Json
        var jsonData = Car.data;
        //定义数据源需要的变量
        var dataBlob = {},
            sectionIDs = [],
            rowIDs = [],//二维数组!!
            cars = [];

        //遍历
        for(var i=0;i

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": "宝骏"
        },