ListView(3)---汽车列表

React Native StickListView.gif

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

import car from "./Car";

export default class App extends Component<Props> {

    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: (s1, s2) => s1 !== s2
            })
        }

    }


    /**
     * 复杂的操作：数据请求或者异步操作
     */
    componentDidMount() {
        // 拿到json数据
        var jsonData = car.data;

        // 定义一些变量
        var dataBlob = {};
        var sectionIDs = [];
        var rowIDs = [];
        var cars = [];

        for (var i = 0; i < jsonData.length; i++) {

            // 1.把组号放入sectionIDs数组中
            sectionIDs.push(i);

            // 2.把组中内容放入dataBlob中
            dataBlob[i] = jsonData[i].title;

            // 3.取出组中所有的车
            cars = jsonData[i].cars;
            rowIDs[i] = [];
            for (var j = 0; j < cars.length; j++) {
                // 把行号放入rowIDs
                rowIDs[i].push(j);
                // 把每一行中的内容放入dataBlob对象中
                dataBlob[i + ":" + j] = cars[j];
            }
        }

        // 更新状态
        this.setState({
            dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)
        })
    }


    render() {
        return (
            <View style={styles.container}>
                {/*头部*/}
                <View style={styles.headViewStyle}>
                    <Text style={styles.titleStyle}>SeeMyGo品牌</Text>
                </View>
                {/*ListView*/}
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                    renderSectionHeader={this.renderSectionHeader}
                />

            </View>
        );
    }

    /**
     * 每一行的数据
     * @param rowData
     * @returns {*}
     */
    renderRow(rowData) {
        return (
            <TouchableOpacity
                activeOpacity={0.5}>
                <View style={styles.rowStyle}>
                    <Image source={{uri: rowData.icon}} style={styles.rowImageStyle}/>
                    <Text style={styles.rowTextStyle}>{rowData.name}</Text>
                </View>
            </TouchableOpacity>
        );
    }

    /**
     * 每一组的数据
     */
    renderSectionHeader(sectionData, sectionID) {
        return (
            <View style={styles.sectionHeadStyle}>
                <Text style={styles.sectionTextStyle}>{sectionData}</Text>
            </View>
        );
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    headViewStyle: {
        height: 60,
        backgroundColor: 'orange',
        justifyContent: 'center',
        alignItems: 'center'
    },
    titleStyle: {
        color: 'white',
        fontSize: 22
    },
    sectionHeadStyle: {
        height: 30,
        backgroundColor: '#e8e8e8',
        justifyContent: "center"
    },
    sectionTextStyle: {
        color: "red",
        marginLeft: 10
    },
    rowStyle: {
        flexDirection: "row",
        alignItems: "center",
        padding: 10,
        borderBottomWidth: 1,
        borderBottomColor: "#e8e8e8",
    },
    rowTextStyle: {
        color: "black",
        marginLeft: 10
    },
    rowImageStyle: {
        width: 70,
        height: 70
    },

});