React Native 自定义ListView 分区表

"use strict"

import React, { Component } from 'react';
import {
    AppRegistry, // 注册组件,是应用的JS运行入口
    StyleSheet,  // 样式表, 类似于一个集合包含各个组件的属性
    ListView,
    Dimensions,
    Text,
    TouchableOpacity,
    Image,
    View
} from 'react-native';

const { width, height } = Dimensions.get('window')

var IMAGES = [
    require('./Resource/Test/1.png'),
    require('./Resource/Test/2.jpeg'),
    require('./Resource/Test/3.png'),
    require('./Resource/Test/1.png'),
    require('./Resource/Test/2.jpeg'),
    require('./Resource/Test/3.png'),
    require('./Resource/Test/1.png'),
    require('./Resource/Test/2.jpeg'),
    require('./Resource/Test/3.png')

];

// 声明一个 Helloworld 组件
class HelloWorld extends Component {

    constructor(props) {

        super(props);
        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2, // http://es6.ruanyifeng.com/?search=%3D%3D%3D&x=0&y=0#docs/spec#相等运算符
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2
        });
        this.state = {

            dataSource: ds.cloneWithRowsAndSections({
                'A':['A1', 'A2'],
                'B':['B1', 'B2', 'B3'],
                'C':['C1', 'C2','C3', 'C4', 'C5','C6', 'C7']
            })
        };
    }

    // cell 点击方法
    touchRow(sectionID, rowID, rowData) {

        alert('第 ' + sectionID + ' 区' + rowID + ' 行' + rowData)
    }

    /**  为什么Data 在 ID 前面 ? ------ ListView的API规定,如果认为改变位置导致数据错乱,看下面API的说明
     * You must provide a renderRow function. If you omit any of the other render
     * functions, ListView will simply skip rendering them.
     *
     * - renderRow(rowData, sectionID, rowID, highlightRow);
     * - renderSectionHeader(sectionData, sectionID);
     */
    // 自定义sectionView
    renderSectionView(sectionData, sectionID) {

        console.log(sectionData, sectionID)

        return (
            <View style={styles.sectionViewStyle}>
                <Text style={styles.textStyle}>
                    {sectionID}
                </Text>
            </View>

        );
    }

    // 自定义row(看作cell)
    renderRow(rowData, sectionID, rowID) {
        // console.log(rowData, sectionID, rowID)

        var imgSource = IMAGES[rowID];
        return (
            <TouchableOpacity onPress={() => this.touchRow(sectionID, rowID, rowData)}>
                <View style={styles.rowViewStyle}>
                    <Image style={styles.imageThumb} source={imgSource} />
                    <Text style={styles.textStyle}>
                            {'sectionID:' + sectionID + '   rowID:' + rowID + '   rowData:' + rowData}
                    </Text>
                </View>
            </TouchableOpacity>
        );
    }

    render() { // 渲染

      return (

          <View style={styles.container}>
              <ListView contentContainerStyle={styles.listViewStyle}
                        showsVerticalScrollIndicator={true}
                        dataSource={this.state.dataSource}
                        renderRow={(rowData, sectionID, rowID) => this.renderRow(rowData, sectionID, rowID)}
                        renderSectionHeader={(sectionData, sectionID) => this.renderSectionView(sectionData, sectionID)}
              />
          </View>
    );
  }
}


const styles = StyleSheet.create({

    container: {
        flex: 1, // 当一个元素定义了flex属性时，表示该元素是可伸缩的（flex的属性值大于0的时候才可伸缩）,
        backgroundColor: 'white',
        paddingTop: 20,  // 父组件View,距离屏幕顶部20(状态栏)
        //  300, //把 flex: 1 去掉,自行设定width height,可看一下效果
        // height:400,
    },
    listViewStyle: {
        backgroundColor: 'red' // listView北京颜色

    },
    textStyle: {
        flex: 1,
        color: 'black',
        fontSize: 16,
    },
    sectionViewStyle: {
        flexDirection: 'row',
        justifyContent: 'center',
        backgroundColor: 'gray',
    },
    rowViewStyle: {
        flexDirection: 'row',
        justifyContent: 'center',
        padding: 10,
        backgroundColor: '#F6F6F6',
    },
    imageThumb: {
         50,
        height: 50,
    },
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

****************************************  效果图  ****************************************