React Nativeの環境構築（初心者）

– by

環境

  • Mac OS High Sierra v10.13.6
  • node v10.9.0
  • npm v6.2.0
  • VSCode 1.26.1
  • Xcode v9.4.1
  • Android Studio v3.1.2
  • JDK 1.8.0_131
  • yarn v1.9.4

Node.jsをインストール

  • Node.jsのインストールは
  • Node.jsのバージョン

node -v

v10.9.0
  • npmのバージョン
npm -v

6.2.0

VSCodeをインストール

  • VSCode

  • VSCodeのプラグインはこんなの入れました

    • ESlint
    • file-icons

yarn インストール

  • npmといっしょにつかえる。package.json互換のJavaScriptパッケージマネージャーが「Yarn」。高速にパッケージをインストールできるらしい。詳細はこのサイトに詳しくのってる

yarn.lock

brew install yarn

watchman インストール

  • watchmanファイルの変更を監視し、そのあとのタスクも追加できるみたい。
    特徴としてはファイルの拡張子も問わず、指定したファイル（パターン指定可）が変更されたらそれをトリガーに何らかの処理を行うと言ったソフトウェアになるようです。
brew install watchman

react-native-cliをインストール

React Native関連のコマンドラインインターフェース

npm install -g react-native-cli

プロジェクト作成

react-native init react-native-sample
  • 「-」ハイフンはプロジェクト名で使えない。
react-native init sample-app
"sample-app" is not a valid name for a project. Please use a valid identifier name (alphanumeric).
  • キャメルケースのプロジェクト名で作成
react-native init reactNativeSample

iOSのエミュレーターで起動

react-native run-ios
  • シュミレーターを指定して起動
run-ios --simulator="iPhone SE"
  • 最初の起動ではビルドに時間がかかるみたい、ターミナルがもう一つ起動してインストールされる

androidのエミュレーターで起動

  • androidの起動１回目
react-native run-android
  • エミュレータが起動しないエミュレータを立ち上げた状態でないとだめか？
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 1 mins 32.61 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html
  • エミュレータを予め起動する　（Pixel_2_API_27はエミュレータ名。エミュレータ名にスペースがあると「_」に置換すること）
 ~/Library/Android/sdk/tools/emulator @Pixel_2_API_27 &
  • androidの起動2回目
react-native run-android
  • また同じDeviceExceptionになった
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!
  • adbを再起動してみる
adb root
  • androidの起動3回目
react-native run-android
  • 起動できた！！「Welcome to React Native!」が表示された。androidの場合は事前にエミュレーターを立ち上げないとだめみたい。もしかして１つしかエミュレーターない場合は、大丈夫なのかも。

  • MetroBundlerだけを起動する

    • run-ios、run-androidをするとMetroBundlerが自動で起動するが、手動でも起動ができる。
  react-native start
  • ポートが使用されていると起動しない。使用済みだったらlsofで検索してkillする
lsof -i:8081
kill -9 [プロセスID]