ReactNativeの学習を続けていきます。
前回まででセットアップが終わり、XCodeで画面を立ち上げることができました。
といっても、指示通りにやるだけですが。。
今回からは、公式のチュートリアルに従って映画リストを作成していきます。
データをモックする
映画情報のデータをモックします。
以下のコードをimport文の下辺りに追記します。
var MOCKED_MOVIES_DATA = [ {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}}, ];
映画情報のレンダリング
取得した映画情報をレンダリングします。
まず、画像を扱うために、importする要素を増やします。
gista68bd6e7d5fb30dad0c1da3d261e492d
次に、レンダリング内容を変更します。デフォルトではHello worldなので、映画情報に差し替えます。
gistbd3851ee98872ffe0c3c9a14868a61a1
さらに、スタイルも刷新します。
gist22dcb0a9f66d2a8b1285927665d32acb
ここでシミュレーターをリロードすると以下のとおり。
取得したサムネイル画像とともに、きちんとレンダリングがなされています。
手短ですが、今日はここまで。
