自学React-native （第十天）--使用FlatList实现下拉刷新和下拉加载更多
1. 前言:
终于要开始编写业务代码了,今天将组合前面9天学习的内容来制作一个「最热」功能.
2.代码
View层page/PopularTab.js
import React, { Component } from "react";
import { FlatList, View, Text, StyleSheet, Button, RefreshControl, ActivityIndicator ,DeviceInfo} from "react-native";
import PopularItem from "../common/PopularItem";
import { connect } from "react-redux";
import actions from "../action/index";
import Toast, { DURATION } from 'react-native-easy-toast';
// import NavigationBar from "../common/NavigationBar";
const THEME_COLOR = "red";
const URL = 'https://api.github.com/search/repositories?q=';
const QUERY_STR = '&sort=stars';
const PAGE_SIZE = 10;
class PopularTab extends Component {
constructor(props) {
super(props);
const { tabLabel } = this.props;
this.storeName = tabLabel;
this.canLoadMore = false;//防止在初始化时就执行一次loadmore
}
genFetchUrl = (storeName) => {
return `${URL}${storeName}${QUERY_STR}`
}
loadData = (more) => {
const { onLoadPopularData, onLoadMorePopular, popular } = this.props;
const url = this.genFetchUrl(this.storeName);
const popularData = popular[this.storeName];
const that = this;
if (more) {
onLoadMorePopular(this.storeName, url, PAGE_SIZE, popularData.pageIndex + 1, popularData.dataArray, function () {
that.refs.toast.show('没有更多了');
});
}
else {
onLoadPopularData(this.storeName, url, PAGE_SIZE, function () {
that.refs.toast.show('已是最新');
});
}
}
componentDidMount() {
this.loadData();
}
renderItem = (data) => {
const item = data.item;
return <PopularItem item={item} />
}
//到达底部后触发
onEndReachedHandler = () => {
// console.log("没有更多了");
this.loadData(true);
}
EndComponent = (props) => {
return <View style={styles.footerComponent}>
<ActivityIndicator style={styles.activity}
animating={true}
size={"large"}
color={THEME_COLOR}
></ActivityIndicator>
<Text>正在加载更多</Text>
</View>;
}
render() {
const { popular } = this.props;
let store = popular[this.storeName];//动态获取state
let { EndComponent, canLoadMore } = this;
if (!store) {
store = {
projectModes: [],
isLoading: true,
isLoadingMore: false
};
}
return (
<View style={styles.container}>
{
store && (!store.projectModes || store.projectModes.length == 0) ?
<View style={styles.topActivity}>
<ActivityIndicator style={styles.activity}
animating={true}
size={"large"}
// style={{fontSize:30}}
color={THEME_COLOR}
/>
<Text style={{ color: THEME_COLOR }}>loading</Text>
</View>
:
<FlatList
data={store.projectModes}
renderItem={data => this.renderItem(data)}
keyExtractor={item => "" + item.id}
refreshControl={
<RefreshControl
title={"loading"}
titleColor={THEME_COLOR}
colors={[THEME_COLOR]}
refreshing={store.isLoading}
tintColor={THEME_COLOR}
// size={"large"}
onRefresh={() => {
this.loadData();
}}
style={{ fontSize: 30 }}
/>
}
ListFooterComponent={store.isLoadingMore ? <EndComponent /> : ""}
//到达底部
onEndReached={
() => {
setTimeout(() => {
if (!this.canLoadMore) return;
this.onEndReachedHandler()
this.canLoadMore = false;
console.log("---------------------到达底部---------------------");
}, 100);
}
}
onEndReachedThreshold={0.5}
onMomentumScrollBegin={() => {
this.canLoadMore = true;
console.log("---------------------开启loadMore---------------------");
}}
/>
}
<Toast ref="toast"
style={{ backgroundColor: 'black' }}
position='top'
positionValue={200}
fadeInDuration={750}
fadeOutDuration={1000}
opacity={0.8}
textStyle={{ color: 'white' }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
topActivity: {
marginVertical: 20,
justifyContent: "center",
alignItems: "center",
},
container: {
flex: 1,
},
footerComponent: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 25
},
activity: {
marginBottom: 5
}
});
const mapStateToProps = state => ({
popular: state.popular
});
const mapDispatchToProps = dispatch => ({
onLoadPopularData: (storeName, url, pageSize, callback) => dispatch(actions.onLoadPopularData(storeName, url, pageSize, callback)),
onLoadMorePopular: (storeName, url, pageSize, pageIndex, dataArray, callback) => dispatch(actions.onLoadMorePopular(storeName, url, pageSize, pageIndex, dataArray, callback))
});
const PoplarTabPage = connect(mapStateToProps, mapDispatchToProps)(PopularTab);
export default PoplarTabPage;
这里使用了:
- FlatList 控件.带滚动条的列表组件.
- RefreshControl控件.下拉组件,用于自定义下方加载组件.
- ActivityIndicator控件.在RefreshControl中的内嵌组件,用于自定义loading图标动画.
- react-native-easy-toast.RN的toast通用控件.
遇到的问题:
- 说实话这里遇到的最大问题其实是redux的流程调试,加载的三个阶段state如何控制,产生干扰如何处理,如何排错等等基本消耗了coder的60%时间,所以养成良好的编码习惯是非常重要的,简单说就是编码习惯和思维方式.不过这里就不展开了.
- RefreshControl控件的失效问题.当页面被createMaterialTopTabNavigator 封装后,如果页面内部有FlatList,那么第一个tab页面的refreshing属性会失效,也就是尽管refreshing=true,但是loading动画就是不出现,排错到navigation就没法进行下去了,貌似在不通过navigation封装的页面不会有这个问题出现,尝试了半天无果的情况下我使用了
ActivityIndicator模拟第一次loading动画的方式解决了这个问题,不过并不完美,头次动画由于和后续动画尺寸上无法一致,会导致比较难看的问题,哪位有解决的方案请私信本人.下面是我的处理方式:
<View style={styles.container}>
{
store && (!store.projectModes || store.projectModes.length == 0) ?
<View style={styles.topActivity}>
<ActivityIndicator style={styles.activity}
animating={true}
size={"large"}
// style={{fontSize:30}}
color={THEME_COLOR}
/>
<Text style={{ color: THEME_COLOR }}>loading</Text>
</View>
:
<FlatList
data={store.projectModes}
renderItem={data => this.renderItem(data)}
keyExtractor={item => "" + item.id}
refreshControl={
<RefreshControl
title={"loading"}
titleColor={THEME_COLOR}
colors={[THEME_COLOR]}
refreshing={store.isLoading}
tintColor={THEME_COLOR}
// size={"large"}
onRefresh={() => {
this.loadData();
}}
style={{ fontSize: 30 }}
/>
}
ListFooterComponent={store.isLoadingMore ? <EndComponent /> : ""}
//到达底部
onEndReached={
() => {
setTimeout(() => {
if (!this.canLoadMore) return;
this.onEndReachedHandler()
this.canLoadMore = false;
console.log("---------------------到达底部---------------------");
}, 100);
}
}
onEndReachedThreshold={0.5}
onMomentumScrollBegin={() => {
this.canLoadMore = true;
console.log("---------------------开启loadMore---------------------");
}}
/>
}
<Toast ref="toast"
style={{ backgroundColor: 'black' }}
position='top'
positionValue={200}
fadeInDuration={750}
fadeOutDuration={1000}
opacity={0.8}
textStyle={{ color: 'white' }}
/>
</View>
3.后记
这篇文章由于记录的是业务代码的编写情况,所以没写太多的知识点,但是说真的看教程和实际写还是很不同的,今天我是决定看了基本思路就完全自己实现这个“最热”功能,真的是收获良多,而这些收获是没法说出来的:比如调试的方式,调试工具的配置,代码的优化等等,建议大家看教程的时候多动手多记录.