Table of Contents
環境
- 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は、nodebrewを使ってインストールインスートルする。詳しくはこちら
- Node.jsのバージョン
node -v
v10.9.0
- npmのバージョン
npm -v
6.2.0
VSCodeをインストール
-
VSCodeのプラグインはこんなの入れました
- ESlint
- file-icons
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の起動1回目
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:
Introduction · React NativeThis helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environme...
- エミュレータを予め起動する (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の場合は事前にエミュレーターを立ち上げないとだめみたい。もしかして1つしかエミュレーターない場合は、大丈夫なのかも。
-
MetroBundlerだけを起動する
- run-ios、run-androidをするとMetroBundlerが自動で起動するが、手動でも起動ができる。
react-native start
- ポートが使用されていると起動しない。使用済みだったらlsofで検索してkillする
lsof -i:8081
kill -9 [プロセスID]