import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
ListView,
Image,
Dimensions,
TouchableOpacity,
Alert
} from 'react-native';
var wineArray = require('./Wine.json');
var ScreenWidth = Dimensions.get('window').width;
export default class App extends Component<Props> {
constructor(props) {
super(props);
// 1.1 设置数据源
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
// 设置返回数据
dataSource: ds.cloneWithRows(wineArray)
}
}
render() {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.dataSource} // 数据源
renderRow={this.renderRow}
>
</ListView>
</View>
);
}
// 返回集体的cell
renderRow(rowData, sectionID, rowID, highlightRow) {
return (
<TouchableOpacity
activeOpacity={0.5}
onPress={()=>{Alert.alert("你按下了" + rowID + "行")}}
>
<View style={styles.cellViewStyle}>
<Image source={{uri: rowData.image}} style={styles.leftImageStyle}/>
<View style={styles.rightViewStyle}>
<Text style={styles.topTitleStyle}>{rowData.name}</Text>
<Text style={styles.bottomTitleStyle}>¥{rowData.money}</Text>
</View>
</View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
cellViewStyle: {
padding: 10,
// 下划线
borderBottomWidth: 0.5,
borderBottomColor: '#e8e8e8',
// 确定主轴的方向
flexDirection: 'row'
},
leftImageStyle: {
width: 120,
height: 120,
},
rightViewStyle: {
width:ScreenWidth * 0.7,
justifyContent: 'center'
},
topTitleStyle: {
color: 'red',
fontSize: 16
},
bottomTitleStyle: {
color:'black',
fontSize:14,
marginTop: 10
}
});
React Native组件ListView的简单使用,但是React Native已经不推荐使用ListView了。