ReactNative での VirtualizedList コンポーネントの使用法を説明してください。

VirtualizedList コンポーネントは、リストが非常に大きい場合に最適です。 VirtualizedList は、パフォーマンスとメモリ使用量の向上に役立ちます。ユーザーがスクロールすると、データがユーザーに表示されます。

VirtualizedList の基本コンポーネントは次のとおりです&minuns;

<VirtualizedList data={DATA} initialNumToRender={4} renderItem={renderItem} keyExtractor={keyExtractor} getItemCount={getItemCount} getItem={getItem} />

重要な VirtualizedList プロパティ

#data表示されるデータ。 getItem単一のアイテムを取得する関数 getItemCountデータ項目の数を取得します。 initialNumToRenderkeyExtractor考慮される各一意のキー 指定されたインデックスの項目。

プロパティ	説明
renderItem	はデータ内の項目をレンダリングします VirtualizedList 内。
< /td>最初にレンダリングする回数。

これは、VirtualizedList の実例です。

例: VirtualizedList を使用してデータを表示する

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 (
      
         {title}
         
      );
   }
   const VirtualizedListExample = () => {
      return (
         
             }
               keyExtractor={item => item.id}
               getItemCount={getItemCount}
               getItem={getItem}
         />
         
      );
   }
   const styles = StyleSheet.create({
   item: {
      backgroundColor: '#ccc',
      height: 100,
      justifyContent: 'center',
      marginVertical: 8,
      marginHorizontal: 16,
      padding: 20,
   },
   title: {
      fontSize: 32,
   },
});
export default VirtualizedListExample;

Output

以上がReactNative での VirtualizedList コンポーネントの使用法を説明してください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。