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之间，代表下拉到总长度什么比例开始触发绑定的方法####
管理
