はじめに
こんにちは、nukkyです。
しばらくブログの執筆からは離れていたので久々のブログになりますが、今回はReactNativeの環境を構築し、AndroidとiOSのシミュレータで実行するまでやっていきたいと思います。
準備
HomeBrewをインストール
Mac用のパッケージマネジメントツール、大抵のパッケージをインストール・管理できますし開発者なら大体入れてると思いますが念のため。
| 1 | /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" |
これでインストールできます。
node.jsのインストール
| 1 | brew install node |
これで、node.jsがインストールされます、後述で使用するnpmコマンドも使用できるようになります。
Watchmanのインストール
| 1 | brew install watchman |
これでインストールされます。
React Native CLIのインストール
| 1 | npm install -g react-native-cli |
npmでインストールします。これでReactNativeの準備は完了です。
サンプルプロジェクトの作成
| 1 | react-native init HogeProject |
これで準備は完了です！
iOSシミュレータでの実行
Xcodeのインストール
まずはiOSの開発環境であるXcodeをインストールします。XcodeはAppStoreで公開されているのでAppStoreからインストールしてください。
実行
準備で作成したHogeProjectのディレクトリからターミナルで以下のコマンドを実行してください。
| 1 | react-native run-ios |
これでビルドが始まり、iOSのシミュレータが起動します。
シミュレータを指定して起動
| 1 | xcrun simctl list devices |
このコマンドで利用できるデバイスがわかるので、利用できるデバイスのシミュレータを以下のように指定して起動することができます。
| 1 | react-native run-ios --simulator="iPhone Xʀ" |
Androidシミュレータでの起動
Android Studioのインストール
公式からAndroid Studioをダウンロードしてファイルを実行するとセットアップが始まるのでインストールを進めてください。
仮装デバイスの作成
「AVD Manager」で仮装デバイスを作成します。
・Android Studio で、[Tools] > [Android] > [AVD Manager] を選択します。
・ツールバーから [AVD Manager] AVD Manager アイコン をクリックします。
・Android Studioの起動画面から[Configure] > [AVD Manager] を選択します。
「AVD Manager」を開いたら[Create Virtual Device…]を選択し作成可能なデバイスの一覧が表示されるので画面の指示に従い仮装デバイスを作成してください。
実行
仮装デバイスを実行した状態で、以下のコードを実行してください。
| 1 | react-native run-android |
さいごに
勉強がてらReactNativeを初めて見ましたが、楽しくなってきたのでこれからもReactNativeの記事を書いていきますのでよろしくお願いします。
おすすめ書籍
