React Native 自定义ListView
juesexuexi
8年前
<pre> <code class="language-javascript">"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> <p style="text-align:center"><img src="https://simg.open-open.com/show/26b7d8125646a0f93f9c67c204d49aa5.png"></p> <p> </p> <p>来自：http://www.cnblogs.com/madaha/p/5934107.html</p> <p> </p>