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