首页 > 代码库 > 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。