React Nativeの公式ドキュメントを和訳してみる 11 -リストビューの利用

注意

当記事はReact Native 0.51の公式ドキュメントの独自和訳です。間違いなどあればご指摘ください。

バージョン0.51のドキュメントに準拠します。

参照リンク先は基本的に元サイトです。リンク先サイトを和訳したらそのページに差し替えます。

本家サイトではシミュレータがあり、コードを編集しながら実行でき便利です。

Facebook社に無断なので怒られたら消します。

元サイト
facebook.github.io

React Nativeにはデータリストを渡すためのコンポーネントがあります。大抵はFlatListかSectionListを使う事になります。

FlatListコンポーネントは、似たような構造で変化しているデータをスクロールリストとして描画します。FlatListは時間とともに個数が変わるような長いデータリストに適しています。より包括的なScrollViewと異なり、FlatListは現在画面に表示されている要素のみを描画します。全ての要素を一度に描画するわけではありません。

FlatListコンポーネントには2つのpropが必要です。dataとrenderItemです。dataはリストの情報ソースです。renderItemはソースから一つのアイテムを取得し、描画用に整形されたコンポーネントを返します。

この例ではハードコーディングされたデータを用いた単純なFlatListを作ります。data propの中のそれぞれのアイテムはTextコンポーネントとして描画されます。FlatListBasicsコンポーネントは、それに従ってFlatListと全てのTextコンポーネントを描画します。

import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

// Create React Native Appを使っている時はこの行を飛ばす
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);

もし、iOS上のUITableViewのように、セクションヘッダーなどでセクションが分割されるようなデータセットを描画したい時は、SectionListを使うのが良いでしょう。

import React, { Component } from 'react';
import { AppRegistry, SectionList, StyleSheet, Text, View } from 'react-native';

export default class SectionListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

// Create React Native Appを使っている時はこの行を飛ばす
AppRegistry.registerComponent('AwesomeProject', () => SectionListBasics);

リストビューの一番よく使うケースの一つに、サーバーから取得したデータを描画するというのあるでしょう。それを実行するには、React Nativeでのネットワーキングを学ぶ必要があります。