ReactNative——UI5.ListView实现带标题的列表

ListView 实现 带标题的列表：

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

import carInfos from '../data/carBrandData.json'

/**
 * 1. 于state 中 初始化dataSource
 * 2. 在componentDidMount 中请求数据 并更新state 中的 dataSource
 * 3. render() 返回 renderRow&Section、   renderHeader
 */
export default class CarBrandList extends Component {

    constructor(props) {
        super(props);
        let _getSectionData = (dataBlob, sectionID) => {
            return dataBlob[sectionID];
        };
        let _getRowData = (dataBlob, sectionID, rowID) => {
            return dataBlob[sectionID + ':' + rowID];
        };
        this.state = {
            //1.初始化dataSource
            dataSource: new ListView.DataSource({
                getSectionData: _getSectionData,
                getRowData: _getRowData,
                rowHasChanged: (r1, r2) => {
                    r1 !== r2
                },
                sectionHeaderHasChanged: (s1, s2) => {
                    s1 !== s2
                },
            }),
        }

    }

    componentDidMount() {
        //2.请求数据 更新数据
        this._requestCarInfo();
    }

    _requestCarInfo() {

        let jsonData = carInfos.data;
        let dataBlob = {},
            sectionIDs = [],
            rowIDs = [],
            cars = [];
       // 处理数据成可用格式
        for (let i = 0; i < jsonData.length; i++) {
            //1.把组号放入sectionIDs中
            sectionIDs.push(i);
            //2.把组中的内容放入dataBlob
            dataBlob[i] = jsonData[i].title;
            //3.取出组中的数据//TODO:这个地方 为什么不是cars[i]
            cars = jsonData[i].cars;

            rowIDs[i] = [];
            //遍历所有的车数组
            for (let j in cars) {
                //把行号放入rowIDs
                rowIDs[i].push(j);
                //把每一行的内容放入dataBlob 对象中
                dataBlob[i + ':' + j] = cars[j];
            }
        }
        console.log(dataBlob);
        console.log(sectionIDs);
        console.log(rowIDs);
       // 数据处理完成，更新状态机
        this.setState({
            dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
        })

    }

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


    _renderRow(rowData) {

        return (
            <TouchableOpacity activeOpacity={0.5}   onPress={() => Alert.alert(
                rowData.name,
            )}>
                <View style={styles.itemStyle}>
                    <Image
                        source={{uri: rowData.icon}}
                        style={styles.iconStyle}/>
                    <Text style={styles.carNameStyle}>{rowData.name}</Text>
                </View>

            </TouchableOpacity>
        );
    }

    _renderSectionHeader(sectionData, sectionID) {

        return (
            <View style={styles.sectionHeaderViewStyle}>
                <Text style={{marginLeft: 5, color: 'red'}}>{sectionData}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    listViewStyle:{

    },
    iconStyle: {
        width: 80,
        height: 80,
    },
    itemStyle: {
        paddingBottom: 10,
        flexDirection: 'row',
        alignItems: 'center',
    },
    sectionHeaderViewStyle: {
        backgroundColor: '#e8e8e8',
        height: 25,
        justifyContent: 'center'
    },
    carNameStyle:{
        marginLeft:10,
    },
})

Dem0下载

不论大神还是新手，欢迎加QQ群一起讨论问题学习技术：230274309