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 //        });        this.state = {

            dataSource: ds.cloneWithRows([‘  1‘, ‘ 2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘, ‘8‘, ])        };    }

    // cell 点击方法    touchRow(e) {

        alert(‘第 ‘ + e + ‘ 行‘)    }

    // 自定义row(看作cell)    renderRow(rowData, sectionID, rowID) {        var imgSource = IMAGES[rowID];        return (            <TouchableOpacity onPress={() => this.touchRow(rowData)}>                <View style={styles.rowViewStyle}>                    <Image style={styles.imageThumb} source={imgSource} />                    <Text style={styles.textStyle}>                            {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)}              />          </View>    );  }}

const styles = StyleSheet.create({

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

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

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