ReactNative中ListView的实现效果

无需原生开发基础，也能完美呈现京东商城。《混合开发京东商城系统，提前布局大前端》课程融合vue、Android、IOS等目前流行的前端和移动端技术，混合开发经典电商APP——京东。课程将各种复杂功能与知识点完美融合，从技术原理到开发上线，让你真实感受到一个明星产品开发的全过程。功能实现之外，还有一流用户体验和优秀交互设计等你一探究竟，拓宽开发眼界。

---

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;