ReactNative中ListView的实现效果

我们希望能够尽我们所能，来让这个世界变的更简单，如果你想了解我们，请点击这里

---

ReactNative 中的 简单的ListView 实现

/**
 * 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 wines = require('./Wine.json');


var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');

var WineListView = React.createClass({

    getInitialState(){
    //不分组的ListView标准写法
        var ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2});
        return{
            dataSource:ds.cloneWithRows(wines),
        }
    },


    render(){
        return (
            <ListView
                dataSource = {this.state.dataSource}
                renderRow = {this.renderRowView}
                style={{marginTop: 26}
                }
            />
        );
    },

//    返回每一个Item显示的内容
    renderRowView(rowData,sectionId, rowId ,highlightRow){
        return(
            <TouchableOpacity
                activeOpacity={0.6}
                onPress={() => {AlertIOS.alert('点击和第' + rowId + '行')}}
            >
                <View style={styles.itemView}>
                    <Image ref="itemIcon" source={{uri:rowData.image}} style={styles.itemIcon}/>

                    <View style={styles.itemTextView}>
                        <Text style={styles.itemTitle}>{rowData.name}</Text>
                        <Text style={styles.itemMoney}>¥{rowData.money}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
})

const styles = StyleSheet.create({
    itemView:{
        width:width,
        paddingTop:8,
        paddingBottom:8,
        marginLeft: 16,
        flexDirection:'row',
        borderBottomWidth:0.5,
        borderBottomColor:'#c3c3c3'
    },
    itemIcon:{
        width:44,
        height:44,
        alignSelf:'center'
    },
    itemTextView:{
        marginLeft:16,
    },
    itemTitle:{
        fontSize:14,
        width: width - 16 - 44 - 16 - 16
    },
    itemMoney:{
        color:'red',
        fontSize:16,
        marginTop:8
    }
});

module.exports = WineListView;