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之間，代表下拉到總長度什麼比例開始觸發繫結的方法