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

迈不过友情╰ 2022-04-24 01:48 568阅读 0赞

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

## 先看看效果图 ##

![这里写图片描述][SouthEast]

## 写在前面 ##

因为下面接口 是http 协议的。 苹果会报错  
所以需要 根据下面博文 修改一下  
[http://blog.csdn.net/u011439689/article/details/62046799][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][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][http_m.app.haosou.com_index_getData_page_1]  
@params page 当前页 1..n

返回的数据结构  
![这里写图片描述][SouthEast 1]

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

[SouthEast]: /images/20220221/3c597371b1964325aff149a81b346b1e.png
[http_blog.csdn.net_u011439689_article_details_62046799]: http://blog.csdn.net/u011439689/article/details/62046799
[https_reactnative.cn_docs_0.51_flatlist.html_content]: https://reactnative.cn/docs/0.51/flatlist.html#content
[http_m.app.haosou.com_index_getData_page_1]: http://m.app.haosou.com/index/getData?page=1
[SouthEast 1]: /images/20220221/a6cddc6aebe141b89bb1c28a18369861.png