思路

• sectionList及FlatList都有屬性refreshControl、onEndReachedThreshold(距離底部還有多遠(yuǎn)觸發(fā)加載更多)、onEndReached(加載更多加載事件)
• 傳遞參數(shù)loadType區(qū)分加載事件，loadType為refresh下拉刷新事件，loadType為more加載更多事件
• 傳遞參數(shù)page，page為1下拉刷新事件，this.state.page += 1
  為加載更多事件
• react-redux框架：在reducer中發(fā)起網(wǎng)絡(luò)請(qǐng)求，添加狀態(tài)onRefresh,
  onRefresh根據(jù)傳過(guò)來(lái)的參數(shù)loadType判斷：onRefresh: loadType === refresh 下拉刷新?tīng)顟B(tài)，為true，onMore: loadType === more 加載更多狀態(tài)，為true，
• 收到數(shù)據(jù)： onRefresh 為false， onMore為false， 添加狀態(tài)hasMore, hasMore: 接收到的數(shù)據(jù)的長(zhǎng)度/pageSize === 傳過(guò)來(lái)的page，為true 還有更多數(shù)據(jù)，為false沒(méi)有更多數(shù)據(jù)了

代碼

前端js界面

_onMore = () => {
        // 有更多數(shù)據(jù)且不是正在加載更多狀態(tài)下，請(qǐng)求更多數(shù)據(jù)
        if (this.props.message.hasMore && !this.props.message.onMore) {
            const {action, navigation, message} = this.props;

            this.state.page = this.state.page + 1;
            this.state.loadType = PageConstant.more;

            let params = {
                page: this.state.page,
                loadType: this.state.loadType,
            };
            action.requestMyMessages(navigation, message.messageArray, params, this._onLoad);
        }
    };

_onRefresh = () => {
        if (!this.props.message.onRefresh) {
            const {action, navigation} = this.props;
            this.state.page = 1;
            this.state.loadType = PageConstant.refresh;

            let params = {
                page: 1,
                loadType: this.state.loadType,
            };
            action.requestMyMessages(navigation, [], params, this._onLoad)
        }
    };

reducer

case types.my.requestMyMessages:
          return {
              ...state,
              navigation: action.navigation,
              params: action.params,
              array: action.array,
              onRefresh: action.params.loadType === PageConstant.refresh,
              onMore: action.params.loadType === PageConstant.more,
              callback: action.callback,
          };
      case types.my.receiveMyMessages:
          return {
              ...state,
              onRefresh: false,
              onMore: false,
              hasMore: action.messageArray.length / PageConstant.pageSize === state.params.page,
              messageArray: action.messageArray,
              onSubmit: false,
          };