ListView(1)酒列表

React Native ListView.gif

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了。