ReactNative实战 （三） FlatList 上下拉刷新的使用

先看看效果图

写在前面

因为下面接口 是http 协议的。 苹果会报错
所以需要 根据下面博文 修改一下
http://blog.csdn.net/u011439689/article/details/62046799
App Transport Security Settings 加入
Allow Arbitrary Loads = YES

官方文档

https://reactnative.cn/docs/0.51/flatlist.html#content

常用

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的接口 如有侵权 联系本人删除

http://m.app.haosou.com/index/getData?page=1
@params page 当前页 1..n

返回的数据结构

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 (
            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 (
            
                'white'}}>
                    头部布局
                
            
        )
    }

    /**
     * 创建头部布局
     */
    _createListFooter(){
        return (
            
                'white'}}>
                    底部底部
                
            
        )
    }


    /**
     * 创建布局
     */
    _createListItem(item){
        return (
            0.5} onPress={() => this._onItemClick(item)}>
                
                    
                    
                        {item.baike_name}
                    
                
            
        );
    }

    /**
     * 空布局
     */
    _createEmptyView(){
        return (
            '100%', alignItems:'center', justifyContent:'center'}}>
                16}}>
                    暂无列表数据，下啦刷新
                
            
        );
    }



    /**
     * 获取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'
    },
});