近日在做项目时需要对页面加上下拉刷新的功能。也是几经波折,终于实现了下拉刷新的功能,现在做一下总结。
因为项目是使用react-native
,并且配合react-apollo
完成页面的数据交互的,因此下拉刷新依旧需要以react-native
组件为基础,配合react-apollo
为react
封装好的组件中的功能来实现。
一:实现基础—react-native组件
ScrollView
和FlatList
的区别
在react-native
官方建议:除非你渲染的数据特别少,否则你都应该尽量使用FlatList
,哪怕他们用起来更麻烦一点。
FlatList
称为惰性渲染,他只对出现在屏幕中的元素进行渲染,他的渲染逻辑相对的复杂,因此在使用上也会相对的繁琐。
ScrollView
会简单粗暴的将所有的子元素一次性全部渲染出来,使用上是非常方便的,但是这种简单的渲染逻辑对于渲染性能和内存占用都是一种极大的浪费。
两者相比,当然是FlatList
更加优秀一点,但是惭愧的是,为了方便起见当前事例中我并没有使用FlatList
,在之后的需要再一次更改。
组件ScrollView
中有refreshCntrol
属性,它用于指定RefreshControl
组件,用于提供下拉刷新功能。当ScrollView
处于竖直方向上的起点位置时此时下拉他会触发一个onRefresh
事件,继而实现下拉刷新功能。
第一段代码:定义基础组件
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.testRefresh}
title={'正在加载中'}
/>
}
>
// 加载数据后向子组件传值,用于渲染界面
</ScrollView>
第二段代码:定义state和刷新函数
constructor(props){
super(props)
this.state={
refreshing: false
}
}
testRefresh = () => {
this.setState({
refreshing: true
})
// 函数执行区域,用于执行query数据,在获取到数据之后改变 refreshing
fetchData().then(() => {
this.setState({refreshing: false})
})
}
分析:
根据官网可以看出:refreshing
用于控制旋转加载的动画,当他为false
时他是不显示旋转加载动画的,当下拉触发onRefresh
事件,执行 testRefresh
函数,将refreshing
变为true
,此时会显示旋转加载动画。当获取数据的函数执行完之后,将refreshing变
为false
,此时旋转加载动画消失,下拉刷新执行完毕。
二:巨人肩膀 —react-apollo
https://www.apollographql.com/docs/react/essentials/queries.html
看这个之前先看一下官网中的描述:
refetch
!!!就是我们今天的主角
第一段代码:在封装好的Query
组件中使用refetch
return <Query query={PERSON_DYNAMICS}
variables={
// variables参数
}>
{({ loading, error, data, refetch }) => {
if (loading) return <Text>Loading...</Text>
if (error) return <Text>`Error!: ${error}`</Text>
return (
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.testRefresh}
title={'正在加载中'}
/>
}
>
<Container>
<Content>
{
this.state.isRefetch === true && refetch() && this.setState({ refreshing: false, isRefetch: false })
}
// 加载数据后向子组件传值,用于渲染界面
</Content>
</Container>
</ScrollView>
)
}}
</Query>
分析:
加入变量refetch
用于解构赋值 { loading, error, data, refetch }
在页面组件区域,当state
中的值isRefetch
为true
时执行refetch
,重新获取数据。refetch
中的variables
可以省略,默认为和之前Query中的variables一样。在获取完后将state
中的isRefetch
设置为false
。
第二段代码:定义state和刷新函数
constructor(props){
super(props)
this.state={
isRefetch: false,
refreshing: false
}
}
testRefresh = () => {
this.setState({
refreshing: true,
isRefetch: true
})
}
三:最后的话
1:借助react-apollo
封装好的组件,非常方便的实现了下拉刷新的功能。站在巨人的肩膀上。
2:思考,分析,寻找,思考,实践,思考,实践,成功。