最新的RN中使用的是FlatList組件來(lái)代替ListView組件

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    Dimensions,
    FlatList,
} from 'react-native';

const Dimenis = require('Dimensions');
const { width, height, scale } = Dimensions.get('window');

//引入數(shù)據(jù)
var Wine = require('./Wine.json');

class main extends Component {

    constructor(props) {
        super(props);
        //初始化數(shù)據(jù)
        this.state = {
            dataSource: Wine,
            refreshing: false,
        }
    }

    render() {
        return (
            //FlatList flex默認(rèn)為1且不能調(diào)整 想要設(shè)置高度只能在外面包裹一層view
            <View style={{ width: width, height: height }}>
                <FlatList style={styles.content}
                    data={this.state.dataSource}//數(shù)據(jù)設(shè)置
                    renderItem={({ item, index }) => this.renderRow(item, index)}//cell樣式設(shè)置
                    
                    ItemSeparatorComponent={this.separator}//分割線樣式
                    keyExtractor={this._extraUniqueKey}//唯一標(biāo)識(shí)符,不實(shí)現(xiàn)會(huì)有警告

                    ListEmptyComponent={this.createEmpty}//無(wú)數(shù)據(jù)展示的視圖
                    ListFooterComponent={this.listFooterComponent}//底部組件
                    ListHeaderComponent={this.listHeaderComponent}//頭部組件

                    horizontal={false}//水平滾動(dòng)(默認(rèn))還是垂直滾動(dòng)

                    refreshing={this.state.refreshing} // 是否刷新 ，自帶刷新控件
                    onRefresh={() => {
                        this.refresh();
                    }}
                    // 刷新方法,寫了此方法，下拉才會(huì)出現(xiàn)  刷新控件，使用此方法必須寫 refreshing

                    onEndReached={() => this._onLoadMore()}
                    onEndReachedThreshold={0.1}
                    //決定當(dāng)距離內(nèi)容最底部還有多遠(yuǎn)時(shí)觸發(fā)onEndReached回調(diào)。注意此參數(shù)是一個(gè)比值而非像素單位。比如，0.5 表示距離內(nèi)容最底部的距離為當(dāng)前列表可見(jiàn)長(zhǎng)度的一半時(shí)觸發(fā)。
                    
                    //以下是Collection樣式
                    //numColumns ={3} // 指定多少列  等于 1 的時(shí)候，不能寫 columnWrapperStyle
                    //columnWrapperStyle={{borderWidth:2, borderColor:'black'}} // 一整行的row設(shè)置樣式
                />
            </View>
        )
    }
    _extraUniqueKey(item, index) {
        return "index" + index + item;
    }
    refresh(){
        this.setState({
            refreshing: true,
        });
        setTimeout(()=>{
            this.setState({
                refreshing: false,
            })
        },2000);

    }
    _onLoadMore(){
        console.log('加載更多。。。');
    }
    renderRow(item, index) {
        return (
            <View style={styles.cellViewStyle}>
                <Image source={{ uri: item.image }} style={styles.iconImg} />
                <View style={styles.bottomLineView}></View>
                <Text style={styles.titleText}>{item.name}</Text>
                <Text style={styles.price}>售價(jià)：{item.money} = {index}</Text>
            </View>
        )
    }
    separator() {
        return (
            <View style={{ width: width, height: 5, backgroundColor: 'orange' }}>
            </View>
        )
    }
    createEmpty() {
        return (
            <View style={{ height: 100, alignItems: 'center', justifyContent: 'center' }}>
                <Text style={{ fontSize: 16 }}>
                    暫無(wú)列表數(shù)據(jù)，下啦刷新
                </Text>
            </View>
        )
    }
    listHeaderComponent() {
        return (
            <View style={{ height: 50, alignItems: 'center', justifyContent: 'center' }}>
                <Text style={{ color: 'white' }}>
                    頭部布局
                </Text>
            </View>
        )
    }
    listFooterComponent() {
        return (
            <View style={{ height: 50, alignItems: 'center', justifyContent: 'center' }}>
                <Text style={{ color: 'white' }}>
                    底部布局
                </Text>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    //FlatList樣式
    content: {
        backgroundColor: 'green',
        marginTop: 40,
        marginBottom: 40,
    },
    //Cell樣式內(nèi)容
    cellViewStyle: {
        position: 'relative',
        width: width,
        height: 80,
        backgroundColor: 'red',
    },
    iconImg: {
        position: 'absolute',
        top: 5,
        left: 5,
        width: 70,
        height: 70,
        borderRadius: 5,
    },
    titleText: {
        position: 'absolute',
        left: 80,
        top: 5,
        right: 5,
    },
    price: {
        position: 'absolute',
        left: 80,
        bottom: 10,
        fontSize: 20,
        fontWeight: "bold",
    },
    bottomLineView: {
        position: 'absolute',
        width: width,
        bottom: 0,
        height: 1,
        backgroundColor: '#eaeaea',
    },

    emptyView: {
        width: width,
        height: 200,
        backgroundColor: 'red'
    }
});

module.exports = main;

完成效果

注意：屬性方法的首字母大小寫問(wèn)題，大寫的就是大寫，小寫的就是小寫