検索
ホームページウェブフロントエンドjsチュートリアルReactNative での FlatList の具体的な使用方法の紹介

この記事はReactNativeにおけるFlatListの具体的な使い方を中心に紹介していますが、編集者がとても良いと思ったので、参考としてシェアさせていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

以前使用していたコンポーネントはListViewでした。その際、プルダウンリフレッシュとプルアップロード機能を追加したかったので、ListViewのカプセル化を行いましたが、公式ドキュメントを読んだところ、これは推奨されていませんでした。効率の問題のため、私は Android で ListView を使用しなくなりました。Android の ListView も自分で処理しないと効率の問題が発生することは友人全員が知っています。そこで公式は、独自のプルダウン機能を備えた FlatList を再び立ち上げました。

機能の紹介

  1. 完全なクロスプラットフォーム。

  2. 水平レイアウトモードをサポートします。

  3. 行コンポーネントが表示または非表示になるときに構成可能なコールバック イベント。

  4. 独立したヘッドコンポーネントをサポートします。

  5. 個別のテールコンポーネントをサポートします。

  6. カスタム行区切り文字をサポートします。

  7. プルダウンの更新をサポートします。

  8. プルアップロードをサポートします。

  9. 指定された行へのジャンプ (ScrollToIndex) をサポートします。

グループ/クラス/セクションが必要な場合は、SectionListを使用してください(これについては後の記事で紹介します)

FlatListの使い方も、単純な使い方であれば非常に簡単です。難易度に応じて徐々に紹介していきます:

直接使用してください


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

前の ListView と非常に似ていることがわかりますが、ここでは dataSource が欠落しているだけです。データを渡す必要があり、残りは FlatList の処理に委ねられます。

プロパティの説明

  1. ItemSeparatorComponent 行間の区切りコンポーネント。最初の行の前または最後の行の後には表示されません。ここで、必要に応じてビュー

  2. ListEmptyComponentを挿入し、リストが空のときにコンポーネントをレンダリングできます。 React コンポーネント、レンダリング関数、またはレンダリングされた要素にすることができます。

  3. ListFooterComponent 末尾コンポーネント

  4. ListHeaderComponent head コンポーネント

  5. columnWrapperStyle 複数列レイアウトが設定されている場合 (つまり、numColumns 値が 1 より大きい整数に設定されている場合)、これを追加で指定できます。 style はコンテナーの各行に作用します。

  6. data わかりやすくするために、data 属性は現在、通常の配列のみをサポートしています。不変配列などの他の特別なデータ構造を使用する必要がある場合は、下位レベルの VirtualizedList コンポーネントを直接使用してください。

  7. extraData リストで使用するデータ以外のデータ(renderItem、Header、Footerのいずれで使用するか)がある場合は、この属性で指定してください。同時に、このデータを変更するときは、最初に参照アドレスを変更し (新しいオブジェクトまたは配列にコピーするなど)、次にその値を変更する必要があります。そうしないと、インターフェイスが更新されない可能性があります。

  8. getItemは各Itemを取得します

  9. getItemCountはItem属性を取得します

  10. getItemLayoutは、コンテンツのサイズを動的に測定するオーバーヘッドを回避するためのオプションの最適化ですが、前提として、コンテンツの高さを知ることができるということです。前進。行の高さが固定されている場合、次のような getItemLayout は効率的で簡単に使用できます。 SeparatorComponent を指定する場合は、オフセットの計算でセパレータのサイズを考慮してください。

  11. horizo​​ntal を true に設定すると、水平レイアウト モードに変更されます。

  12. initialNumToRender は、最初にレンダリングされる要素の数を指定します。できれば画面を埋めるのに十分な数を指定します。これにより、可視コンテンツが可能な限り短い時間でユーザーに表示されるようになります。レンダリングされた要素の最初のバッチは、スライド プロセス中にアンロードされないことに注意してください。これは、ユーザーが先頭に戻ったときに要素の最初のバッチを再レンダリングする必要がないようにするためです。

  13. initialScrollIndex は、レンダリングが開始される項目インデックスを指定します

  14. keyExtractor この関数は、指定された項目の一意のキーを生成するために使用されます。 Key の機能は、React が同様の要素の異なる個体を区別できるようにして、更新時に変更された位置を判断し、再レンダリングのコストを削減できるようにすることです。この関数が指定されていない場合、デフォルトで item.key がキー値として抽出されます。 item.key も存在しない場合は、配列の添字が使用されます。

  15. legacyImplementation は古い ListView 実装を使用するために true に設定されます。

  16. numColumns 複数列レイアウトは、非水平モードでのみ使用できます。つまり、horizo​​ntal={false} である必要があります。このとき、コンポーネント内の要素は、flexWrapを有効にしたレイアウトと同様に、左から右、上から下にZ字型に配置されます。コンポーネント内の要素は同じ高さである必要があります。ウォーターフォール レイアウトはまだサポートされていません。

  17. onEndReached は、リストがコンテンツの下部から onEndReachedThreshold 未満の距離までスクロールされたときに呼び出されます。

  18. onEndReachedThreshold は、onEndReached コールバックがトリガーされるコンテンツの下部からの距離を決定します。このパラメータはピクセル単位ではなく比率であることに注意してください。たとえば、0.5 は、コンテンツの下部からの距離が、現在のリストの表示可能な長さの半分であることを意味します。

  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 &#39;react&#39;;
import {
  StyleSheet,
  View,
  FlatList,
  Text,
  Button,
} from &#39;react-native&#39;;

var ITEM_HEIGHT = 100;

export default class FlatListDemo extends Component {

  _flatList;

  _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: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(&#39;window&#39;)
export default class Main extends Component{
  // 构造
  constructor(props) {
    super(props);
  }
  refreshing(){
    let timer = setTimeout(()=>{
          clearTimeout(timer)
          alert(&#39;刷新成功&#39;)
        },1500)
  }
  _onload(){
    let timer = setTimeout(()=>{
      clearTimeout(timer)
      alert(&#39;加载成功&#39;)
    },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,
  }

})

运行效果如下:

总结

总体来说Flatlist还是比ListView用起来方便的,而且提供的功能更多。

相关推荐:

ReactNative实现Toast的示例分享

ReactNative中使用Redux架构总结_javascript技巧

有关ReactNative Image组件详细介绍

以上がReactNative での FlatList の具体的な使用方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptはCで書かれていますか?証拠を調べるJavaScriptはCで書かれていますか?証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1)C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2)V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3)JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割:WebをインタラクティブでダイナミックにするJavaScriptの役割:WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript:接続が説明しましたCおよびJavaScript:接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで:JavaScriptの多様なアプリケーションWebサイトからアプリまで:JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript:ユースケースとアプリケーションと比較されますPython vs. JavaScript:ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action:実際の例とプロジェクトJavaScript in Action:実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境