react native基於FlatList下拉重新整理上拉載入實現

摘要： 官方介紹： https://reactnative.cn/docs/flatlist/ react native 的上拉載入一直困擾著自己，一直用的第三方元件，但是可維護性不高，而且也不太好用，最近工作沒那麼忙，就研究下了官方的FlatList，做出來的成果，比第三方元件流暢度高好多，...

官方介紹： ofollow,noindex">https://reactnative.cn/docs/flatlist/

react native 的上拉載入一直困擾著自己，一直用的第三方元件，但是可維護性不高，而且也不太好用，最近工作沒那麼忙，就研究下了官方的FlatList，做出來的成果，比第三方元件流暢度高好多，而且也很好用

下面是效果圖：

總體思路就是：就是計算螢幕高度，然後減去導航的頭部，根據列表高度計算出每頁的個數,然後向上取整。這樣做的目的是：防止不滿屏狀態下的，onEndReached函式的主動觸發。

方法實現：

//滿屏頁面判斷
fullScreenJusting(ItemHeight) {
const screnHeight = screnInfo.size.height;//螢幕高度
//計算列表個數
const listNum = (screnHeight - 40) / ItemHeight;
return Math.ceil(listNum);
}

下拉重新整理用的是 RefreshControl

官網地址： https://reactnative.cn/docs/refreshcontrol/#progressbackgroundcolor

具體程式碼：

import React, { Component } from 'react';
import {
View,
Text,
Image,
StyleSheet,
FlatList,
RefreshControl,
ActivityIndicator,
} from 'react-native';
import { SafeAreaView } from 'react-navigation';
import screnInfo from '../utils/View';
import BaseStyle from '../constants/Style';
import { QUESTION_LIST } from '../constants/Api';
import { form_req } from '../utils/Request';

export default class TestScreen extends Component {
constructor(props) {
super(props);
this.state = {
data: [
],
refreshing: false,
fresh: true,
animating: true,
nomore: false,
pageSize: 0,
pageNumber: 1,
};
}
componentDidMount() {//初始化的時候要判斷長度 控制上拉載入

const ListNums = this.fullScreenJusting(50);
this.setState({
pageSize: ListNums
})
this.onEndReachedCalled = false;
this.getOrderList(ListNums, 1, true);

}
//滿屏頁面判斷
fullScreenJusting(ItemHeight) {
const screnHeight = screnInfo.size.height;//螢幕高度
//計算列表個數
const listNum = (screnHeight - 40) / ItemHeight;
return Math.ceil(listNum);
}

getOrderList(ListNums, pageNumber, fresh) {
let nomore;
form_req(QUESTION_LIST, {
page: pageNumber,
perpage: ListNums,
}).then(res => {
if (res.code == 200) {
const item = res.data;
if (item.length < ListNums) {
nomore = true
} else {
nomore = false
}
if (fresh) {
this.setState({
data: item,
nomore: nomore
})

} else {
this.setState({
data: this.state.data.concat(item),
nomore: nomore,
})
}
// this.onEndReachedCalledDuringMomentum = true;

} else {

}
});
}

renderItem = item => {
return (
<View style={styles.item} key={item.id}>
<Text>{item.name}</Text>
</View>
);
};
//列表線
ItemSeparatorComponent = () => {
return <View style={styles.baseLine} />;
};
//頭部
ListHeaderComponent = () => { };
//尾部
ListFooterComponent = () => {
return (
<View style={styles.bottomfoot}>
{
this.state.data.length != 0 ?
this.state.nomore ? (
<Text style={styles.footText}>- 我是有底線的 -</Text>
) : (
<View style={styles.activeLoad}>
<ActivityIndicator size="small" animating={this.state.animating} />
<Text style={[styles.footText, styles.ml]}>載入更多...</Text>
</View>
)
:
null
}

</View>
);
};
//為空時
ListEmptyComponent() {
return (
<View style={styles.noListView}>
{/* <Image
style={styles.noListImage}
source={require('../images/status/order_no_record.png')}
/> */}
<Text style={styles.NoListText}>暫無訂單</Text>
</View>
);
}
_keyExtractor = (item,index) => item.id;

_onEndReached = () => {
if (!this.state.nomore && this.onEndReachedCalled ) {
this.getOrderList(this.state.pageSize, ++this.state.pageNumber, false);
}
this.onEndReachedCalled=true;

};
_onRefresh() {
this.setState({ nomore: false, pageNumber: 1 }, () => {
this.getOrderList(this.state.pageSize, 1, true);
})

}

render() {
return (
<SafeAreaView style={BaseStyle.flex}>
<View style={styles.listConten}>
<FlatList
data={this.state.data}
keyExtractor={this._keyExtractor}
onEndReached={this._onEndReached}
refreshing={true}
renderItem={({ item }) => this.renderItem(item)}
ItemSeparatorComponent={this.ItemSeparatorComponent}
ListEmptyComponent={this.ListEmptyComponent}
ListFooterComponent={this.ListFooterComponent}
onEndReachedThreshold={0.1}
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
colors={['#ff0000', '#00ff00', '#0000ff']}
progressBackgroundColor={"#ffffff"}
onRefresh={() => {
this._onRefresh();
}}
/>
}
/>
</View>
</SafeAreaView>
);
}
}

const styles = StyleSheet.create({
listConten: {
flex: 1,
backgroundColor: '#ffffff',
},
item: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: "center",
backgroundColor: '#ffffff',
height: 50,
},
baseLine: {
width: screnInfo.size.width,
height: 1,
backgroundColor: '#eeeeee',
},
noListView: {
width: screnInfo.size.width,
height: screnInfo.size.height - 140,
justifyContent: 'center',
alignItems: 'center',
},
NoListText: {
marginTop: 15,
fontSize: 18,
color: '#999999',
},
noListImage: {
width: 130,
height: 140,
},
bottomfoot: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 10,
},
footText: {
marginTop: 5,
fontSize: 12,
color: '#999999',
},

activeLoad: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
ml: {
marginLeft: 10,
},
});

這裡的坑就是：當初始化進來頁面的時候 上拉會主動觸發，所以這裡加了一個開關 this.onEndReachedCalled = false； 初始化給一個false 當觸發了 設為true,放在調取介面之後

程式碼都很簡單易懂~ 有什麼不懂的，或者有什麼問題請留言