読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

ReactNative入門(2)

ReactNative

ReactNativeの学習を続けていきます。

 

chuckwebtips.hatenablog.com

 

前回まででセットアップが終わり、XCodeで画面を立ち上げることができました。

といっても、指示通りにやるだけですが。。

 

今回からは、公式のチュートリアルに従って映画リストを作成していきます。

facebook.github.io

 

データをモックする

映画情報のデータをモックします。

以下のコードをimport文の下辺りに追記します。

var MOCKED_MOVIES_DATA = [ {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}}, ];

 

映画情報のレンダリング

取得した映画情報をレンダリングします。

まず、画像を扱うために、importする要素を増やします。 

gista68bd6e7d5fb30dad0c1da3d261e492d

 

次に、レンダリング内容を変更します。デフォルトではHello worldなので、映画情報に差し替えます。

gistbd3851ee98872ffe0c3c9a14868a61a1

 

さらに、スタイルも刷新します。

gist22dcb0a9f66d2a8b1285927665d32acb

 

ここでシミュレーターをリロードすると以下のとおり。

f:id:chuck0523:20160413082300p:plain

取得したサムネイル画像とともに、きちんとレンダリングがなされています。

 

手短ですが、今日はここまで。