React Native 配合react-apollo实现下拉刷新

近日在做项目时需要对页面加上下拉刷新的功能。也是几经波折，终于实现了下拉刷新的功能，现在做一下总结。
因为项目是使用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：思考，分析，寻找，思考，实践，思考，实践，成功。