前回記事で作った、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が出来上がった。