ホームページ > 記事 > ウェブフロントエンド > ReactNative での VirtualizedList コンポーネントの使用法を説明してください。
VirtualizedList コンポーネントは、リストが非常に大きい場合に最適です。 VirtualizedList は、パフォーマンスとメモリ使用量の向上に役立ちます。ユーザーがスクロールすると、データがユーザーに表示されます。
VirtualizedList の基本コンポーネントは次のとおりです&minuns;
<VirtualizedList data={DATA} initialNumToRender={4} renderItem={renderItem} keyExtractor={keyExtractor} getItemCount={getItemCount} getItem={getItem} />
プロパティ | 説明 |
---|---|
renderItem | はデータ内の項目をレンダリングします VirtualizedList 内。 |
表示されるデータ。 | |
単一のアイテムを取得する関数 | |
データ項目の数を取得します。 | |
最初にレンダリングする回数。 | |
考慮される各一意のキー 指定されたインデックスの項目。 |
import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from 'react-native';VirtualizedList のコードは次のとおりです-
<SafeAreaView> <VirtualizedList data={DATA} initialNumToRender={4} renderItem={({ item }) => <Item title={item.title} />} keyExtractor={item => item.id} getItemCount={getItemCount} getItem={getItem} /> </SafeAreaView>us レンダリングを表示する最初の項目は 4 です。 renderItem プロパティは、項目を画面に表示するために使用されます。次のように定義されたカスタム項目コンポーネントを使用します -
const Item = ({ title })=> { return ( <View style={styles.item}> <Text style={styles.title}>{title}</Text> </View> ); }
keyExtractor を使用して、各項目の一意のキーを定義します。
keyExtractor={item => item.id}props getItemCount ユーザーに表示されるアイテムの総数を取得します。次に、関数 getItemCount を呼び出します。この関数は次のように定義されています。
const getItemCount = (data) => { return 100; } getItemCount={getItemCount}getITem 属性は、表示するデータを取得するために使用されます。 getItem メソッドを呼び出します。このメソッドは次のように定義されています -
const getItem = (data, index) => { return { id: index, title: 'test' } } getItem={getItem}VirtualizedList を表示する完全なコードは次のとおりです -
import React from 'react'; import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from 'react-native'; const DATA = []; const getItem = (data, index) => { return { id: index, title: 'test' } } const getItemCount = (data) => { return 100; } const Item = ({ title })=> { return (Output); } const VirtualizedListExample = () => { return ( {title} ); } const styles = StyleSheet.create({ item: { backgroundColor: '#ccc', height: 100, justifyContent: 'center', marginVertical: 8, marginHorizontal: 16, padding: 20, }, title: { fontSize: 32, }, }); export default VirtualizedListExample; - } keyExtractor={item => item.id} getItemCount={getItemCount} getItem={getItem} />
以上がReactNative での VirtualizedList コンポーネントの使用法を説明してください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。