はじめに
React Nativeを入れてデモを動かすまでのお話です。
公式サイトのインストール手順を参考に進めていきます。
導入部分のリンク。
http://facebook.github.io/react-native/docs/getting-started.html#content
前準備
以下を準備します
- Xcode及びXcode Command Line Tools
- Homebrew
Xcode / Command Line Tools
XcodeはApp Storeから。
Command Line Toolsは6だと自動でインストールされるようです。
Homebrew
Homebrew 公式サイト
公式サイトからコマンドをコピペ、ターミナルに貼り付けてインストールします
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
筆者の環境ではすでに入っていたので、更新をしておきます。
brew update
本編〜React Nativeをインストール、そしてデモの実行〜
その前に・・・
node.jsのバージョンについて
React Nativeはどうもnode.jsの要求バージョンはv0.10のようです。
Homebrewからインストールすると2015/03/30現在でv0.12が入ります。
そのためnodebrewをHomebrewからインストールし、nodebrewを使ってnode.js v0.10を入れます
brew install nodebrew
nodebrew install 0.10
nodebrew use 0.10
echo 'export PATH=$PATH:~/.nodebrew/current/bin' >> ~/.bash_profile
source ~/.bash_profile
watchman, flow
公式サイト上ではwatchman並びにflowのインストールが推奨されてますのでそちらも入れます。
brew install watchman
brew install flow
筆者環境では~/.bash_profileがあったのでそこに追記する形を取っています。
React Nativeのインストール
npm上からインストールを行います
npm install -g react-native-cli
プロジェクトの作成
React Nativeをインストールすると"react-native"コマンドが利用できるようになっています。
コマンドを利用してプロジェクトを作成します。
react-native init [プロジェクト名]
デモの実行
実行すると新しくプロジェクト名のディレクトリが作成されています。
その中にXCodeのプロジェクトファイルがあるので、開いてCommand+Rで実行すればもれなくデモが見れます。
デモを実行した状態でも、"index.ios.js"を編集してCommand+Rすることで再実行することなく編集結果をプレビューすることができます。
TIPS的な
- Homebrewからのインストールでエラーになるんだけど？
いくつかのディレクトリ/ファイルの権限が正しくないと、リンクを張る段階でエラーになるようです。
筆者の環境では/usr/local/share/man/man*でエラーが出ました。
sudo chown -R [ユーザー名]:admin /usr/local/share/man/man*
こんな感じで権限を設定し直しました。
- node.jsのインストールで（ｒｙ
これまたmoduleだったりなんだりで怒られました。
こちらに関してはすっきり削除しました（本当に良かったのかな？）
sudo rm -rf /usr/local/include/node/
nodebrewを入れる前にHomebrewから直接入れる場合にもエラーが出ましたが、その際には以下をしてました
lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom \
| while read i; do
sudo rm /usr/local/${i}
done
sudo rm -rf /usr/local/lib/node \
/usr/local/lib/node_modules \
/var/db/receipts/org.nodejs.*
まとめ
React Nativeを動かすまでの流れを前準備から簡単にまとめてみました。
筆者はReact Nativeとは関係の無いところで詰まってばっかりでしたが、無事に動かすところまで行きました汗
普段Homebrewだったりnode.jsだったりをそこまで使っていないので、色々と間違っているところだったり、こうするといいよ等あれば言って頂けると助かります。