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

FlatListコンポーネントとは何ですか？ReactNativeでそれを使用する方法は？

FlatListは、リストアイテムをロードするために使用できるコンテナです。ヘッダーとフッターのサポート、複数列のサポート、垂直/水平スクロール、遅延読み込みなどが付属しています。

FlatListのいくつかの重要な機能は次のとおりです-

  • スクロール読み込みが付属しています
  • ScrolltoIndexサポートを使用してスクロールを調整できます
  • ヘッダーとフッターのサポートが付属しています
  • 複数列のサポート
  • クロスプラットフォーム
  • 設定可能な視認性コールバック

FlatListの基本構造は次のとおりです-

<FlatList
data={DataContainer} renderItem={ yourenderItem} keyExtractor={item => item.id} />

FlatListは、モバイル画面の現在のビューポートに収まる限られた数のアイテムの表示を処理するVirtualizedListコンポーネントから実装されます。残りのデータは、ユーザーがスクロールするとレンダリングされます。 dataやrenderItemなどの基本的な小道具を使用して、FlatListを作成できます。

FlatListを使用するには、次のようにreact-nativeからインポートする必要があります-

import { FlatList} from "react-native";

FlatListの重要なプロパティのいくつかを以下に示します-

フッターコンポーネントに必要な
小道具 説明
データ 表示するデータを含む配列。
renderItem renderItem（{item、index、separators}）;

  • item-リスト形式で表示されるのは、データフィールドのアイテムです。
  • インデックス-各アイテムにはインデックスが付けられます。
  • セパレーター-小道具のレンダリングに役立つ関数です。使用可能な関数は-
    • です。 

separators.highlight(),
separators.unhighlight(),
separators.updateProps().
ListEmptyComponent リストが空のときに呼び出されるコンポーネントクラス、レンダリング関数、またはレンダリング要素。リストが空のときに何かをしたい場合は、このコンポーネントが役立ちます。
ListFooterComponent すべてのアイテムの下部にレンダリングされるコンポーネントクラス、レンダリング関数、またはレンダリング要素。
ListFooterComponentStyle スタイリングはここで行うことができます。
ListHeaderComponent すべてのアイテムの上部にレンダリングされるコンポーネントクラス、レンダリング関数、またはレンダリング要素。
ListHeaderComponentStyle ヘッダーコンポーネントに必要なスタイリングはここで行うことができます。
水平 このプロパティをtrueに設定すると、アイテムが水平方向にレンダリングされます。
keyExtractor 指定されたインデックスの一意のキーを抽出します。キーはキャッシュに使用され、アイテムの並べ替えの追跡にも使用されます。（アイテム：オブジェクト、インデックス：番号）=>文字列;

例1：FlatListのアイテムを垂直に表示する

この例は、FlatListの動作を示しています。 FlatListを使用するには、最初にコンポーネントをインポートします-

import { FlatList , Text, View, StyleSheet } from "react-native";

FlatListと、Text、View、StyleSheetなどの他のコンポーネントが必要です。上記のように同じものがインポートされます。

インポートが完了したら、データをFlatListに表示する必要があります。データは、以下に示すようにthis.state.data内に保存されます-

this.state = {
   data: [
      { name: "Javascript Frameworks", isTitle: true },
      { name: "Angular", isTitle: false },
      { name: "ReactJS", isTitle: false },
      { name: "VueJS", isTitle: false },
      { name: "ReactNative", isTitle: false },
      { name: "PHP Frameworks", isTitle: true },
      { name: "Laravel", isTitle: false },
      { name: "CodeIgniter", isTitle: false },
      { name: "CakePHP", isTitle: false },
      { name: "Symfony", isTitle: false }
   ],
   stickyHeaderIndices: []
};

renderItemの関数を実装するには

以下の関数は、アイテムを取得し、以下に示すようにテキストコンポーネントに同じものを表示します-

renderItem = ({ item }) => {
   return (
      <View style={styles.item}>
         <Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text>
      </View>
   );
};

Textコンポーネントは、Viewコンポーネント内にラップされています。 item.isTitleは変数であり、true / falseであるかどうかがチェックされるため、太字になり、色が付けられます。

FlatListを実装するには

これは、データとrenderItemの小道具を持つFlatListの実装です。

<View style={styles.container}>
   <FlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name} />
</View>
>

this.state.data データに与えられます 小道具とthis.renderItem 関数はrenderItemに割り当てられています 小道具。

データに基づいて、データ配列から一意のキープロパティを指定できます。同じプロパティをprops keyExtractorに指定する必要があります。指定しない場合は、配列インデックスを key<と見なします。 / em> 値。

そのため、名前を一意のキーと見なし、同じものがkeyExtractorに割り当てられています。

keyExtractor={item => item.name}

FlatListを実装する完全なコードは次のとおりです。

import React from "react";
import { FlatList , Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: [
            { name: "Javascript Frameworks", isTitle: true },
            { name: "Angular", isTitle: false },
            { name: "ReactJS", isTitle: false },
            { name: "VueJS", isTitle: false },
            { name: "ReactNative", isTitle: false },
            { name: "PHP Frameworks", isTitle: true },
            { name: "Laravel", isTitle: false },
            { name: "CodeIgniter", isTitle: false },
            { name: "CakePHP", isTitle: false },
            { name: "Symfony", isTitle: false }
         ],
         stickyHeaderIndices: []
      };
   }
   renderItem = ({ item }) => {return (<View style={styles.item}><Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text></View>);};
render() {
   return (<View style={styles.container}><FlatList data={this.state.data} renderItem=   {this.renderItem} keyExtractor={item => item.name} stickyHeaderIndices={this.state.stickyHeaderIndices} /></View>);
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
   },
   item: {
      margin: 10,
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
   }
});

出力

FlatListコンポーネントとは何ですか？ReactNativeでそれを使用する方法は？

例2：FlatListのアイテムを水平方向に表示する

FlatListアイテムを水平に表示するには、FlatListコンポーネントにpropshorizo​​ntal={true}を追加するだけです。

import React from "react";
import { FlatList , Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: [
            { name: "Javascript Frameworks", isTitle: true },
            { name: "Angular", isTitle: false },
            { name: "ReactJS", isTitle: false },
            { name: "VueJS", isTitle: false },
            { name: "ReactNative", isTitle: false },
            { name: "PHP Frameworks", isTitle: true },
            { name: "Laravel", isTitle: false },
            { name: "CodeIgniter", isTitle: false },
            { name: "CakePHP", isTitle: false },
            { name: "Symfony", isTitle: false }
         ],
         stickyHeaderIndices: []
      };
   }
   renderItem = ({ item }) => {return (<View style={styles.item}><Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text></View>);};
   render() {
      return (<View style={styles.container}><FlatList horizontal={true}    data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name}    stickyHeaderIndices={this.state.stickyHeaderIndices} /></View>);
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: 100,
   },
   item: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 30,
      margin: 2,
      borderColor: '#2a4944',
      borderWidth: 1,
      height:100,
      backgroundColor: '#d2f7f1'
   }
});

出力

FlatListコンポーネントとは何ですか？ReactNativeでそれを使用する方法は？


  1. Google アプリの概要と使い方

    Google アプリは混乱を招く可能性があります。 「Google」を示唆する大きな G だけで携帯電話の画面に表示されます。 Chrome をすべての Web 検索やサイト訪問に使用しているため、最終的には使用しなくなる可能性さえあります。 Google マップを使用して、ある場所から次の場所に移動する場合があります。そして、他のタスクを支援する他のアプリがあります。 だから、尋ねるのは当然です… Google アプリとは Google アプリは Google 検索 ただし、ブラウザの標準の Google 検索バーよりも少し多くのことを行い、身の回りの世界を発見するのに役立ちます.

  2. React Native で動画を背景として使用する方法

    この投稿では、backgroundVideo を作成します。 React Nativeで。 React Native を使い始めたばかりの方は、私の記事 What you need to know to build mobile apps with React Native をチェックしてください。 デモ:Peleton ホーム画面 バックグラウンド ビデオは、アプリの UI に素晴らしい効果を追加できます。ここで行うように、たとえば広告を表示したり、ユーザーにメッセージを送信したりする場合にも役立ちます。 いくつかの基本的な要件が必要になります。開始するには、react-native 環