效果图
demo.png
附上代码：https://github.com/wanwang88/ReactNativeListView1Demo
//导入json
var Wine = require('./Wine.json');
//获取屏幕width
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
数据源读取
//ES5
var AListViewDemo = React.createClass({
//设置初始值
getInitialState(){
//设置数据源
var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 != r2});
//返回数据
return{
dataSource:ds.cloneWithRows(Wine),
};
},
//设置render
render(){
return (
<ListView
dataSource ={this.state.dataSource}
renderRow = {this.renderRow}
/>
);
},
//返回具体的cell
renderRow(rowData, sectionID, rowID, highlightRow){
return(
<TouchableOpacity activeOpacity={0.5} onPress={()=>{AlertIOS.alert('click'+rowID)}}>
<View style={styles.cellViewStyle}>
<Image source={{uri:rowData.image}} style={styles.leftImgStyle}/>
<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({
cellViewStyle:{
padding:10,
backgroundColor:'white',
borderBottomWidth:0.5,
borderBottomColor:'#e8e8e8',
//主轴方向
flexDirection:'row',
},
rightViewStyle:{
//主轴对齐方式
justifyContent:'center'
},
leftImgStyle:{
width:60,
height:60,
marginRight:15
},
topTitleStyle:{
fontSize:15,
width:width-90,
marginBottom:10
},
bottomTitleStyle:{
color:'blue'
}
});
