React Native --网络请求，上拉加载，下拉刷新

RN写到现在的心情就是

timg.jpg

各种小问题不断。。。。哎全是坑啊！！！！！！
好了，收拾一下心情开始嘚吧嘚。

网络工具

React Native提供了和web标准一致的Fetch API，用于满足开发者访问网络的需求；
Fetch的基本用法请移步到RN官网查看，这里就不再描述了

请求封装

如今APP端大部分请求都是使用Get或者Post这两种，因此也是对Fetch进行一个简易封装，有点low希望大家指点一下。分为request和config两个文件；request作为网络请求文件，分别封装get和post请求，config最为配置文件，里面放着是api地址，请求头参数配置等

request.js文件

/**
 * Created by zhaoruisheng on 2018/2/1.
 */
//严格语法控制
'use strict'

import queryString from 'query-string'
import _ from  'lodash'
import config from './config'


//这里没有类的概念 ，requet就是对象
//requeset是个变量，但后面有个{}  所以是对象
let request ={

}
//设定params  json对象
request.get=(url,params)=> {
    if (params){
        url += '?' + queryString.stringify(params)
    }
    //发送网络请求
    return fetch(url)
        .then((response)=>response.json())
}

request.post=(url,body)=> {
    //合并 json对象
    let map = _.extend(config.map, {
        body:JSON.stringify(body)
    });

    console.log(body);
    console.log(body);
    return fetch(url,map)
        .then((response)=>response.json())
}

module.exports = request;//暴露出去

config.js文件

/**
 * Created by zhaoruisheng on 2018/2/1.
 */
'use strict'

const config ={
    api:{
        base:'https://www.baidu.com',//找一个能够使用的域名，这里不提供 
        list:'list'//接口
    },

    map:{
        method: 'POST',
        headers: {
            'Accept': 'application/json;charset=utf-8',//根据自己服务器返回数据格式设定，设定错误，数据返回类型不对
            'Content-Type': 'application/json;charset=utf-8',
        },
        timeout:8000,
    }
}

module.exports = config

listView
在RN中的ListView组件使用法法和iOS中的很像

<ListView
                    dataSource={this.state.dataSource}
                    renderRow={this._renderRow}
                    style={styles.listView}
                    onEndReached={this._fetchMoreData} //加载到底部触发
                    onEndReachedThreshold={20}//加载到距离底部还有多远触发
                    renderFooter={this._renderFooter}//footerView自定义一个视图 
   
</ListView>

在状态机中添加dataSource，用来实时更新数据

dataSource:new  ListView.DataSource({
                rowHasChanged:(r1,r2)=>r1!==r2,//这句代码是用来控制item数据的更新，当且仅当任意两行数据不相等时才去更新数据源。这里是RN中的一个性能优化。
            }),

网络请求成功后会刷新数据

//发送网络请求
        request.post(config.api.base+config.api.list,{
            classCode:101101,
            pageSize:15,
            pageNo:page
        }).then(
            (data) => {

                if (data.code == 200){
                    console.log(data)
                    //将服务器得到的数据缓存起来
                    dataSource:this.state.dataSource.cloneWithRows(
                                data.list;
                            ),
                        });
            }
        )

上拉加载

ListView中自带有上拉加载属性

onEndReached={this._fetchMoreData} //加载到底部触发
onEndReachedThreshold={20}//加载到距离底部还有多远触发
renderFooter={this._renderFooter}//footerView自定义一个视图

添加_fetchMoreData方法，用来实现上拉加载，实现上拉加载的方法有很多，大多根据业务需求，还有添加一些用户体验，例如：在网络比较差的时候，用户可能比较着急，请求数据还没返回来，然后又在滑动屏幕，进行了上拉加载操作，又进行了下拉刷新操作，多次操作后，数据返回比较混乱，因此进行体验优化，
总共分为3步走

1、发送网络请求
2、保存请求参数
3、参数对比

React Native --网络请求，上拉加载，下拉刷新

网络工具

请求封装

上拉加载

推荐阅读更多精彩内容