So verwenden Sie Native in React, um benutzerdefiniertes Pulldown zu implementieren, um die durch Pullup geladene Liste zu aktualisieren-js-Tutorial-php.cn

In diesem Artikel wird hauptsächlich das Beispiel der Anpassung des Pulldowns zum Aktualisieren der geladenen Pullup-Liste in React Native vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

Listenseiten sind in der mobilen Entwicklung sehr verbreitete Seiten. In React Native verwenden wir im Allgemeinen FlatList- oder SectionList-Komponenten, um diese Listenansichten zu implementieren. Normalerweise enthält die Listenseite eine große Datenmenge, die geladen und angezeigt werden muss. Daher ist es für die Listenkomponente wichtig, Pull-Down-Aktualisierung und Pull-Up-Laden zu implementieren viele Fälle.

Dieser Artikel kapselt eine RefreshListView, die Pull-Down-Aktualisierung und Pull-Up-Laden basierend auf FlatList unterstützt. Nach der Kapselung der ursprünglichen FlatList ist es sehr praktisch, Pull-Up und Pull-Down-Aktualisierung aufzurufen.

Die Implementierung der Pulldown-Aktualisierung ist sehr einfach. Hier verwenden wir die Eigenschaften von FlatList selbst, um

onRefresh zu implementieren. Nach dem Festlegen dieser Option wird ein Standard erstellt Dem Kopf der Liste wurde ein RefreshControl-Steuerelement hinzugefügt, um die Funktion „Pulldown-Aktualisierung“ zu implementieren. Gleichzeitig müssen Sie das Aktualisierungsattribut richtig einstellen.

refreshing—— Bool-Wert, der zum Steuern der Anzeige und Ausblendung des Aktualisierungssteuerelements verwendet wird. Wird nach Abschluss der Aktualisierung auf „false“ gesetzt.

Durch Festlegen dieser beiden Eigenschaften können wir den Aktualisierungsvorgang des FlatList-Headers realisieren. Das Steuerelement verwendet den Standardstil und Android und iOS verwenden die Komponenten ihrer jeweiligen Systeme zur Anzeige.

Der entscheidende Punkt ist, dass die Listenkomponente von React Native nicht über diese Funktion verfügt und wir sie selbst implementieren müssen. Für das Pull-up-Laden haben wir normalerweise mehrere Zustände. Hier erstelle ich eine RefreshState.js-Datei, um den Pull-up-Ladezustand zu speichern:

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

Nach dem Login kopieren

Kapseln Sie dann eine RefreshFooter-Komponente basierend auf diesen Zuständen, damit dies möglich ist Angepasst an verschiedene Bedingungen. Lassen Sie uns ohne weiteres über den Code sprechen:

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

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"
 }
});

Nach dem Login kopieren

Beachten Sie, dass propTypes die Methode ist, die wir für die RefreshFooter-Komponente für externe Aufrufe definieren müssen mithilfe von PropTypes angegeben werden, und die Prop-Types von Facebook müssen installiert werden. Für abhängige Bibliotheken ist es am besten, sie mit „garn add prop-types“ zu installieren, was weniger fehleranfällig ist. Dies wird zur Laufzeittypprüfung verwendet. Klicken Sie hier, um mehr zu erfahren.

In defaultProps definieren wir mehrere Standardtextinhalte in unterschiedlichen Zuständen, die durch externe Übergabe von Werten geändert werden können.

Der nächste Schritt besteht darin, diese RefreshListView zu implementieren. Zunächst sollte klar sein, dass diese RefreshListView über Head-Refresh- und Tail-Refresh-Aufrufmethoden verfügen muss und die spezifische Methode zum Aufrufen von Daten extern implementiert werden sollte. Definieren Sie zunächst zwei Methoden wie RefreshFooter:

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

Nach dem Login kopieren

Wie oben erwähnt, wird die Pulldown-Aktualisierung des Kopfes mithilfe der integrierten Funktionen von FlatList implementiert. Wir müssen einen Bool-Wert isHeaderRefreshing als Wert des Aktualisierungsattributs definieren zur Steuerung der Header-Anzeige und Nr. Definieren Sie gleichzeitig ein isFooterRefreshing, um den Aktualisierungsstatus der Tail-Komponente zu bestimmen. Definieren Sie „footerState“, um den Status der aktuellen Tail-Komponente als Wert von „RefreshFooter“ festzulegen. Die

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

Nach dem Login kopieren

Renderfunktion lautet wie folgt:

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()
    }}
   />
  )
 };

Nach dem Login kopieren

Sie können sehen, dass es im obigen Code zwei Methoden gibt, beginHeaderRefresh und beginFooterRefresh. Diese beiden Methoden werden zum Aufrufen von „refresh“ verwendet, jedoch vorher Erfrischend, es gibt einige logische Situationen, die ein Urteilsvermögen erfordern. Beispielsweise können Kopf und Ende nicht gleichzeitig aktualisiert werden, da sonst die Datenverarbeitungsergebnisse beeinträchtigt werden können. Wiederholte Aktualisierungsvorgänge müssen während der Aktualisierung verhindert werden. Hier habe ich im Code ausführlich kommentiert:

/// 开始下拉刷新
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;
}

Nach dem Login kopieren

Die Logik von startHeaderRefreshing und startFooterRefreshing lautet wie folgt:

/// 下拉刷新，设置完刷新状态后再调用刷新方法，使页面上可以显示出加载中的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();
  }
 );
}

Nach dem Login kopieren

Vor dem Aktualisieren müssen wir die Head- oder Tail-Komponente anzeigen und dann External aufrufen Datenschnittstellenmethoden. Der Vorteil des Schreibens von setState besteht darin, dass die Methoden in der Pfeilfunktion erst aufgerufen werden, nachdem der Wert im Status aktualisiert wurde. Wenn this.props.onFooterRefresh && this.props.onFooterRefresh() außerhalb geschrieben wird setState: Auf der Benutzeroberfläche sehen wir möglicherweise weder das Laden im Kopf noch das harte Laden im Schwanz, aber die Schnittstellenmethode wurde bereits aufgerufen.

Nachdem die Aktualisierung abgeschlossen ist, müssen wir schließlich auch die Stop-Refresh-Methode aufrufen, damit die Head- oder Tail-Komponenten nicht mehr angezeigt werden. Andernfalls kann es als Fehler betrachtet werden, wenn sie ständig geladen wird. Schauen wir uns an, wie man die Aktualisierung stoppt:

/**
 * 根据尾部组件状态来停止刷新
 * @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
 })
}

Nach dem Login kopieren

Der Parameter eines Tail-Komponentenstatus wird hier übergeben, um den Stil der Tail-Komponente zu aktualisieren. Gleichzeitig wird eine Beurteilung der Datenquellendaten vorgenommen. Wenn diese leer sind, bedeutet dies, dass derzeit keine Daten vorhanden sind und eine leere Seite angezeigt werden kann. Dann besteht keine Notwendigkeit, die Endkomponente anzuzeigen.

Das Folgende ist das Rendering der Seite zum Laden des Douban-Films, die ich mit RefreshListView implementiert habe:

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird .

Verwandte Artikel:

Beispiele für von JS implementierte Mengendeduplizierungs-, Schnittmengen-, Vereinigungs- und Differenzmengenfunktionen

setTimeout-Zeit ist eingestellt auf 0 Detaillierte Analyse von

Die Methode der Konfigurationsdatei index.js im Konfigurationsverzeichnis von vue-cli scaffolding

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Native in React, um benutzerdefiniertes Pulldown zu implementieren, um die durch Pullup geladene Liste zu aktualisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!