先看看效果圖

寫在前面

因為下面介面 是http 協議的。 蘋果會報錯
所以需要 根據下面博文 修改一下
http://blog.csdn.net/u011439689/article/details/62046799
App Transport Security Settings 加入
Allow Arbitrary Loads = YES

官方文件

常用

<FlatList
    style={styles.container}
    data={this.state.data}
    //item顯示的佈局
    renderItem={({item})
 
 => this._createListItem(item)}
    // 空佈局
    ListEmptyComponent={this._createEmptyView}
    //新增頭尾佈局
    ListHeaderComponent={this._createListHeader}
    ListFooterComponent={this._createListFooter}
    //下拉重新整理相關
    onRefresh={() => this._onRefresh()}
    refreshing={this.state.isRefresh}
    //載入更多
    onEndReached={()
 
 => this._onLoadMore()}
    onEndReachedThreshold={0.1}
/>

Demo的介面

使用360的介面 如有侵權 聯絡本人刪除

返回的資料結構

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity, FlatList, Image,
} from 'react-native';
import {Card} from "react-native-elements"
 
;


//螢幕資訊
const dimensions = require('Dimensions');
//獲取螢幕的寬度和高度
const {width, height} = dimensions.get('window');

export default class HomeView extends Component {


    static navigationOptions = () => ({
            header: null,
        }
    );

    constructor(props){
        super(props);
        //當前頁
        this.page = 1
        //狀態
        this.state = {
            // 列表資料結構
            data:[],
            // 下拉重新整理
            isRefresh:false,
            // 載入更多
            isLoadMore:false

        }
    }


    render() {
        return (
            <FlatList
                style={styles.container}
                data={this.state.data}
                //item顯示的佈局
                renderItem={({item}) => this._createListItem(item)}
                // 空佈局
                ListEmptyComponent={this._createEmptyView}
                //新增頭尾佈局
                ListHeaderComponent={this._createListHeader}
                ListFooterComponent={this._createListFooter}
                //下拉重新整理相關
                onRefresh={() => this._onRefresh()}
                refreshing={this.state.isRefresh}
                //載入更多
                onEndReached={() => this._onLoadMore()}
                onEndReachedThreshold={0.1}
            />
        );
    }


    /**
     * 建立頭部佈局
     */
    _createListHeader(){
        return (
            <View style={styles.headView}>
                <Text style={{color:'white'}}>
                    頭部佈局
                </Text>
            </View>
        )
    }

    /**
     * 建立頭部佈局
     */
    _createListFooter(){
        return (
            <View style={styles.footerView}>
                <Text style={{color:'white'}}>
                    底部底部
                </Text>
            </View>
        )
    }


    /**
     * 建立佈局
     */
    _createListItem(item){
        return (
            <TouchableOpacity activeOpacity={0.5} onPress={() => this._onItemClick(item)}>
                <Card>
                    <Image source={{uri:item.logo_url}} style={styles.itemImages}/>
                    <Text>
                        {item.baike_name}
                    </Text>
                </Card>
            </TouchableOpacity>
        );
    }

    /**
     * 空佈局
     */
    _createEmptyView(){
        return (
            <View style={{height:'100%', alignItems:'center', justifyContent:'center'}}>
                <Text style={{fontSize:16}}>
                    暫無列表資料，下啦重新整理
                </Text>
            </View>
        );
    }



    /**
     * 獲取360 下載列表
     * @private
     */
    _getHotList() {
        fetch("http://m.app.haosou.com/index/getData?type=1&page=" + this.page)
            .then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson)
                if(this.page === 1){
                    console.log("重新載入")
                    this.setState({
                        data: responseJson.list
                    })
                }else{
                    console.log("載入更多")
                    this.setState({
                        // 載入更多 這個變數不重新整理
                        isLoadMore : false,
                        // 資料來源重新整理 add
                        data: this.state.data.concat(responseJson.list)
                    })
                }


            })
            .catch((error) => {
                console.error(error);
            });
    }

    /**
     * 下啦重新整理
     * @private
     */
    _onRefresh=()=>{
        // 不處於 下拉重新整理
        if(!this.state.isRefresh){
            this.page = 1
            this._getHotList()
        }
    };

    /**
     * 載入更多
     * @private
     */
    _onLoadMore(){
        // 不處於正在載入更多 && 有下拉重新整理過，因為沒資料的時候 會觸發載入
        if (!this.state.isLoadMore && this.state.data.length > 0){
            this.page = this.page + 1
            this._getHotList()
        }
    }

    /**
     * item點選事件
     */
    _onItemClick(item){
        console.log("page" + this.state.page + " = "  + item.baike_name)
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
    },
    headView:{
        width:width,
        height:100,
        backgroundColor:'red',
        justifyContent:'center',
        alignItems:'center'
    },
    footerView:{
        width:width,
        height:100,
        backgroundColor:'yellow',
        justifyContent:'center',
        alignItems:'center'
    },
    itemImages:{
        width:120,
        height:120,
        resizeMode:'stretch'
    },
});