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

文章目录

• 使用到的FlatList属性
• 示例代码
• App.js
• Home.js
• FlatList.js

使用到的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"
}
})