第4章　画面のスクロールとリストの利用

第3節　演習問題

この節ではこの章で学習した内容を踏まえて演習問題に取り組んでいただきます。

第2項　解答例

解答例（完成品）のプログラムは「exercise04-comp」フォルダにあります。

データは「オブジェクトの配列」として用意されています。このようなデータをリストで表示する際にはFlatListコンポーネントを使うのが適切です。

const DATA = [
  {
    id: '1',
    title: 'JavaScript',
    summary: 'この講座ではJavaScriptの基礎文法を学習します。'
  },
  // 省略
];

React Nativeのリストビューは単純に文字列をリスト表示するだけではなく、表示方法を自由に設定できます。今回であればtitleの文字サイズを大きくして背景を色付けし、summaryは通常の文字サイズで表示するようにしています。詳しくはListItemクラスをご参照ください。

FlatListコンポーネントではdataプロパティで表示する内容、renderItemプロパティで一つの項目を表示（描画）するための関数を指定します。renderItemメソッドにはオブジェクトが渡されるので分割代入で「一つの項目」を受け取る必要がある点に注意が必要です。ListItemコンポーネントには渡された「一つの項目」をそのまま渡します。

class Contents extends React.Component {
  renderItem({item}) {
    return (
      <ListItem item={item} />
    );
  }
  
  render() {
    return (
      <FlatList
        data={this.props.data}
        renderItem={this.renderItem}
      />
    );
  }
}

もしrenderItemメソッドを分割代入を使わずに、「renderItem(item)」のように書くと、React Nativeから渡されたオブジェクトがそのままListItemコンポーネントに渡されることになります。そのオブジェクトにはtitleやsummaryというプロパティはないため、以下のように表示が空になります。慣れないと何がいけないのかわかりにくいので注意してください。

さて、表示する内容は自由に設定できると書きましたがListItemでは「項目をタップすると反応」するようにしています（TouchableOpacityが設定してあります）。スマホアプリではこのように項目をタップすると画面遷移（項目の詳細画面に移動）するというユーザーインターフェースがよく用いられます。次章ではこの画面遷移の方法を学習します。