React에서 Native를 사용하여 풀업으로 로드된 목록을 새로 고치는 사용자 정의 풀다운을 구현하는 방법

이 글에서는 React Native에서 풀업 로드 목록을 새로 고치기 위해 풀다운을 커스터마이징하는 예를 주로 소개하고 있으니 참고용으로 올려보겠습니다.

목록 페이지는 모바일 개발에서 매우 일반적인 페이지입니다. React Native에서는 일반적으로 FlatList 또는 SectionList 구성 요소를 사용하여 이러한 목록 보기를 구현합니다. 일반적으로 목록 페이지에는 로드하고 표시해야 하는 데이터가 많이 있습니다. 이때 페이징 로딩을 사용하므로 목록 구성 요소의 경우 풀다운 새로 고침 및 풀업 로딩을 구현하는 것이 필수적입니다. 많은 경우.

이 글은 FlatList 기반으로 풀다운 새로고침과 풀업 로딩을 지원하는 RefreshListView를 캡슐화한 것입니다. 원래 FlatList를 캡슐화한 후 풀업, 풀다운 새로고침을 호출하는 것이 매우 편리합니다.

풀다운 새로 고침 구현은 매우 간단합니다. 여기서는 FlatList 자체의 속성을 사용하여

onRefresh를 구현합니다. 이 옵션을 설정한 후 표준 RefreshControl 컨트롤이 목록 헤드에 추가되어 "풀다운 새로 고침" 기능. 동시에 새로 고침 속성을 올바르게 설정해야 합니다.

refreshing —— 새로 고침 컨트롤의 표시 및 숨기기를 제어하는 ​​데 사용되는 부울 값입니다. 새로 고침이 완료된 후 false로 설정됩니다.

이 두 가지 속성을 설정하면 FlatList 헤더의 새로 고침 작업을 실현할 수 있습니다. 컨트롤은 기본 스타일을 사용하여 해당 시스템의 구성 요소를 사용합니다.

더 많은 것을 로드하기 위해 끌어올리는 데 초점이 맞춰져 있습니다. React Native의 목록 구성 요소에는 이 기능이 없으며 우리가 직접 구현해야 합니다. 풀업 로딩의 경우 일반적으로 여러 가지 상태가 있습니다. 여기서는 풀업 로딩 상태를 저장하기 위해 RefreshState.js 파일을 생성합니다.

export default {
 Idle: 'Idle',        // 初始状态，无刷新的情况
 CanLoadMore: 'CanLoadMore', // 可以加载更多，表示列表还有数据可以继续加载
 Refreshing: 'Refreshing',  // 正在刷新中
 NoMoreData: 'NoMoreData',  // 没有更多数据了
 Failure: 'Failure'     // 刷新失败
}

그런 다음 이러한 상태를 기반으로 RefreshFooter 구성 요소를 캡슐화하여 다음에 따라 다른 콘텐츠를 표시할 수 있습니다.

import React, {Component} from 'react';
import {View, Text, ActivityIndicator, StyleSheet, TouchableOpacity} from 'react-native';
import RefreshState from './RefreshState';
import PropTypes from 'prop-types';

export default class RefreshFooter extends Component {

 static propTypes = {
  onLoadMore: PropTypes.func,   // 加载更多数据的方法
  onRetryLoading: PropTypes.func, // 重新加载的方法
 };
 
 static defaultProps = {
  footerRefreshingText: "努力加载中",
  footerLoadMoreText: "上拉加载更多",
  footerFailureText: "点击重新加载",
  footerNoMoreDataText: "已全部加载完毕"
 };
 
 render() {
  let {state} = this.props;
  let footer = null;
  switch (state) {
   case RefreshState.Idle:
    // Idle情况下为null，不显示尾部组件
    break;
   case RefreshState.Refreshing:
    // 显示一个loading视图
    footer =
     <View style={styles.loadingView}>
      <ActivityIndicator size="small"/>
      <Text style={styles.refreshingText}>{this.props.footerRefreshingText}</Text>
     </View>;
    break;
   case RefreshState.CanLoadMore:
    // 显示上拉加载更多的文字
    footer =
     <View style={styles.loadingView}>
      <Text style={styles.footerText}>{this.props.footerLoadMoreText}</Text>
     </View>;
    break;
   case RefreshState.NoMoreData:
    // 显示没有更多数据的文字，内容可以自己修改
    footer =
     <View style={styles.loadingView}>
      <Text style={styles.footerText}>{this.props.footerNoMoreDataText}</Text>
     </View>;
    break;
   case RefreshState.Failure:
    // 加载失败的情况使用TouchableOpacity做一个可点击的组件，外部调用onRetryLoading重新加载数据
    footer =
     <TouchableOpacity style={styles.loadingView} onPress={()=>{
      this.props.onRetryLoading && this.props.onRetryLoading();
     }}>
      <Text style={styles.footerText}>{this.props.footerFailureText}</Text>
     </TouchableOpacity>;
    break;
  }
  return footer;
 }
}

const styles = StyleSheet.create({
 loadingView: {
  flexDirection: &#39;row&#39;,
  justifyContent: &#39;center&#39;,
  alignItems: &#39;center&#39;,
  padding: 15,
 },
 refreshingText: {
  fontSize: 12,
  color: "#666666",
  paddingLeft: 10,
 },
 footerText: {
  fontSize: 12,
  color: "#666666"
 }
});

propTypes는 외부 호출을 위한 RefreshFooter 구성 요소에 대해 정의하는 메서드입니다. 메서드 유형은 Facebook의 prop-types 종속성 라이브러리에 따라 지정되어야 합니다. 오류가 발생하지 않도록 원사 추가 소품 유형 설치를 사용하는 것이 가장 좋습니다. 이는 런타임 유형 확인에 사용됩니다. 자세한 내용을 보려면 여기를 클릭하세요.

defaultProps에서는 외부에 값을 전달하여 수정할 수 있는 다양한 상태의 여러 기본 텍스트 콘텐츠를 정의합니다.

다음 단계는 이 RefreshListView를 구현하는 것입니다. 우선, 이 RefreshListView에는 헤드 새로 고침 및 테일 새로 고침 호출 메서드가 있어야 하며, 데이터를 호출하는 특정 메서드는 외부에서 구현되어야 한다는 점을 분명히 해야 합니다. 먼저 RefreshFooter와 같은 두 가지 메소드를 정의하십시오.

static propTypes = {
 onHeaderRefresh: PropTypes.func, // 下拉刷新的方法，供外部调用
 onFooterRefresh: PropTypes.func, // 上拉加载的方法，供外部调用
};

위에서 언급한 것처럼 헤드의 풀다운 새로 고침은 FlatList 자체 기능을 사용하여 구현됩니다. 헤더를 새로 고칠지 여부를 제어하는 ​​새로 고침 속성의 값으로 isHeaderRefreshing 부울 값을 정의해야 합니다. 표시 여부. 동시에 isFooterRefreshing을 정의하여 tail 구성 요소의 새로 고침 상태를 결정합니다. 현재 꼬리 구성 요소의 상태를 RefreshFooter 값으로 설정하려면 footerState를 정의합니다.

constructor(props) {
  super(props);
  this.state = {
   isHeaderRefreshing: false, // 头部是否正在刷新
   isFooterRefreshing: false, // 尾部是否正在刷新
   footerState: RefreshState.Idle, // 尾部当前的状态，默认为Idle，不显示控件
  }
 }

render 함수는 다음과 같습니다.

render() {
  return (
   <FlatList
    {...this.props}
    onRefresh={()=>{ this.beginHeaderRefresh() }}
    refreshing={this.state.isHeaderRefreshing}
    onEndReached={() => { this.beginFooterRefresh() }}
    onEndReachedThreshold={0.1} // 这里取值0.1（0~1之间不包括0和1），可以根据实际情况调整，取值尽量小
    ListFooterComponent={this._renderFooter}
   />
  )
 }
 
 _renderFooter = () => {
  return (
   <RefreshFooter
    state={this.state.footerState}
    onRetryLoading={()=>{
     this.beginFooterRefresh()
    }}
   />
  )
 };

위 코드에는 BeginHeaderRefresh와 BeginFooterRefresh라는 두 가지 메소드가 있음을 알 수 있습니다. 이 두 가지 메소드는 새로 고침을 호출하는 데 사용되지만 판단해야 할 몇 가지 논리적인 상황이 있습니다. 새로 고침 전에. 예를 들어, 헤드와 테일을 동시에 새로 고칠 수 없습니다. 그렇지 않으면 데이터 처리 결과에 영향을 미칠 수 있으므로 새로 고치는 동안 반복적인 새로 고침 작업을 방지해야 합니다.

/// 开始下拉刷新
beginHeaderRefresh() {
 if (this.shouldStartHeaderRefreshing()) {
  this.startHeaderRefreshing();
 }
}

/// 开始上拉加载更多
beginFooterRefresh() {
 if (this.shouldStartFooterRefreshing()) {
  this.startFooterRefreshing();
 }
}

/***
 * 当前是否可以进行下拉刷新
 * @returns {boolean}
 *
 * 如果列表尾部正在执行上拉加载，就返回false
 * 如果列表头部已经在刷新中了，就返回false
 */
shouldStartHeaderRefreshing() {
 if (this.state.footerState === RefreshState.refreshing ||
  this.state.isHeaderRefreshing ||
  this.state.isFooterRefreshing) {
  return false;
 }
 return true;
}

/***
 * 当前是否可以进行上拉加载更多
 * @returns {boolean}
 *
 * 如果底部已经在刷新，返回false
 * 如果底部状态是没有更多数据了，返回false
 * 如果头部在刷新，则返回false
 * 如果列表数据为空，则返回false（初始状态下列表是空的，这时候肯定不需要上拉加载更多，而应该执行下拉刷新）
 */
shouldStartFooterRefreshing() {
 if (this.state.footerState === RefreshState.refreshing ||
  this.state.footerState === RefreshState.NoMoreData ||
  this.props.data.length === 0 ||
  this.state.isHeaderRefreshing ||
  this.state.isFooterRefreshing) {
  return false;
 }
 return true;
}

startHeaderRefreshing 및 startFooterRefreshing의 논리는 다음과 같습니다.

/// 下拉刷新，设置完刷新状态后再调用刷新方法，使页面上可以显示出加载中的UI，注意这里setState写法
startHeaderRefreshing() {
 this.setState(
  {
   isHeaderRefreshing: true
  },
  () => {
   this.props.onHeaderRefresh && this.props.onHeaderRefresh();
  }
 );
}

/// 上拉加载更多，将底部刷新状态改为正在刷新，然后调用刷新方法，页面上可以显示出加载中的UI，注意这里setState写法
startFooterRefreshing() {
 this.setState(
  {
   footerState: RefreshState.Refreshing,
   isFooterRefreshing: true
  },
  () => {
   this.props.onFooterRefresh && this.props.onFooterRefresh();
  }
 );
}

새로 고침 전에 머리 또는 꼬리 구성 요소를 표시한 다음 외부 데이터 인터페이스 메서드를 호출해야 합니다. 여기서 setState를 작성하면 화살표 함수의 메소드가 상태의 값이 업데이트된 후에만 호출된다는 점입니다. this.props.onFooterRefresh && this.props.onFooterRefresh()가 외부에 작성되는 경우. setState, UI에서는 헤드의 로딩이나 테일의 하드 로딩을 ​​볼 수 없지만 인터페이스 메소드가 이미 호출되었습니다.

마지막으로 새로 고침이 완료된 후 헤드 또는 테일 구성 요소가 더 이상 표시되지 않도록 새로 고침 중지 메서드도 호출해야 합니다. 그렇지 않으면 항상 로드되는 경우 버그로 간주될 수 있습니다. 새로고침을 중지하는 방법을 살펴보겠습니다.

/**
 * 根据尾部组件状态来停止刷新
 * @param footerState
 *
 * 如果刷新完成，当前列表数据源是空的，就不显示尾部组件了。
 * 这里这样做是因为通常列表无数据时，我们会显示一个空白页，如果再显示尾部组件如"没有更多数据了"就显得很多余
 */
endRefreshing(footerState: RefreshState) {
 let footerRefreshState = footerState;
 if (this.props.data.length === 0) {
  footerRefreshState = RefreshState.Idle;
 }
 this.setState({
  footerState: footerRefreshState,
  isHeaderRefreshing: false,
  isFooterRefreshing: false
 })
}

여기에 tail 구성요소 상태 매개변수를 전달하면 tail 구성요소의 스타일이 업데이트됩니다. 동시에 데이터 소스 데이터에 대한 판단이 이루어집니다. 비어 있으면 현재 데이터가 없으며 빈 페이지가 표시될 수 있음을 의미합니다. 그러면 tail 구성 요소를 표시할 필요가 없습니다.

다음은 RefreshListView를 사용하여 구현한 Douban 영화 페이지의 페이지 로딩 렌더링입니다.

위는 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JS

setTimeout 시간이 0으로 구현된 집합 중복 제거, 교집합, 합집합 및 차이 집합 기능의 예 자세한 분석

vue-cli 스캐폴딩 구성 디렉터리 index.js 구성 파일 방식

위 내용은 React에서 Native를 사용하여 풀업으로 로드된 목록을 새로 고치는 사용자 정의 풀다운을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!