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

UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

React NativeでのiOSアプリ作成入門 | 環境構築編

Facebookが開発したReactJSを利用してAndroid/iOSのクロスプラットフォーム開発ができるReact Nativeがあります。

BSDライセンスで公開されているオープンソースであり、利用に特に制約はありません。

今回はreact-native-starter-appという有志が作成したデモアプリをXcode付属のiOSの仮想マシンで動作させるところまで実行します。

今回のデモ環境

  • OS: MacOS Sierra 10.12.3
  • Node.js 7.10.0

もしNode.jsがインストールされていなければHomebrewでダウンロードしておきます。


brew install node

開発に必要なツールをインストール


brew install watchman
npm install -g react-native-cli

1. Xcodeをダウンロードする

最初にXcodeの最新版をApp Storeから落としてきます。

React Nativeに手を出すような人であれば特に説明をする必要はないと思います。

React Nativeの準備をする

まずは任意の作業用ディレクトリにreact-native-starter-appを落とします。

GitHub - mcnamee/react-native-starter-app: A React Native boilerplate app to get you up and running very, very quickly

git clone https://github.com/mcnamee/react-native-starter-app.git
cd react-native-starter-app

アプリの起動に必要なJavaScriptライブラリをインストールします。 バージョンなどはpackage.jsonに記述されている通りになります。

sudo npm install

そして次に

react-native run-ios

するとビルドが始まります。最初はReact Nativeの各ライブラリを一からコンパイルするので時間が掛かります。

最後に

...

Check dependencies



** BUILD SUCCEEDED **


Installing build/Build/Products/Debug-iphonesimulator/StarterKit.app
Launching org.reactjs.native.example.StarterKit
org.reactjs.native.example.StarterKit: 23239

となったらビルドが成功します。

自動的にiOSの仮想マシンが起動して以下のようにアプリが表示されるはずです。

f:id:mochizuki_p:20170510223946p:plain