ListView 分组展示

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

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

export default class fenZhuTableView 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,
                getRowData:getRowData,
                rowHasChanged:(r1,r2) => r1 !== r2,
                sectionHeaderHasChanged:(r1,r2) => r1 !== r2
            })

        }

    }

    render(){

        return(

            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
                renderSectionHeader={this.renderSectionHeader}
            />

        );

    }

    //返回头
    renderSectionHeader(sectionData,sectionID){

        return(
            <View>
                <Text style={{backgroundColor:'red'}}>{sectionData+sectionID}</Text>

            </View>

        )

    }

    renderRow(rowData){
        return(
            <View>
                <Text>{rowData}</Text>
            </View>
        )
    }



    //UI更新完毕调用的方法
    componentDidMount() {

        var jsonData = Car.data;

        var dataBlob = {};
            sectionIDs = [],
            rowIDs   = [],
            cars = [];

        //造数据
        for (var i = 0; i< 10; i++){
            sectionIDs.push(i);
            dataBlob[i] = 'section' + i;
            rowIDs[i] = [];
            for (var j= 0; j<5; j++){
                rowIDs[i].push(j);
                dataBlob[i +':' +j] = 'section' + i + '--row' + j;
            }
        }
        //从本地取数据
        // for (var i=0;i<jsonData.length;i++) {
        //
        //         sectionIDs.push(i);
        //         dataBlob[i] = jsonData[i].title;
        //         cars = jsonData[i].cars;
        //         rowIDs[i] = [];
        //         for (var j=0;j<cars.length;j++){
        //             rowIDs[i].push(j);
        //             dataBlob[i+':'+j] = cars[j];
        //
        //         }
        // }

        this.setState({

            dataSource:this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)
        })

    }

}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值