react-native FlatList 上拉刷新 下载加载更多

import React,{Component} from 'react';
import {View,Text, Image, FlatList,RefreshControl} from 'react-native';
export default class HomeScreen extends Component {
    static navigationOptions = {
        title: 'Home'
      }
    constructor(){
        super()
        this.state = {
            listData: [],
            refreshing: false
        }
    }
    componentDidMount(){
        this.changgeData()
    }
    changgeData(){
        //比如是从后台请求到的数据
        let data = [
            {id:'1',name:'张三23232'},
            {id:'2',name:'李四233'},
            {id:'3',name:'王五'},
            {id:'4',name:'赵六1'},
            {id:'5',name:'赵六2'},
            {id:'6',name:'赵六3'},
            {id:'7',name:'赵六4'},
            {id:'8',name:'赵六5'},
            {id:'9',name:'赵六6'},
            {id:'10',name:'赵六7'},
            {id:'11',name:'赵六8'},
            {id:'12',name:'赵六9'},
            {id:'13',name:'赵六10'},
            {id:'14',name:'赵六82'},
            {id:'15',name:'赵六92'},
            {id:'16',name:'赵六102'},
            {id:'17',name:'赵六83'},
            {id:'18',name:'赵六93'},
            {id:'19',name:'赵六104'},
            {id:'20',name:'赵六105'},
            {id:'132',name:'赵六102323'},
            {id:'143',name:'赵六823232'},
            {id:'145',name:'赵六9232'},
            {id:'126',name:'赵六10232'},
            {id:'137',name:'赵六823233'},
            {id:'138',name:'赵六923233'},
            {id:'129',name:'赵六12304'},
            {id:'220',name:'赵六123205'},
            {id:'12338',name:'赵六923223233'},
            {id:'12239',name:'赵六123323204223sss'},
            {id:'22230',name:'赵六123323205xxx'},
        ]
        //这里进行赋值
        this.setState({listData: data})
    }
    //模拟加载了新的数据，不然不会触发加载方法
    _onEndReached(){
        let data = [
            {id:'1',name:'张三23232'},
            {id:'2',name:'李四233'},
            {id:'3',name:'王五'},
            {id:'4',name:'赵六1'},
            {id:'5',name:'赵六2'},
            {id:'6',name:'赵六3'},
            {id:'7',name:'赵六4'},
            {id:'8',name:'赵六5'},
            {id:'9',name:'赵六6'},
            {id:'10',name:'赵六7'},
            {id:'11',name:'赵六8'},
            {id:'12',name:'赵六9'},
            {id:'13',name:'赵六10'},
            {id:'14',name:'赵六82'},
            {id:'15',name:'赵六92'},
            {id:'16',name:'赵六102'},
            {id:'17',name:'赵六83'},
            {id:'18',name:'赵六93'},
            {id:'19',name:'赵六104'},
            {id:'20',name:'赵六105'},
            {id:'132',name:'赵六102323'},
            {id:'143',name:'赵六823232'},
            {id:'145',name:'赵六9232'},
            {id:'126',name:'赵六10232'},
            {id:'137',name:'赵六823233'},
            {id:'138',name:'赵六923233'},
            {id:'129',name:'赵六12304'},
            {id:'220',name:'赵六123205'},
            {id:'12338',name:'赵六923223233'},
            {id:'12239',name:'赵六123323204223sss'},
            {id:'22230',name:'赵六123323205xxx'},
        ]
        this.setState({listData: data})
        console.log('上拉加载了')
    }
    _onRefresh = () => {
        this.setState({refreshing: true});
        console.log('xxxxxxxxxxxxxx')
        setTimeout(() => {
            this.setState({refreshing: false});
        }, 3000);
    }
    render() {
        return (
            <View style={{flex:1}}>
                <FlatList
                    style={{flex:1}}
                    data={this.state.listData}
                    renderItem={({item}) => <Text>{item.name}</Text>}
                    keyExtractor={(item) => item.id}
                    onEndReached={this._onEndReached.bind(this)}
                    onEndReachedThreshold={.1}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh}
                        />
                    }
                />
                <Text>Home  Screen</Text>
            </View>
        )
    }
}

上拉刷新 onRefresh 这里需要配置一个RefreshControl refreshing刷新动画

下拉加载 onEndReached这里绑定的方法需要指向this,需要注意的是，只有当页面重新渲染时才能再次触发该方法， 需要配合onEndReachedThreshold使用，范围在0-1之间，代表下拉到总长度什么比例开始触发绑定的方法