react-nativeで一人前のiOSアプリ開発者を目指す 第2回 天気予報アプリ

react-nativeで一人前のiOSアプリ開発者を目指す 第2回

こんにちは、個別指導塾コミット塾長、AWESOME開発担当の船津です。

今回はreact-nativeでopen weather map APIのデータを取得して表示するアプリを制作します。

下準備

open weather map APIのキーを取得します。
http://openweathermap.org/apiでアカウント登録をして、APIキーを取得して下さい。

今回は3つファイルを作ります。
プロジェクトは前回のFirstProjectをそのまま使いまわします。

  • index.ios.js アプリの登録を行います
  • Firstproject.js こちらがアプリ本体のファイルです。モジュールとしてindex.ios.jsに読み込みます
  • Forecast.js モジュールとしてindex.ios.jsに読み込みます

 

中身は以下の通り。やっていることは。

  • AppRegistryというコンポーネントを利用しますと宣言
  • FirstProjectという名前でアプリを登録
  • モジュール化したFirstProject.jsを読み込み

次にFirstProject.jsやっていることは
使うコンポーネントを宣言
モジュール化しているForecast.jsを読み込み

皆さんが気になるであろうポイントを説明していきます。

 

 

ここではthis.stateでzip,forecastの初期状態を定義しておき、zipに入力があれば、weather apiからjsonをfetchしてきて、中身をforecastにsetStateで代入しています。今回はES6での記法を使っているので、getInitalStateは使えず、this.onChange.bindの部分にてコンストラクタにbindします。
詳しくはhttps://facebook.github.io/react/docs/reusable-components.html#es6-classesを参照して下さい

 

webページでは背景画像設定をcssに書きますが、react-nativeではもう少し直感的にimageタグを使って書くことが出来ます。
resizeModeはbackground-sizeと同じように指定することが出来ます。
今回は画像サイズによらず画面いっぱいに広がって欲しかったので、スタイルにalignSelf: ‘stretch’指定しています。

apiを一度も叩いていない場合はforecastが空なので、条件分岐を書きます。
contentの中身はrenderの中で{content}として呼び出されています。

最後にForecast.jsです。

このあたりのコードの理解が難しいのではないでしょうか。
this.propsではコンストラクタで定義された値を参照できます。
データ表示部分だけ別ファイルにして管理しやすくしています。

いかがだったでしょうか?react-nativeをはじめてみたものの、記法を新しいものに変えてみたのもあってかなり苦戦しています。

今回の参考資料

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →