Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

ReactNativeでのVirtualizedListコンポーネントの使用法を説明しますか?


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

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

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

重要なVirtualizedListプロパティ

小道具 説明
renderItem データのアイテムはVirtualizedList内にレンダリングされます。
データ 表示するデータ。
getItem データから個々のアイテムをフェッチする関数。
getItemCount データ項目の数を取得します。
initialNumToRender 開始時にレンダリングされる回数。
keyExtractor 指定されたインデックスの各アイテムで考慮される一意のキー。

これが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>

レンダリングするために表示する最初のアイテムは4です。renderItemプロパティは、画面にアイテムを表示するために使用されます。以下に示すように定義されたカスタムアイテムコンポーネントを利用します-

const Item = ({ title })=> {
   return (
      <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
      </View>
   );
}

keyExtractor 各アイテムの一意のキーを定義します。

keyExtractor={item => item.id}

小道具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 (
      <View style={styles.item}>
         <Text style={styles.title}>{title}</Text>
         </View>
      );
   }
   const VirtualizedListExample = () => {
      return (
         <SafeAreaView>
            <VirtualizedList
               data={DATA}
               initialNumToRender={4}
               renderItem={({ item }) => <Item title={item.title} />}
               keyExtractor={item => item.id}
               getItemCount={getItemCount}
               getItem={getItem}
         />
         </SafeAreaView>
      );
   }
   const styles = StyleSheet.create({
   item: {
      backgroundColor: '#ccc',
      height: 100,
      justifyContent: 'center',
      marginVertical: 8,
      marginHorizontal: 16,
      padding: 20,
   },
   title: {
      fontSize: 32,
   },
});
export default VirtualizedListExample;

出力

ReactNativeでのVirtualizedListコンポーネントの使用法を説明しますか?


  1. ReactNativeSwitchSelectorコンポーネントについて説明する

    SwitchSelectorコンポーネントは、ラジオトグルボタンに似ています。 2つ以上の値で選択できます。 SwitchSelectorを使用するには、以下に示すようにパッケージをインストールする必要があります- npm i react-native-switch-selector --save-dev 基本的なSwitchSelectorは次のようになります- <SwitchSelector    106    React Native – Q&A    options={youroptions} &

  2. ReactNativeで「テキスト文字列は<Text>コンポーネント内にレンダリングする必要があります」というエラーを処理するにはどうすればよいですか?

    アプリの開発中に、上記のエラーに遭遇する可能性があります。エラーを発生させるコードは次のとおりです- 例 import React from "react"; import { Image , Text, View, StyleSheet } from "react-native"; export default class App extends React.Component {    render() {       return (         &nbs