目次
はじめに
React NativeはFacebookが開発しているモバイル用のJavaScriptのフレームワークです。今までモバイルアプリは作りたいけど、ネイティブは書きたくない、Webの技術で書きたいといった人の選択肢はCordovaベースのフレームワークが主流でした。
元々Web用のUIライブラリとして普及してきたReactのモバイル版ということで注目度は高いと思います。
今回は、インストールからエミュレーターの起動までやってみます。
公式ドキュメントがよくできています。
公式チュートリアル
環境情報
MacBook Pro(OS X El Capitan)
react-native-cli: 2.0.1
react-native: 0.43.0
React Nativeインストール
Node.jsのインストール
現在(2017/5/15)のバージョンだとNode.js 4以上が必要。
- node.jsのバージョン確認
|
1 2 |
$ node -v |
- nodebrewで最新バージョンのNode.jsをダウンロード
|
1 2 |
$ sudo nodebrew install-binary latest |
nodebrewがインストールされていない場合
公式ドキュメントからインストールしましょう。
- ローカルで使用可能なNode.jsのバージョンを確認
|
1 2 |
$ nodebrew ls |
- ダウンロードしたNode.jsを使用
|
1 2 |
$ nodebrew use v7.9.0 |
- Node.jsのバージョンを確認
|
1 2 3 |
$ node -v v7.9.0 |
watchmanのインストール
Facebookが提供するファイルシステムの変更を検知するツール。開発効率を上げるためにもインストールしましょう。
|
1 2 |
$ brew install watchman |
React Native CLIインストール
|
1 2 |
$ sudo npm install -g react-native-cli |
プロジェクトの起動
新規プロジェクト作成
|
1 2 3 |
$ react-native init [New project] $ cd [New project] |
iOSエミュレーターの起動
|
1 2 |
$ react-native run-ios |
初回ビルド時は結構時間がかかります。
Cmd + Rで再読み込みできます。
バージョンによるエラーが出た場合
バージョンによってエラーとなる場合あり、package.jsonのバージョンを以下の通りに設定する。
|
1 2 3 4 5 |
"dependencies": { "react": "16.0.0-alpha.6", "react-native": "0.43.3" }, |
xcodeでTeamを設定しろと言われたら
プロジェクトを選択し、[General]>[Signing]>[Team]から自身のApple accountを設定する。
nodeのパスが合ってない
[Build Phases]>[Bundle React Native code and images]で読み込んでいるNODE_BINARYのパスを自分の環境に合わせる。
nodeのパスを確認するコマンド
|
1 2 |
$ which node |
※2017/5/15時点ですが、チュートリアル通りにやっても幾つかはハマりました。
解決しない場合は、公式リポジトリのissueなどを当たってみるといいかもしれません。