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

• • 先看看效果图
  • 写在前面
  • 官方文档
    • 常用
  • Demo的接口

先看看效果图

写在前面

因为下面接口 是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

常用

<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}
/>
  
  

  
  

   
   
1
   
   
2
   
   
3
   
   
4
   
   
5
   
   
6
   
   
7
   
   
8
   
   
9
   
   
10
   
   
11
   
   
12
   
   
13
   
   
14
   
   
15
   
   
16
   
   
17
  
  

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 (
            <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'
    },
});