react-nativeで一人前のiOSアプリ開発者を目指す 第1回 アプリを動かしてみる

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

こんにちは、個別指導塾コミット塾長、AWESOME開発担当の船津です。
この頃react-nativeが触りたすぎて頭がおかしくなりそうだったので、一人前のiOSアプリ製作者を目指してreact-nativeを始めることにしました。
本の通りに進めてもかなりハマりどころがあったので記事にしていきます。

 

日本語でreact-nativeに的を絞った本が無かったのでamazonで洋書を買いました。
手元にこの本があると記事が読みやすくなりますよ〜
Learning React Native

 

注文してから2週間後…本が届きました。

なんか可愛い動物が書かれてますね。

 

react-nativeで一人前のiOSアプリ開発者を目指す 第1回 アプリを動かしてみる

まずはチュートリアル通りに進めてみます。
天気予報を検索するアプリを作っていきます。
それではインストールから

これだけで最初のプロジェクトができました。
実際に動くのを見てみましょう。
FirstProject/ios/FirstProject.xcodeprojをクリックするとxcodeが立ち上がるので、プロジェクトをビルドしてアプリを立ちあげましょう。

ちなみに最初のFirstProject/index.ios.jsはこんな感じになっています。
まずはこのファイルをいじっていきます。

チュートリアルでは天気情報を表示するアプリを作ります。
まずはzipコードを入力、表示できるようにします。

renderの上に以下のコードを追加せよとのこと

言われるがまま追加して動かしてみると、

Fixing error: Warning: getInitialState was defined on a plain JavaScript class. This is only supported for classes created using React.createClass.

とのこと、なるほど普通のjsでクラス定義されてるから書き直してねってことかな。
ここを参考に

こうしました。エラーもでなくなりこれでOKのようです。

TextInputを使うためにimportに追加しておきましょう。

ここまでできると次のような画面になると思います。

react-nativeで一人前のiOSアプリ開発者を目指す 第1回 アプリを動かしてみる

ここまでのコードはこんな感じです。

 

次回はopenweathermapAPIからのデータ取得、表示までを行います。

Instagram Feed

Load More

Instagram

専務取締役

funatsukeisuke

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

他の投稿を見る →