import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Content,
  TouchableOpacity,
  ListView,
  PixelRatio,
} from 'react-native';
var apps = {
  "data": [
    {
      "shops": [
        {
          "name": "商品一"
        },
        {
          "name": "商品二"
        },
        {
          "name": "商品三"
        },
      ],
      "title": "分類(lèi)1"
    },
    {
      "shops": [
        {
          "name": "商品一"
        },
        {
          "name": "商品二"
        }
      ],
      "title": "分類(lèi)2"
    },
    {
      "shops": [
        {
          "name": "商品一"
        },
      ],
      "title": "分類(lèi)3"
    }
  ]
};
    
class rn25 extends Component{
constructor(props) {
  super(props);
  var getSectionData = (dataBlob, sectionID) => {
          return dataBlob[sectionID];
      };

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

  this.state = {
     dataSource: new ListView.DataSource({
              getSectionData: getSectionData, // 獲取組中數(shù)據(jù)
              getRowData: getRowData, // 獲取行中的數(shù)據(jù)
              rowHasChanged: (r1, r2) => r1 !== r2,
              sectionHeaderHasChanged: (s1, s2) => s1 !== s2
          })
  };
}
 // 請(qǐng)求數(shù)據(jù)放在這
componentDidMount(){
             // 加載數(shù)據(jù)
          this.loadData();
}

// 加載數(shù)據(jù)
loadData(){
    var json = apps.data;
    var dataBlob = {},sectionIDs = [],rowIDs = [],cars = [];
  for (var i in json) {
      //step 1坎藐、把組數(shù)據(jù)放入sectionIDs數(shù)組中
      sectionIDs.push(i);
      //step 2抓歼、把組中內(nèi)容放dataBlob對(duì)象中
      dataBlob[i] = json[i].title;
      //step 3旷余、取出該組中所有的商品
      shops = json[i].shops;
      //step 4記錄每一行中的數(shù)據(jù)
      rowIDs[i] = [];
      //step 5、獲取行中每一組數(shù)據(jù)
      for (var j in shops) {
          //把行號(hào)放入rowIDs中
          rowIDs[i].push(j);
          //把每一行中的內(nèi)容放dataBlob對(duì)象中
          dataBlob[i + ':' + j] = shops[j];
      }
  }
   this.setState({
      dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)
    });
}

  render(){
    return(
       <View style={styles.outerViewStyle}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow.bind(this)}
                    renderSectionHeader={this.renderSectionHeader.bind(this)}
                />
            </View>
      );
  }

  renderRow(rowData) {
        return (
            <TouchableOpacity activeOpacity={0.5}>
                <View style={styles.rowStyle}>
                    <Text style={{marginLeft: 5}}>{rowData.name}</Text>
                </View>
            </TouchableOpacity>
        );
    }

    // 每一組中的數(shù)據(jù)
    renderSectionHeader(sectionData, sectionID) {
        return (
            <View style={styles.sectionHeaderViewStyle}>
                <Text style={{marginLeft: 5, color: 'white'}}>{sectionData}</Text>
            </View>
        );
    }
}
  const styles = StyleSheet.create({
     outerViewStyle: {
        //占滿窗口
        flex: 1,
    },

    headerViewStyle: {
        height: 64,
        backgroundColor: 'blue',
        justifyContent: 'center',
        alignItems: 'center'
    },

    rowStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 10,
        borderBottomColor: 'grey',
        borderBottomWidth: 1 / PixelRatio.get()
    },

    rowImageStyle: {
        width: 70,
        height: 70,
    },

    sectionHeaderViewStyle: {
        backgroundColor: 'red',
        height: 30,
        justifyContent: 'center'
    }
  });
 AppRegistry.registerComponent('rn25', () => rn25);

1E9E2FAF-DBE3-4D07-817C-09830049DCE9.png