So verwenden Sie FlatList in ReactNative

In diesem Artikel wird hauptsächlich die spezifische Verwendung von FlatList in ReactNative vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Schauen wir uns den Editor an.

Die zuvor verwendete Komponente war ListView. Damals wollte ich eine Pull-Down-Aktualisierungs- und Pull-Up-Ladefunktion hinzufügen, also habe ich eine Kapselung von ListView erstellt. Nach dem Lesen der offiziellen Dokumente wurde die Verwendung von ListView jedoch aufgrund von Effizienzproblemen nicht empfohlen. Freunde, die Android verwendet haben, wissen, dass ListView von Android auch Effizienzprobleme aufweist, wenn Sie es nicht selbst in den Griff bekommen. Daher startete der Beamte FlatList erneut mit einer eigenen Pulldown-Funktion.

Funktionseinführung

1. Komplett plattformübergreifend.

2. Unterstützt den horizontalen Layoutmodus.

3. Konfigurierbare Rückrufereignisse, wenn Zeilenkomponenten angezeigt oder ausgeblendet werden.

4. Unterstützt separate Header-Komponenten.

5. Unterstützt separate Heckkomponenten.

6. Unterstützt benutzerdefinierte Zeilentrennzeichen.

7. Unterstützt Pulldown-Aktualisierung.

8. Unterstützt Pull-up-Laden.

9. unterstützt das Springen zur angegebenen Zeile (ScrollToIndex).

Wenn Sie eine Gruppe/Kategorie/einen Abschnitt (Abschnitt) benötigen, verwenden Sie bitte SectionList (wir werden dies in einem späteren Artikel vorstellen)

Verwenden Sie

FlatList ist auch sehr einfach zu verwenden. Hier werden wir den Schwierigkeitsgrad einteilen und schrittweise einführen:

Direkt verwenden

<FlatList
data={[{key: &#39;a&#39;}, {key: &#39;b&#39;}]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>

siehe Es ist dem vorherigen ListView sehr ähnlich, aber die dataSource fehlt. Hier müssen wir nur die Daten übergeben, und der Rest wird von FlatList erledigt.

Eigenschaftsbeschreibung

1. ItemSeparatorComponent Die Trennkomponente zwischen Zeilen. Erscheint nicht vor der ersten Zeile oder nach der letzten Zeile. Hier können Sie nach Bedarf eine Ansicht

2. ListEmptyComponent einfügen und die Komponente rendern, wenn die Liste leer ist. Es kann eine React-Komponente, eine Renderfunktion oder ein gerendertes Element sein.

3. ListFooterComponent-Endkomponente

4. ListHeaderComponent-Kopfkomponente

5. columnWrapperStyle, wenn mehrspaltiges Layout festgelegt ist (Das heißt, legen Sie den Wert „numColumns“ auf eine Ganzzahl größer als 1 fest.) Sie können zusätzlich festlegen, dass dieser Stil für jede Containerzeile gilt.

6. data Der Einfachheit halber unterstützt das Datenattribut derzeit nur gewöhnliche Arrays. Wenn Sie andere spezielle Datenstrukturen wie unveränderliche Arrays verwenden müssen, verwenden Sie bitte direkt die VirtualizedList-Komponente der unteren Ebene.

7. extraData Wenn es andere als die in der Liste verwendeten Daten gibt (unabhängig davon, ob sie in renderItem, Header oder Footer verwendet werden), geben Sie diese bitte in diesem Attribut an. Wenn Sie diese Daten ändern, müssen Sie gleichzeitig auch zuerst ihre Referenzadresse ändern (z. B. in ein neues Objekt oder Array kopieren) und dann ihren Wert ändern, da sonst die Schnittstelle möglicherweise nicht aktualisiert wird.

8. getItem ruft jeden Artikel ab

9. getItemCount ruft das Item-Attribut ab

10. getItemLayout ist eine optionale Optimierung um den Aufwand für die dynamische Messung der Inhaltsgröße zu vermeiden, aber nur, wenn Sie die Höhe des Inhalts im Voraus kennen können. Wenn Ihre Zeilenhöhe fest ist, ist getItemLayout effizient und einfach zu verwenden, ähnlich wie folgt: getItemLayout={(data, index) => ( {length: row height, offset: row height * index, index} )} Hinweis Wenn Sie eine SeparatorComponent angeben, berücksichtigen Sie bitte die Größe des Trennzeichens bei der Offset-Berechnung.

11. horizontal wird auf true gesetzt, um in den horizontalen Layoutmodus zu wechseln.

12. initialNumToRender gibt die Anzahl der Elemente an, die anfänglich gerendert werden sollen, vorzugsweise gerade genug, um einen Bildschirm zu füllen, um sicherzustellen, dass dem Benutzer sichtbare Inhalte in kürzester Zeit präsentiert werden. Beachten Sie, dass der erste Stapel gerenderter Elemente während des Gleitvorgangs nicht entladen wird. Dadurch soll sichergestellt werden, dass der erste Stapel von Elementen nicht erneut gerendert werden muss, wenn der Benutzer nach oben zurückkehrt.

13. initialScrollIndex gibt den Elementindex an, bei dem das Rendern beginnt.

14. keyExtractor Diese Funktion wird verwendet, um einen eindeutigen Schlüssel für ein bestimmtes Element zu generieren. Die Funktion von Key besteht darin, React in die Lage zu versetzen, verschiedene Individuen ähnlicher Elemente zu unterscheiden, damit diese beim Aktualisieren ihre geänderten Positionen bestimmen und die Kosten für das erneute Rendern reduzieren können. Wenn diese Funktion nicht angegeben ist, wird standardmäßig item.key als Schlüsselwert extrahiert. Wenn item.key ebenfalls nicht existiert, wird der Array-Index verwendet.

15. LegacyImplementation ist auf true gesetzt, um die alte ListView-Implementierung zu verwenden.

16. numColumns mehrspaltiges Layout kann nur im nicht horizontalen Modus verwendet werden, das heißt, es muss horizontal sein = {false}. Zu diesem Zeitpunkt werden die Elemente innerhalb der Komponente in einer Z-Form von links nach rechts und von oben nach unten angeordnet, ähnlich dem Layout mit aktiviertem FlexWrap. Die Elemente innerhalb der Komponente müssen gleich hoch sein – Wasserfall-Layout wird noch nicht unterstützt.

17. onEndReached wird aufgerufen, wenn die Liste bis zu einer Entfernung gescrollt wird, die kleiner als onEndReachedThreshold vom unteren Rand des Inhalts ist.

18. onEndReachedThreshold bestimmt, wie weit vom unteren Rand des Inhalts entfernt der onEndReached-Rückruf ausgelöst wird. Beachten Sie, dass es sich bei diesem Parameter um ein Verhältnis und nicht um eine Pixeleinheit handelt. Beispielsweise bedeutet 0,5, dass der Abstand vom unteren Rand des Inhalts die Hälfte der sichtbaren Länge der aktuellen Liste beträgt.

19. onRefresh如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。

20. onViewableItemsChanged在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置viewabilityconfig属性

21. refreshing在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号。

22. renderItem根据行数据data，渲染每一行的组件。这个参照下面的demo

23. viewabilityConfig请参考ViewabilityHelper 的源码来了解具体的配置。

方法

scrollToEnd
滚动到底部。如果不设置getItemLayout
属性的话，可能会比较卡。

scrollToIndex
滚动到指定index的item
如果不设置getItemLayout
属性的话，无法跳转到当前可视区域以外的位置。

scrollToItem
滚动到指定item，如果不设置getItemLayout
属性的话，可能会比较卡。

scrollToOffset
滚动指定距离

Demo：

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  FlatList,
  Text,
  Button,
} from 'react-native';

var ITEM_HEIGHT = 100;

export default class FlatListDemo extends Component {

  _flatList;

  _renderItem = (item) => {
    var txt = '第' + item.index + '个' + ' title=' + item.item.title;
    var bgColor = item.index % 2 == 0 ? 'red' : 'blue';
    return <Text style={[{flex:1,height:ITEM_HEIGHT,backgroundColor:bgColor},styles.txt]}>{txt}</Text>
  }

  _header = () => {
    return <Text style={[styles.txt,{backgroundColor:&#39;black&#39;}]}>这是头部</Text>;
  }

  _footer = () => {
    return <Text style={[styles.txt,{backgroundColor:&#39;black&#39;}]}>这是尾部</Text>;
  }

  _separator = () => {
    return <View style={{height:2,backgroundColor:&#39;yellow&#39;}}/>;
  }

  render() {
    var data = [];
    for (var i = 0; i < 100; i++) {
      data.push({key: i, title: i + &#39;&#39;});
    }

    return (
      <View style={{flex:1}}>
        <Button title=&#39;滚动到指定位置&#39; onPress={()=>{
          //this._flatList.scrollToEnd();
          //this._flatList.scrollToIndex({viewPosition:0,index:8});
          this._flatList.scrollToOffset({animated: true, offset: 2000});
        }}/>
        <View style={{flex:1}}>
          <FlatList
            ref={(flatList)=>this._flatList = flatList}
            ListHeaderComponent={this._header}
            ListFooterComponent={this._footer}
            ItemSeparatorComponent={this._separator}
            renderItem={this._renderItem}

            //numColumns ={3}
            //columnWrapperStyle={{borderWidth:2,borderColor:&#39;black&#39;,paddingLeft:20}}

            //horizontal={true}

            //getItemLayout={(data,index)=>(
            //{length: ITEM_HEIGHT, offset: (ITEM_HEIGHT+2) * index, index}
            //)}

            //onEndReachedThreshold={5}
            //onEndReached={(info)=>{
            //console.warn(info.distanceFromEnd);
            //}}

            //onViewableItemsChanged={(info)=>{
            //console.warn(info);
            //}}
            data={data}>
          </FlatList>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  txt: {
    textAlign: &#39;center&#39;,
    textAlignVertical: &#39;center&#39;,
    color: &#39;white&#39;,
    fontSize: 30,
  }
});

效果图：

进阶使用

在这里我准备了一份代码示例：

const {width,height}=Dimensions.get('window')
export default class Main extends Component{
  // 构造
  constructor(props) {
    super(props);
  }
  refreshing(){
    let timer = setTimeout(()=>{
          clearTimeout(timer)
          alert('刷新成功')
        },1500)
  }
  _onload(){
    let timer = setTimeout(()=>{
      clearTimeout(timer)
      alert('加载成功')
    },1500)
  }
  render() {
    var data = [];
    for (var i = 0; i < 100; i++) {
      data.push({key: i, title: i + &#39;&#39;});
    }

    return (
      <View style={{flex:1}}>
        <Button title=&#39;滚动到指定位置&#39; onPress={()=>{
          this._flatList.scrollToOffset({animated: true, offset: 2000});
        }}/>
        <View style={{flex:1}}>
          <FlatList
            ref={(flatList)=>this._flatList = flatList}
            ListHeaderComponent={this._header}
            ListFooterComponent={this._footer}
            ItemSeparatorComponent={this._separator}
            renderItem={this._renderItem}
            onRefresh={this.refreshing}
            refreshing={false}
            onEndReachedThreshold={0}
            onEndReached={
              this._onload
            }
            numColumns ={3}
            columnWrapperStyle={{borderWidth:2,borderColor:&#39;black&#39;,paddingLeft:20}}

            //horizontal={true}

            getItemLayout={(data,index)=>(
            {length: 100, offset: (100+2) * index, index}
            )}

            data={data}>
          </FlatList>
        </View>

      </View>
    );
  }


  _renderItem = (item) => {
    var txt = &#39;第&#39; + item.index + &#39;个&#39; + &#39; title=&#39; + item.item.title;
    var bgColor = item.index % 2 == 0 ? &#39;red&#39; : &#39;blue&#39;;
    return <Text style={[{flex:1,height:100,backgroundColor:bgColor},styles.txt]}>{txt}</Text>
  }

  _header = () => {
    return <Text style={[styles.txt,{backgroundColor:&#39;black&#39;}]}>这是头部</Text>;
  }

  _footer = () => {
    return <Text style={[styles.txt,{backgroundColor:&#39;black&#39;}]}>这是尾部</Text>;
  }

  _separator = () => {
    return <View style={{height:2,backgroundColor:&#39;yellow&#39;}}/>;
  }


}
const styles=StyleSheet.create({
  container:{

  },
  content:{
    width:width,
    height:height,
    backgroundColor:&#39;yellow&#39;,
    justifyContent:&#39;center&#39;,
    alignItems:&#39;center&#39;
  },
  cell:{
    height:100,
    backgroundColor:&#39;purple&#39;,
    alignItems:&#39;center&#39;,
    justifyContent:&#39;center&#39;,
    borderBottomColor:&#39;#ececec&#39;,
    borderBottomWidth:1

  },
  txt: {
    textAlign: &#39;center&#39;,
    textAlignVertical: &#39;center&#39;,
    color: &#39;white&#39;,
    fontSize: 30,
  }

})

运行效果如下：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Webstorm中利用babel将ES6自动转码成ES5如何实现

在nodejs中如何调取微信收货地址

在nodejs中如何实现微信支付

详细解读Vuejs中响应式原理

Das obige ist der detaillierte Inhalt vonSo verwenden Sie FlatList in ReactNative. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!