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

逃离我推掉我的手 2022-03-19 09:40 252阅读 0赞

近日在做项目时需要对页面加上下拉刷新的功能。也是几经波折，终于实现了下拉刷新的功能，现在做一下总结。  
因为项目是使用`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`事件，继而实现下拉刷新功能。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]  
**第一段代码：定义基础组件**

<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})
        })
      }

![在这里插入图片描述][20190219223146252.png]  
**分析：**  
根据官网可以看出：`refreshing`用于控制旋转加载的动画，当他为`false`时他是不显示旋转加载动画的，当下拉触发`onRefresh`事件，执行 `testRefresh`函数，将`refreshing`变为`true`，此时会显示旋转加载动画。当获取数据的函数执行完之后，将`refreshing变`为`false`，此时旋转加载动画消失，下拉刷新执行完毕。

## 二：巨人肩膀 —react-apollo ##

[https://www.apollographql.com/docs/react/essentials/queries.html][https_www.apollographql.com_docs_react_essentials_queries.html]  
看这个之前先看一下官网中的描述：  
![在这里插入图片描述][20190219224520309.png]  
**`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>

![在这里插入图片描述][20190220092535433.png]  
**分析：**  
加入变量`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：思考，分析，寻找，思考，实践，思考，实践，成功。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]: /images/20220319/53ddab8a9f5e48f58ec362f2567279e3.png
[20190219223146252.png]: /images/20220319/8d68ee2439d3444fbb053bf216ced636.png
[https_www.apollographql.com_docs_react_essentials_queries.html]: https://www.apollographql.com/docs/react/essentials/queries.html
[20190219224520309.png]: /images/20220319/785912af870448cfbdc607854caa2e5c.png
[20190220092535433.png]: /images/20220319/ed004f0d6e784eac8af5175bf11727d8.png