【React Native】ニュースアプリの記事リストにサムネイルを表示させる

前回記事で作った、fetchAPIを利用したニュースアプリにサムネイル表示機能を実装する。

https://chusotsu-program.com/react-native-fetch-api

まずは成果物から見てみよう。

縦並びの記事リスト。
各記事は左にサムネイル、右に記事タイトルとドメインを表示させている。

それでは前回記事で編集したApp.jsをベースにコードを追記していく。

ライブラリのインポート

今回は画像表示用のImageコンポーネントを追加でインポートする。

import {
  Text, View, FlatList, Image
} from 'react-native';

取得したサムネイル画像を表示させる

すでにfetchAPIで必要な情報は全てJSON形式で取得しているので、今回編集するコードはrenderメソッド内のみだ。

まずは画像表示用のコードを確認しておこう。

<Image
  style={{
    width: 50,
    height: 50
  }}
  source={item.data.thumbnail}
/>

Imageコンポーネントは、画像の幅・高さを指定しないと画像が表示されないため、今回はそれぞれの値を50に設定する。

記事タイトルと横並びにしたいので、出来上がりのコードは以下のようになる。

<View style={{
  flex: 1,
  flexDirection: 'row',
  width: '100%'
}}>
  <Image
    style={{
      width: 50,
      height: 50
    }}
    source={item.data.thumbnail}
  />
  <Text>{item.data.title}</Text>
</View>

記事のサイトドメインを表示させる

次に記事タイトルの下にドメインを表示させる。

現在、画像とテキスト部分（タイトル）が横並びとなっているが、ドメインもタイトルを内包するViewに加えたいので、Imageの後にViewを追加し二つのTextコンポーネントを中に入れる。

<View style={{
  flex: 1,
  flexDirection: 'row',
  width: '100%'
}}>
  <Image
    style={{
      width: 50,
      height: 50
    }}
    source={item.data.thumbnail}
  />
  <View style={{
    flex: 1,
    flexDirection: 'column'
  }}>
    <Text>{item.data.title}</Text>
    <Text style={{color: '#ababab', fontSize: 10}}>{item.data.domain}</Text>
  </View>
</View>

ここまで紹介したコードのとおりrenderメソッドを更新すると、以下のようなUIとなるはずだ。

これでニュースアプリの原型となる記事リストのUIが出来上がった。