RN的listview Demo

来源：互联网发布：鼠标指针软件下载编辑：程序博客网时间：2024/06/05 05:08
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,    ListView,    Image,    TouchableOpacity,    AlertIOS} from 'react-native';var Wine = require('./Wine.json');var Dimensions = require('Dimensions');var {width, height} = Dimensions.get('window');var ListDemo1 = React.createClass({  getInitialState(){    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});    return{      ds: ds.cloneWithRows(Wine)    }  },  render() {    return (      <View style={styles.outerViewStyle}>        <View style={styles.headerViewStyle}>          <Text style={{color:'white', fontSize:20}}>listviewDemo</Text>        </View>        <ListView dataSource={this.state.ds} renderRow={this.renderRow}/>      </View>    );  },  renderRow(rowData,sectionID,rowID,highlightRow){    return(        <TouchableOpacity activeOpacity={0.5} onPress={()=>{AlertIOS.alert('系统已经赠送予你 '+rowData.name+'¥'+rowData.money)}}>          <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({  outerViewStyle:{    flex:1  },  headerViewStyle:{    height:44,    backgroundColor:'orange',    justifyContent:'flex-end',    alignItems:'center',  },  cellViewStyle:{    padding:10,    backgroundColor:'white',    borderBottomWidth:0.1,    borderBottomColor:'#DDDDDD',    flexDirection:'row',  },  leftImageStyle:{    width:60,    height:60,    marginRight:10,  },  rightViewStyle:{    justifyContent:'center',  },  topTitleStyle:{    color:'darkgrey',    fontSize:15,    width:width * 0.7,    marginBottom:10,  },  bottomTitleStyle:{    color:'red',  }});AppRegistry.registerComponent('ListDemo1', () => ListDemo1);
0 0