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、参数对比
