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

  • このエントリーをはてなブックマークに追加
  • Pocket

はじめに

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

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

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

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

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

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

watchmanのインストール

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

React Native CLIインストール

プロジェクトの起動

新規プロジェクト作成

iOSエミュレーターの起動

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

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

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

xcodeでTeamを設定しろと言われたら
プロジェクトを選択し、[General]>[Signing]>[Team]から自身のApple accountを設定する。

nodeのパスが合ってない
[Build Phases]>[Bundle React Native code and images]で読み込んでいるNODE_BINARYのパスを自分の環境に合わせる。

nodeのパスを確認するコマンド

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

スポンサーリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*