asmz.beer

麦芽(ばくが、英語:malt)とは、麦、特に大麦の種子を発芽させたもので、ビール、ウイスキー、水飴の原料となる。(Wikipediaより)

React Native開発環境整備メモ

以前ちょっとアルバイト的な感じでReact Native触る機会があったものの、既存プロジェクトの改修という形で入ったこともあって初期の環境構築作業などちゃんとまとめておらず、いざ他の人にも教えよう!という時に困ってしまったので、だいぶ今更ながら基本的な作業をまとめるなど。

React Nativeとは

既に世の中にいろんな資料出回ってるので、そちらを参照のこと。

React Native 入門

環境整備

Xcode

Mac App Storeよりインストール

Android Studio

ダウンロードはこちらから developer.android.com

初期設定は以下のような感じ

環境変数に以下を設定

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

Node.js

Node.jsはnodebrew経由で導入した方が、複数Ver扱えて都合が良いですね。

$ brew install nodebrew
$ nodebrew install {version}  # かなり時間かかる
$ nodebrew use {version}

React Native導入

公式ドキュメントを見てもらうと分かりますが、導入自体は以下のステップで済みます。

$ brew install node   # nodebrewで導入済みなら不要
$ brew install watchman
$ npm install -g react-native-cli

iOS/Androidアプリの起動

とりあえず新規プロジェクトそのままのアプリを、試しにiOS/Androidそれぞれのシミュレータで起動してみます。

まずは以下のコマンドで新規プロジェクト作成。

$ react-native init AwesomeProject

そして以下のコマンドでReact Nativeを起動することで、ローカルにWebサーバが立ち上がります。 (サーバ立ち上げ中のみ各デバイスでアプリが動作できるので、別コンソールで実行した方が良いです)

$ cd AwesomeProject
$ react-native start

iOS

  • 生成されたiOSプロジェクトをXcodeで開く
    • AwesomeProject/ios/AwesomeProject.xcodeproj
  • Xcodeで「Run」

Android

チュートリアル

とりあえずこれを一度やってみると、雰囲気がつかめる。

facebook.github.io

備考

  • React Native、XcodeAndroid Studioを同時に立ち上げて作業していると、やたらCPUパワー食う(PC温度が上がりファンの音が大きくなる)