版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zyzxrj/article/details/80079641
最近在尝试RN上的一些编码,感受是编译环境真的很不稳定,有时候添加一个依赖包,直接就导致项目出错了,需要移除重新添加。提醒大家添加依赖组件的时候最好把服务停了,项目停止运行以保证稳定性。
本来用的是FlatList组件,这个新组建用起来简单很多,但是加上逻辑代码会触发很多遍下拉刷新方法,目前没有很好的解决思路,所以换成了老组件ListView,差异不大。
//1、首先定义换成列表数组信息、当前页码信息的集合
let cacheResults={
pageIndex:1,
pageSize:10,
items:[]
}
//2、定义状态机
constructor(props) {
super(props)
this.state = {
// data: [],
data:new ListView.DataSource({
rowHasChanged:(r1,r2)=>r1!==r2,
}),
isFirstLoad: true, //是否是第一次加载,这里为了防止上拉加载更多方法多次触发
isRefreshing: false, //当前刷新状态
isLoadingTail: false, //尾部刷新
isNoMoreData: false, //是否还有数据
}
}
//3、渲染界面
render() {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.data}
renderRow={(rowData) => this.renderRow(rowData)}
onEndReached={this._loadMoreData}
onEndReachedThreshold={20}
renderFooter={this._renderFooter}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this._onRefresh}
/>
}
/>
</View>
);
}
//4、第一次页码加载完成调用
componentDidMount() {
console.log('componentDidMount')
//发送网络请求
// this.loadMockData()
cacheResults.items = []
cacheResults.nextPage = 1
this.loadActualData(1)
}
//5、下拉刷新
_onRefresh= () => {
if(this.state.isRefreshing) {
return
}
cacheResults.nextPage = 1
this.loadActualData(1)
}
//6、上拉加载更多
_loadMoreData= () => {
if(this.state.isFirstLoad) { //第一次进来会走一次,这次不触发事件
this.setState({
isFirstLoad:false
});
return
}
if(this.state.isNoMoreData || this.state.isLoadingTail) {//防止多次调用
return
}
cacheResults.nextPage += 1
let pageIndex = cacheResults.nextPage
console.log('_loadMoreData'+cacheResults.nextPage)
this.loadActualData(pageIndex)
}
//7、加载数据、处理上拉下拉判断逻辑,这块有开发经验的可以自己写,主要提供思路
loadActualData(pageIndex) {
console.log('loadActualData:' + pageIndex)
if(pageIndex !== 1) {//加载更多
this.setState({
isLoadingTail:true
});
}else {
this.setState({
isRefreshing:true
})
}
let liveStatus = this.state.liveStatus;
// console.log('liveStatus:'+liveStatus)
let map = {
"_from": "yjk",
"appId": "101",
"pageIndex":pageIndex,
}
let url = config.actualListApi.base + config.actualListApi.subUrl
request.post(url,map).then((response) => {
//这边是封装的网络请求方法,自己写代替
// console.log('response.code'+response.code)
// console.log('response.msg'+response.msg)
// console.log('网络请求结果'+JSON.stringify(response.data))
if (response.code === 200) {//网络请求成功
let list = response.data.list
let items = cacheResults.items.slice()
if(pageIndex !== 1) {
items = items.concat(list)
}else {
items = list
}
//保存数据
cacheResults.items = items
console.log('当前到了第:'+cacheResults.items.length+'个!');
// 默认每十条为一页,不足十条,则说明没有更多数据
if(list.length < 10) {
console.log('<10');
this.setState({
isNoMoreData: true
});
}else {
console.log('>=10');
this.setState({
isNoMoreData: false
});
}
if(pageIndex !== 1) {//加载更多
this.setState({
// data: cacheResults.items,
data:this.state.data.cloneWithRows(
cacheResults.items
),
isLoadingTail:false
});
}else{//加载新数据
this.setState({
data:this.state.data.cloneWithRows(
cacheResults.items
),
isRefreshing:false
});
}
}
}).catch((error) => { //如果出错
console.log('网络请求出错'+error);
if(pageIndex !== 1) {
this.setState({
isLoadingTail:false
});
}else {
this.setState({
isRefreshing:false
});
}
})
}
//这边是UI界面绘制
// cell
renderRow(item) {
return (
<StreamCell rowData={item}/>
)
}
//顶部用得是自带的菊花,不需要特地去重写
//自定义Footer视图
_renderFooter = ()=>{
if(this.state.isNoMoreData){
return(
<View style={styles.loadingMore}>
<Text style={styles.loadingText}>没有更多数据啦...</Text>
</View>
);
}
//显示一朵小菊花!!
return(
<ActivityIndicator
style={styles.loadingMore}
/>
)
}