React Native超入門~インストールからプロジェクト起動まで~

         

はじめに

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のバージョン確認

$ node -v

• nodebrewで最新バージョンのNode.jsをダウンロード

$ sudo nodebrew install-binary latest

nodebrewがインストールされていない場合
公式ドキュメントからインストールしましょう。

• ローカルで使用可能なNode.jsのバージョンを確認

$ nodebrew ls

• ダウンロードしたNode.jsを使用

$ nodebrew use v7.9.0

• Node.jsのバージョンを確認

$ node -v
v7.9.0

watchmanのインストール

Facebookが提供するファイルシステムの変更を検知するツール。開発効率を上げるためにもインストールしましょう。

$ brew install watchman

React Native CLIインストール

$ sudo npm install -g react-native-cli

プロジェクトの起動

新規プロジェクト作成

$ react-native init [New project]
$ cd [New project]

iOSエミュレーターの起動

$ react-native run-ios

初回ビルド時は結構時間がかかります。

Cmd + Rで再読み込みできます。

バージョンによるエラーが出た場合
バージョンによってエラーとなる場合あり、package.jsonのバージョンを以下の通りに設定する。

"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のパスを確認するコマンド

$ which node

※2017/5/15時点ですが、チュートリアル通りにやっても幾つかはハマりました。
解決しない場合は、公式リポジトリのissueなどを当たってみるといいかもしれません。