- FlatListについて分からない人
- リスト表示の仕方がわからい人
という疑問、悩みがある方向けの記事となっています。
1. 概要
今回は、リスト表示をしたい時の方法としての、”FlatListコンポーネント”について紹介していきます。プラスαとして”ListItemコンポーネント”についても紹介します。
2. FlatList
2.1 FlatListとは
ある情報(配列データ)を整列して表示(レンダリング)させることができるコンポーネントです。
公式ドキュメント: FlatList
2.2 FlatList使い方
FlatListを使うと以下のようにリスト表示させることができます。
結果
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
import React from 'react'; import { StyleSheet, Text, View, FlatList } from 'react-native'; const Array = [ { title: 'Apple', subTitle: 'Fruits', }, { title: 'Tomato', subTitle: 'Vegetables', }, { title: 'water', subTitle: 'drink', }, ]; export default class App extends React.Component { constructor(props) { super(props); this.state = { data: Array, } } render() { return ( <View style={styles.container}> <FlatList data = {this.state.data} renderItem={({ item }) => <View style={styles.textView}> <View> <Text style={styles.text}>{item.title}</Text> </View> <View> <Text style={styles.subText}>{item.subTitle}</Text> </View> </View> } keyExtractor={item => item.id} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, marginTop: 50 }, textView: { backgroundColor: 'black', padding: 15, marginVertical: 8, marginHorizontal: 16, }, text: { fontSize: 30, color: "white" }, subText: { fontSize: 20, color: "lightblue" }, }); |
ソースコードについて解説
今回は、以下のように配列Arrayに3つの情報を設定して、リスト表示させていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const Array = [ { title: 'Apple', subTitle: 'Fruits', }, { title: 'Tomato', subTitle: 'Vegetables', }, { title: 'water', subTitle: 'drink', }, ]; |
インポート
まず、FlatListは、react-nativeライブラリからインポートします。|
1 |
import { StyleSheet, Text, View, FlatList } from 'react-native'; |
初期値設定
次に、下記のConstructor(props)で、初期値設定を行います。this.state.dataの初期値にArray変数を設定します。
|
1 2 3 4 5 6 |
constructor(props) { super(props); this.state = { data: Array, } } |
FlatListに値を設定
FlatListでは、リスト表示させたい値をdataプロパティに設定し、renderItemプロパティでdataに設定した配列の値をリスト表示します。|
1 2 3 4 5 6 |
<FlatList data = {this.state.data} renderItem={({ item }) => // ここにテキストを表示できるコードを書く } /> |
(ここで出てくるrenderItem={({ item }) =>の「item」とは、 dataに設定した値を示します。)
後は、renderItem内に、「item.title」と「item.subTitle」をViewとTextコンポーネントを使って以下のようにコードをかけば、リスト表示できます。
|
1 2 3 4 5 6 7 8 9 10 11 |
・・・ renderItem={({ item }) => <View style={styles.textView}> <View> <Text style={styles.text}>{item.title}</Text> </View> <View> <Text style={styles.subText}>{item.subTitle}</Text> </View> </View> ・・・ |
3. ListItem
ぜひ、FlatListと一緒に使ってもらいたいコンポーネントを紹介します。
3.1 ListItemとは
下記の公式ドキュメントにより、
「ListItemsは、連絡先リスト、プレイリスト、メニューなどの情報の行を表示するために使用されます。これらは非常にカスタマイズ可能で、スイッチ、アバター、バッジ、アイコンなどを含めることができます。」と書かれています。
つまり、ListItemを使うことで、リスト表示した項目をカスタマイズできるということです。
公式ドキュメント: ListItem
3.2 ReactNativeElementsのインストール
ListItemは、ReactNative-Elementsライブラリのコンポーネントであるので、ReactNative-Elementsライブラリを使う為に、下記のコマンドを実行してインストールします。
|
1 |
$ npm install --save react-native-elements |
3.3 ListItem使い方
以下のようにリスト表示することができます。
結果
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import React from 'react'; import { StyleSheet, Text, View, FlatList } from 'react-native'; import { ListItem } from 'react-native-elements'; const Array = [ { title: 'Apple', subTitle: 'Fruits', }, { title: 'Tomato', subTitle: 'Vegetables', }, { title: 'water', subTitle: 'drink', }, ]; export default class App extends React.Component { constructor(props) { super(props); this.state = { data: Array, } } render() { return ( <View style={styles.container}> <FlatList data = {this.state.data} renderItem={({ item }) => <ListItem data = {item.data} linearGradientProps = {{ colors: ['lightblue', 'blue'], start: [1, 0], end: [0.3, 1], }} title = {item.title} subtitle = {item.subTitle} style = {styles.textView} titleStyle = {styles.text} subtitleStyle={styles.subText} chevron={{color: "lime", size: 24}} /> } keyExtractor={item => item.id} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, marginTop: 50 }, textView: { borderWidth: 0.5, borderColor: "white", }, text: { fontSize: 30, color: "white" }, subText: { fontSize: 20, color: "lightblue" }, }); |
プロパティ
ListItemのプロパティ
| title | メインタイトル |
| titleStyle | メインタイトルのスタイル |
| subtitle | サブタイトル |
| subtitleStyle | サブタイトルのスタイル |
| chevron | リストの右に表示されている”>”(アイコン) |
| linearGradientProps | リストのグラデーションを設定することができる。 詳しくは、以下の表に記載します。 |
linearGradientPropsの設定値
| colors | 少なくとも2つの色が必要です（それ以外の場合は、指定色の塗りつぶしになります）。 |
| start | [x,軸 y軸]のグラデーションの開始位置を表します。たとえば[0.3, 1]の場合、 グラデーションは左から30％、上から100％から始まります。 |
| end | グラデーションの終了位置を表す。startと同処理。 |
など数多くのカスタマイズが可能です。 他にもチェックボックスやアイコン表示、各リスト項目にイベント設定などのカスタマイズが可能です。
4. まとめ
FlatListコンポーネントについて紹介しました。FLatListを使うとリスト表示する系のアプリを作れることができるので、ぜひ使ってみてください。
