react native學習筆記13——FlatList上拉載入

阿新 • • 發佈：2019-01-17

我們可以利用官方元件RefreshControl實現下拉重新整理功能，但React Native官方沒有提供相應的上拉載入的元件，因此在RN中實現上拉載入比下拉重新整理要複雜一點。
雖然沒有直接提供上拉載入的元件，不過我們仍可以通過FlatList的onEndReached與onEndReachedThreshold屬性來實現相應效果。

ActivityIndicator

這裡上拉載入的轉圈效果用ActivityIndicator表現。在開始上拉載入的實現之前先介紹一下官方元件ActivityIndicator——載入指示器。ActivityIndicator的使用很簡單。

    <ActivityIndicator
        animating={true 
}
        color='red'
        size="large"
    />

屬性

屬性	型別	描述
animating	bool	是否要顯示指示器，預設為true，表示顯示。
color	string	滾輪的前景顏色（預設為灰色）。
hidesWhenStopped(ios)	bool	在沒有動畫的時候，是否要隱藏指示器（預設為true）。
size	enum(‘small’, ‘large’)	指示器的大小。small的高度為20，large為36。

載入頁

根據上述ActivityIndicator屬性的介紹，可以使用ActivityIndicator實現一個簡單的載入頁面:

import React, {Component} from "react";
import {ActivityIndicator,  StyleSheet,  View} from "react-native";

export default class ActivityIndicatorDemo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <ActivityIndicator
                    animating 
={true}
                    color='red'
                    size="large"
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
});

其效果如下：

上拉載入的實現

下面進入正篇——上拉載入的實現
上拉載入一般應用於分頁載入的情況，為了真實的模擬網路請求資料上拉重新整理載入更多的使用場景，這裡使用github提供的api。

思路

當FlatList滑動到底部時，頁面數加一，觸發請求新一頁的網路資料，更新到元件state中的資料來源dataArray中，dataArray也作為FlatList的資料來源data。實現滑動到底部觸發網路請求通過FlatList的onEndReached和onEndReachedThreshold屬性，onEndReached是在當列表被滾動到距離內容最底部不足onEndReachedThreshold的距離時呼叫。

具體實現

全域性變數

const REQUEST_URL = 'https://api.github.com/search/repositories?q=javascript&sort=stars&page=';
let pageNo = 1;//當前第幾頁
let totalPage=5;//總的頁數
let itemNo=0;//item的個數

初始化state

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            //網路請求狀態
            error: false,
            errorInfo: "",
            dataArray: [],
            showFoot:0, // 控制foot， 0：隱藏footer  1：已載入完成,沒有更多資料   2 ：顯示載入中
            isRefreshing:false,//下拉控制
        }
    }

網路請求——獲取第n頁資料

    //網路請求——獲取第pageNo頁資料
    fetchData(pageNo) {
        //這個是js的訪問網路的方法
        fetch(REQUEST_URL+pageNo)
            .then((response) => response.json())
            .then((responseData) => {
                let data = responseData.items;
                let dataBlob = [];
                let i = itemNo;

                data.map(function (item) {
                    dataBlob.push({
                        key: i,
                        value: item,
                    })
                    i++;
                });
                itemNo = i;
                console.log("itemNo:"+itemNo);
                let foot = 0;
                if(pageNo>=totalPage){
                    foot = 1;//listView底部顯示沒有更多資料了
                }

                this.setState({
                    //複製資料來源
                    dataArray:this.state.dataArray.concat(dataBlob),
                    isLoading: false,
                    showFoot:foot,
                    isRefreshing:false,
                });
                data = null;
                dataBlob = null;
            })
            .catch((error) => {
                this.setState({
                    error: true,
                    errorInfo: error
                })
            })
            .done();
    }

準備載入元件
在初始化state之後，渲染元件前，請求網路資料。

    componentDidMount() {
        //請求資料
        this.fetchData( pageNo );
    }

渲染元件

    render() {
        //第一次載入等待的view
        if (this.state.isLoading && !this.state.error) {
            return this.renderLoadingView();
        } else if (this.state.error) {
            //請求失敗view
            return this.renderErrorView();
        }
        //載入資料
        return this.renderData();
    }

載入等待頁
利用上面介紹的ActivityIndicator，實現載入等待頁。

    renderLoadingView() {
        return (
            <View style={styles.container}>
                <ActivityIndicator
                    animating={true}
                    color='red'
                    size="large"
                />
            </View>
        );
    }

載入網路請求失敗頁
網路請求失敗，顯示失敗資訊頁。

    renderErrorView() {
        return (
            <View style={styles.container}>
                <Text>
                    Fail
                </Text>
            </View>
        );
    }

載入資料顯示頁

    renderData() {
        return (
            <FlatList
                data={this.state.dataArray}
                renderItem={this._renderItemView}
                ListFooterComponent={this._renderFooter.bind(this)}
                onEndReached={this._onEndReached.bind(this)}
                onEndReachedThreshold={1}
                ItemSeparatorComponent={this._separator}
            />

        );
    }

每個item元件渲染
renderItem根據行資料data渲染每一行的元件。

    //返回itemView
    _renderItemView({item}) {
        return (
            <View>
                <Text style={styles.title}>name: {item.value.name} ({item.value.stargazers_count}
                    stars)</Text>
                <Text style={styles.content}>description: {item.value.description}</Text>
            </View>
        );
    }

尾部元件的渲染
ListFooterComponent為尾部元件的渲染
當showFoot為2時顯示loading的動態效果是用ActivityIndicator來實現的。

     _renderFooter(){
        if (this.state.showFoot === 1) {
            return (
                <View style={{height:30,alignItems:'center',justifyContent:'flex-start',}}>
                    <Text style={{color:'#999999',fontSize:14,marginTop:5,marginBottom:5,}}>
                        沒有更多資料了
                    </Text>
                </View>
            );
        } else if(this.state.showFoot === 2) {
            return (
                <View style={styles.footer}>
                    <ActivityIndicator />
                    <Text>正在載入更多資料...</Text>
                </View>
            );
        } else if(this.state.showFoot === 0){
            return (
                <View style={styles.footer}>
                    <Text></Text>
                </View>
            );
        }
    }

上拉載入
上拉載入的關鍵onEndReached，當列表被滾動到距離內容最底部不足onEndReachedThreshold的距離時呼叫。注意：onEndReachedThreshold的值不是畫素單位而是比值，例如，0.5表示距離內容最底部的距離為當前列表可見長度的一半時觸發。

    _onEndReached(){
        //如果是正在載入中或沒有更多資料了，則返回
        if(this.state.showFoot != 0 ){
            return ;
        }
        //如果當前頁大於或等於總頁數，那就是到最後一頁了，返回
        if((pageNo!=1) && (pageNo>=totalPage)){
            return;
        } else {
            pageNo++;
        }
        //底部顯示正在載入更多資料
        this.setState({showFoot:2});
        //獲取資料
        this.fetchData( pageNo );
    }
}

分隔線
ItemSeparatorComponent行與行之間的分隔線元件,不會出現在第一行之前和最後一行之後。

    _separator(){
        return <View style={{height:1,backgroundColor:'#999999'}}/>;
    }

效果圖如下：

最後附上完整程式碼：

import React, {Component} from "react";
import {ActivityIndicator, FlatList, StyleSheet, Text, View} from "react-native";

const REQUEST_URL = 'https://api.github.com/search/repositories?q=javascript&sort=stars&page=';
let pageNo = 1;//當前第幾頁
let totalPage=5;//總的頁數
let itemNo=0;//item的個數
export default class LoadMoreDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            //網路請求狀態
            error: false,
            errorInfo: "",
            dataArray: [],
            showFoot:0, // 控制foot， 0：隱藏footer  1：已載入完成,沒有更多資料   2 ：顯示載入中
            isRefreshing:false,//下拉控制
        }
    }

    //網路請求——獲取第pageNo頁資料
    fetchData(pageNo) {
        //這個是js的訪問網路的方法
        fetch(REQUEST_URL+pageNo)
            .then((response) => response.json())
            .then((responseData) => {
                let data = responseData.items;
                let dataBlob = [];
                let i = itemNo;

                data.map(function (item) {
                    dataBlob.push({
                        key: i,
                        value: item,
                    })
                    i++;
                });
                itemNo = i;
                console.log("itemNo:"+itemNo);
                let foot = 0;
                if(pageNo>=totalPage){
                    foot = 1;//listView底部顯示沒有更多資料了
                }

                this.setState({
                    //複製資料來源
                    dataArray:this.state.dataArray.concat(dataBlob),
                    isLoading: false,
                    showFoot:foot,
                    isRefreshing:false,
                });
                data = null;
                dataBlob = null;
            })
            .catch((error) => {
                this.setState({
                    error: true,
                    errorInfo: error
                })
            })
            .done();
    }

    componentDidMount() {
        //請求資料
        this.fetchData( pageNo );
    }

    //載入等待頁
    renderLoadingView() {
        return (
            <View style={styles.container}>
                <ActivityIndicator
                    animating={true}
                    color='red'
                    size="large"
                />
            </View>
        );
    }

    //載入失敗view
    renderErrorView() {
        return (
            <View style={styles.container}>
                <Text>
                    Fail
                </Text>
            </View>
        );
    }

    //返回itemView
    _renderItemView({item}) {
        return (
            <View>
                <Text style={styles.title}>name: {item.value.name}</Text>
                <Text style={styles.content}>stars: {item.value.stargazers_count}</Text>
                <Text style={styles.content}>description: {item.value.description}</Text>
            </View>
        );
    }

    renderData() {
        return (

            <FlatList
                data={this.state.dataArray}
                renderItem={this._renderItemView}
                ListFooterComponent={this._renderFooter.bind(this)}
                onEndReached={this._onEndReached.bind(this)}
                onEndReachedThreshold={1}
                ItemSeparatorComponent={this._separator}
            />

        );
    }

    render() {
        //第一次載入等待的view
        if (this.state.isLoading && !this.state.error) {
            return this.renderLoadingView();
        } else if (this.state.error) {
            //請求失敗view
            return this.renderErrorView();
        }
        //載入資料
        return this.renderData();
    }
    _separator(){
        return <View style={{height:1,backgroundColor:'#999999'}}/>;
    }
    _renderFooter(){
        if (this.state.showFoot === 1) {
            return (
                <View style={{height:30,alignItems:'center',justifyContent:'flex-start',}}>
                    <Text style={{color:'#999999',fontSize:14,marginTop:5,marginBottom:5,}}>
                        沒有更多資料了
                    </Text>
                </View>
            );
        } else if(this.state.showFoot === 2) {
            return (
                <View style={styles.footer}>
                    <ActivityIndicator />
                    <Text>正在載入更多資料...</Text>
                </View>
            );
        } else if(this.state.showFoot === 0){
            return (
                <View style={styles.footer}>
                    <Text></Text>
                </View>
            );
        }
    }

    _onEndReached(){
        //如果是正在載入中或沒有更多資料了，則返回
        if(this.state.showFoot != 0 ){
            return ;
        }
        //如果當前頁大於或等於總頁數，那就是到最後一頁了，返回
        if((pageNo!=1) && (pageNo>=totalPage)){
            return;
        } else {
            pageNo++;
        }
        //底部顯示正在載入更多資料
        this.setState({showFoot:2});
        //獲取資料
        this.fetchData( pageNo );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    title: {
        fontSize: 15,
        color: 'blue',
    },
    footer:{
        flexDirection:'row',
        height:24,
        justifyContent:'center',
        alignItems:'center',
        marginBottom:10,
    },
    content: {
        fontSize: 15,
        color: 'black',
    }
});

react native學習筆記13——FlatList上拉載入

ActivityIndicator

屬性

載入頁

上拉載入的實現

思路

具體實現

react native學習筆記13——FlatList上拉載入

React Native學習筆記之--ListView和RefreshControl實現下拉重新整理

React-Native 學習筆記-Android開發平臺-開發環境搭建

React Native學習筆記 -- 開發環境搭建

react native學習筆記24——Modal實現自定義彈出對話方塊

React Native學習筆記2：Android環境搭建

React Native 學習筆記十三（原生模組之Toast）

React-Native學習筆記之：導航器Navigator實現頁面間跳轉

React Native 學習筆記（二）

React Native學習筆記一之搭建開發環境

React Native學習筆記之--向原生應用中整合RN頁面

react native 學習筆記----將react native嵌入到Android原生應用

React Native學習安卓手機上的返回鍵BackAndroid

React-Native學習筆記——正確整合到現有Android工程中

React Native 學習筆記（一）--init 專案和執行專案

react native 學習筆記-----理解redux的一個極其簡單例子

react native學習筆記15——Picker、Switch、Slider

React-Native學習筆記——技術棧及簡介

React Native學習筆記（一）Mac OS X下React Native的環境搭建

React Native學習筆記之--元件之間資料的傳遞和跳轉

react native學習筆記13——FlatList上拉載入

ActivityIndicator

屬性

載入頁

上拉載入的實現

思路

具體實現

相關推薦