この記事はReactNativeにおけるFlatListの具体的な使い方を中心に紹介していますが、編集者がとても良いと思ったので、参考としてシェアさせていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
以前使用していたコンポーネントはListViewでした。その際、プルダウンリフレッシュとプルアップロード機能を追加したかったので、ListViewのカプセル化を行いましたが、公式ドキュメントを読んだところ、これは推奨されていませんでした。効率の問題のため、私は Android で ListView を使用しなくなりました。Android の ListView も自分で処理しないと効率の問題が発生することは友人全員が知っています。そこで公式は、独自のプルダウン機能を備えた FlatList を再び立ち上げました。
機能の紹介
完全なクロスプラットフォーム。
水平レイアウトモードをサポートします。
行コンポーネントが表示または非表示になるときに構成可能なコールバック イベント。
独立したヘッドコンポーネントをサポートします。
個別のテールコンポーネントをサポートします。
カスタム行区切り文字をサポートします。
プルダウンの更新をサポートします。
プルアップロードをサポートします。
指定された行へのジャンプ (ScrollToIndex) をサポートします。
グループ/クラス/セクションが必要な場合は、SectionListを使用してください(これについては後の記事で紹介します)
FlatListの使い方も、単純な使い方であれば非常に簡単です。難易度に応じて徐々に紹介していきます:
直接使用してください
<FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => <Text>{item.key}</Text>} />
前の ListView と非常に似ていることがわかりますが、ここでは dataSource が欠落しているだけです。データを渡す必要があり、残りは FlatList の処理に委ねられます。
プロパティの説明
ItemSeparatorComponent 行間の区切りコンポーネント。最初の行の前または最後の行の後には表示されません。ここで、必要に応じてビュー
ListEmptyComponentを挿入し、リストが空のときにコンポーネントをレンダリングできます。 React コンポーネント、レンダリング関数、またはレンダリングされた要素にすることができます。
ListFooterComponent 末尾コンポーネント
ListHeaderComponent head コンポーネント
columnWrapperStyle 複数列レイアウトが設定されている場合 (つまり、numColumns 値が 1 より大きい整数に設定されている場合)、これを追加で指定できます。 style はコンテナーの各行に作用します。
data わかりやすくするために、data 属性は現在、通常の配列のみをサポートしています。不変配列などの他の特別なデータ構造を使用する必要がある場合は、下位レベルの VirtualizedList コンポーネントを直接使用してください。
extraData リストで使用するデータ以外のデータ(renderItem、Header、Footerのいずれで使用するか)がある場合は、この属性で指定してください。同時に、このデータを変更するときは、最初に参照アドレスを変更し (新しいオブジェクトまたは配列にコピーするなど)、次にその値を変更する必要があります。そうしないと、インターフェイスが更新されない可能性があります。
getItemは各Itemを取得します
getItemCountはItem属性を取得します
getItemLayoutは、コンテンツのサイズを動的に測定するオーバーヘッドを回避するためのオプションの最適化ですが、前提として、コンテンツの高さを知ることができるということです。前進。行の高さが固定されている場合、次のような getItemLayout は効率的で簡単に使用できます。 SeparatorComponent を指定する場合は、オフセットの計算でセパレータのサイズを考慮してください。
horizontal を true に設定すると、水平レイアウト モードに変更されます。
initialNumToRender は、最初にレンダリングされる要素の数を指定します。できれば画面を埋めるのに十分な数を指定します。これにより、可視コンテンツが可能な限り短い時間でユーザーに表示されるようになります。レンダリングされた要素の最初のバッチは、スライド プロセス中にアンロードされないことに注意してください。これは、ユーザーが先頭に戻ったときに要素の最初のバッチを再レンダリングする必要がないようにするためです。
initialScrollIndex は、レンダリングが開始される項目インデックスを指定します
keyExtractor この関数は、指定された項目の一意のキーを生成するために使用されます。 Key の機能は、React が同様の要素の異なる個体を区別できるようにして、更新時に変更された位置を判断し、再レンダリングのコストを削減できるようにすることです。この関数が指定されていない場合、デフォルトで item.key がキー値として抽出されます。 item.key も存在しない場合は、配列の添字が使用されます。
legacyImplementation は古い ListView 実装を使用するために true に設定されます。
numColumns 複数列レイアウトは、非水平モードでのみ使用できます。つまり、horizontal={false} である必要があります。このとき、コンポーネント内の要素は、flexWrapを有効にしたレイアウトと同様に、左から右、上から下にZ字型に配置されます。コンポーネント内の要素は同じ高さである必要があります。ウォーターフォール レイアウトはまだサポートされていません。
onEndReached は、リストがコンテンツの下部から onEndReachedThreshold 未満の距離までスクロールされたときに呼び出されます。
onEndReachedThreshold は、onEndReached コールバックがトリガーされるコンテンツの下部からの距離を決定します。このパラメータはピクセル単位ではなく比率であることに注意してください。たとえば、0.5 は、コンテンツの下部からの距離が、現在のリストの表示可能な長さの半分であることを意味します。
onRefresh如果设置了此选项,则会在列表头部添加一个标准的RefreshControl控件,以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。
onViewableItemsChanged在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置viewabilityconfig属性
refreshing在等待加载新数据时将此属性设为true,列表就会显示出一个正在加载的符号。
renderItem根据行数据data,渲染每一行的组件。这个参照下面的demo
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:'black'}]}>这是头部</Text>; } _footer = () => { return <Text style={[styles.txt,{backgroundColor:'black'}]}>这是尾部</Text>; } _separator = () => { return <View style={{height:2,backgroundColor:'yellow'}}/>; } render() { var data = []; for (var i = 0; i < 100; i++) { data.push({key: i, title: i + ''}); } return ( <View style={{flex:1}}> <Button title='滚动到指定位置' 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:'black',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: 'center', textAlignVertical: 'center', color: 'white', 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 + ''}); } return ( <View style={{flex:1}}> <Button title='滚动到指定位置' 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:'black',paddingLeft:20}} //horizontal={true} getItemLayout={(data,index)=>( {length: 100, offset: (100+2) * index, index} )} data={data}> </FlatList> </View> </View> ); } _renderItem = (item) => { var txt = '第' + item.index + '个' + ' title=' + item.item.title; var bgColor = item.index % 2 == 0 ? 'red' : 'blue'; return <Text style={[{flex:1,height:100,backgroundColor:bgColor},styles.txt]}>{txt}</Text> } _header = () => { return <Text style={[styles.txt,{backgroundColor:'black'}]}>这是头部</Text>; } _footer = () => { return <Text style={[styles.txt,{backgroundColor:'black'}]}>这是尾部</Text>; } _separator = () => { return <View style={{height:2,backgroundColor:'yellow'}}/>; } } const styles=StyleSheet.create({ container:{ }, content:{ width:width, height:height, backgroundColor:'yellow', justifyContent:'center', alignItems:'center' }, cell:{ height:100, backgroundColor:'purple', alignItems:'center', justifyContent:'center', borderBottomColor:'#ececec', borderBottomWidth:1 }, txt: { textAlign: 'center', textAlignVertical: 'center', color: 'white', fontSize: 30, } })
运行效果如下:
总结
总体来说Flatlist还是比ListView用起来方便的,而且提供的功能更多。
相关推荐:
ReactNative中使用Redux架构总结_javascript技巧
以上がReactNative での FlatList の具体的な使用方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

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

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

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

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

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

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

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


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

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

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ホットトピック









