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 {

    constructor(props) {
        super(props);
        // 1.1 设置数据源
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

        this.state = {
            // 设置返回数据
            dataSource: ds.cloneWithRows(wineArray)
        }
    }

    render() {
        return (
            
                

                
            
        );
    }

    // 返回集体的cell
    renderRow(rowData, sectionID, rowID, highlightRow) {
        return (
        {Alert.alert("你按下了" + rowID + "行")}}
            >
            
                
                
                    {rowData.name}
                    ¥{rowData.money}
                
            
        
        );
    }
}

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