くま's Tech系Blog

基本的には技術で学んだことを書き留めようと思います。雑談もやるかもね!

ReactNativeの環境構築

今回はReactNativeの環境構築手順を記載したいと思います。

NodeとWatchmanのインストール

ReactNativeをインストールする時にnpmコマンドを使うために、Nodeのインストールが必要になります。

WatchmanはFacebookが提供するファイルシステムの変更を検知するツールです。

必須ではないですが、インストールしましょう!

$ brew install node
$ brew install watchman

React Native CLIのインストール

$ npm install -g react-native-cli

バージョン指定をする場合は後ろにバージョンを追加しましょう。

$ npm install -g react-native-cli (バージョン)

インストールが完了したら、バージョンを確認してみましょう。

$ react-native -v

react-native-cli: (バージョン)
react-native: n/a - not inside a React Native project directory

react-nativeのバージョンが表示されないのはプロジェクトがないためです。

プロジェクトがあれば、フォルダまで移動して、実行してみてください。

なければ、下記コマンドで作成してください。

$react-native init Project

最後にプロジェクトフォルダまで移動して、下記コマンドでアプリを実行してみましょう。

$react-native run-ios or react-native run-android

実行できれば、成功です。

端末を指定してエミュレータを実行する場合は下記のように行います。(iOSの場合)

// 使える端末の一覧の表示
$xcrun simctl list devices

$react-native run-ios --simulator='iPad Pro (11-inch) (12.1)'

ただ、失敗することが多く、別途設定が必要になると思うので、別記事でトラブルシューティングを記載したいと思います。

参照

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

iOS Simulatorの使用可能リストを表示する方法