首页 > 代码库 > React Native 自定义ListView

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);


技术分享

React Native 自定义ListView