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);
</code></pre> 
  
 
  
 
 
  
來自：http://www.cnblogs.com/madaha/p/5934107.html