React Native中使用FlatList组件实现上拉刷新、下拉加载

使用到的FlatList属性

1. data：值为array 渲染列表的数据源，目前只支持普通数组
2. renderItem：值为function 从data中挨个取出数据并渲染到列表中。
3. ListEmptyComponent：组件 data为空数组是渲染该组件
4. ListFooterComponent：组件 列表尾部渲染的组件
5. onEndReachedThreshold：number此参数是一个比值，不是像素单位。比如，0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发
6. onEndReached：function当距离底部不足onEndReachedThreshold的距离时调用(与第5条配合使用，可用于分页)
7. onRefresh：function 加载数据时执行的方法，于refreshing配合使用。如果需要修改指示器的颜色可以使用refreshControl属性
8. refreshing：在等待加载新数据时将此属性设为 true，列表就会显示出一个正在加载的符号
9. progressViewOffset：number 设置下拉加载更多指示器的位置

示例代码

App.js

import React from 'react'
import {createStackNavigator,createAppContainer} from 'react-navigation'
import Home from './components/Home'
import FlatListPage from './components/lists/FlatListPage'

const StackNavigator = createStackNavigator(
    {
        Home:{
            screen: Home,
            navigationOptions:{
                title:"首页"
            }
        },
        FlatListPage:{
            screen: FlatListPage,
            navigationOptions:{
                title:"FlatList"
            }
        }
    },
    {
        headerLayoutPreset:"center"
    }
)
const AppContainer = createAppContainer(StackNavigator)
export default AppContainer

Home.js

import React from 'react'
import {View,Button,StyleSheet} from 'react-native'
export default class Home extends React.Component{
    render(){
        return(
            <View>
                <View style={style.button}>
                    <Button title={'打开FlatList列表页'} 
                    onPress={()=>this.props.navigation.navigate('FlatListPage')}
                    style={style.button}/>
                </View>
            </View>
        )
    }
}

const style=StyleSheet.create({
    button:{
        marginBottom: 10
    }
})

FlatList.js

import React from 'react'
import {FlatList,View,Text,StyleSheet} from 'react-native'

export default class FlatListPage extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            refresh:false,
            listData:[]
        }
    }
    getNewData(){
        this.setState({
            refresh:true
        })
        let newData = []
        for (let i=0;i<2;i++) {
            newData.push('new data')
        }
        setTimeout(()=>{
            this.setState({
                refresh:false,
                listData:[...newData,...this.state.listData]
            })
        },1500)
    }
    componentDidMount(){
        this.getData()
    }
    getData(){
        let newData = []
        for (let i=this.state.listData.length;i<this.state.listData.length+5;i++) {
            newData.push(i)
        }
        setTimeout(()=>{
            this.setState({
                listData:[...this.state.listData,...newData]
            })
        },1500)
    }
    render(){
        return(
            <View>
                <FlatList
                    // 渲染的数据源 8
                    data={this.state.listData}

                    renderItem={(data)=>{
                        return <Text style={style.item}>{data.item}</Text>
                    }}

                    // 下拉刷新数据
                    refreshing={this.state.refresh}
                    onRefresh={()=>{
                        this.getNewData()
                    }}

                    // 上拉加载更多数据
                    onEndReachedThreshold={.3}
                    onEndReached={()=>{
                        this.getData()
                    }}

                    ListEmptyComponent={
                    <Text style={{textAlign: "center",marginBottom: 10}}>暂无数据</Text>}
                    
                    ListFooterComponent={
                    <Text style={{textAlign: "center",marginBottom: 10}}>获取更多数据</Text>}
                    // 列表key值
                    keyExtractor={(item,index)=>index}
                    //设置下拉加载更多的指示器的位置
                    progressViewOffset={50} />
            </View>
        )
    }
}
const style = StyleSheet.create({
    item:{
        backgroundColor:"green",
        marginBottom: 10,
        height:150,
        lineHeight:150,
        textAlign: "center"
    }
})