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

3章 はじめてのReact Native アプリケーション作成 #2

前回の続き...

kyaukyuai.hatenadiary.jp

iOSの依存関係

iOSのアプリを開発・リリースするために、iOSデベロッパーアカウントを獲得する必要があります。アカウント作成は無料で、開発にはそれで十分です。アプリをiOSのAppストアに公開する際に、ライセンスが必要になります。ライセンス料は年に99ドルほどかかります。
 
もしXcode IDEiOS simulators、iOS SDKを含めたXcodeのインストールが終わってないのであれば、ダウンロード・インストールをしてください。XcodeのウェブサイトまたはAppストアからダウンロードできます。
 
Xcodeのインストール後、ライセンスを取得すれば全てOKです。
 

新しいアプリ作成

新しいアプリ作成するために、React Nativeコマンドツールを利用します。下記のコマンドでReact Native、iOSAndroidの全てを含めたボイルプレートが作成されます。
 
react-native init FirstProject
 
結果的に下記の構造のディレクトリが作成されます。
 

f:id:kyaukyuai:20160221213424p:plain

 
ios/ と android/ のディレクトリには、それぞれのプラットフォームに関連したボイルプレートが含んでいます。React コードは、index.ios.js、index.android.js に配置されています。これらは、それぞれReact Applicationのエントリーポイントになります。通常、npm経由でインストールされたnodeモジュールは、node_modules/ フォルダに配置されます。
 

iOSのReact Nativeアプリを動かしてみよう

はじめに、React NativeのiOSバージョンを動かしてみましょう。シミュレータまたは実機のどちらでも動かすことができます。
 
ios/ ディレクトリに配置されている FirstProject.xcodeproj ファイルをXcodeでオープンしてください。左上にあるRunボタンを押すことで、アプリのbuildとrunを始まります。ここで様々なiOSシミュレータを切り替えることができます。
 

f:id:kyaukyuai:20160221213535p:plain

 
Runボタンを押すと、React packagerが自動的に新しいターミナルで開かれるはずです。もしエラーが出た場合は、npm installnpm startコマンドをFirstProject/ ディレクトリ以下で試してみましょう。

 

下記のスクリーンショットのようになるべきです。
f:id:kyaukyuai:20160221213658p:plain
 
packagerが準備されると、デフォルトのアプリがiOSシミュレータと共に起動します。下記のようになるでしょう。
 

f:id:kyaukyuai:20160221213802p:plain

 
アプリに変更を反映するために、packagerが常に起動している必要があります。もしpackagerがクラッシュした場合は、packagerをリスタートする必要があります。