Windows10でReact Native環境構築やってみた
環境
OS:Windows10Pro
インストール物
Chocolatey
Windowsでの パッケージマネージャ。
Android Studio
Androidアプリ開発用IDE。
Node.js
React Native アプリのビルドやデバッグに必要。
yarn
Node.js のパッケージ・マネージャ。
Python
React NativeのビルドシステムはPythonを使っているため。
React-Native-Cli
React Native のプロジェクトを作成するための、React Native CLI ライブラリ。
Chocolatey
Powershellを管理者モードで開き、以下のコードを実行する。
> Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
GUIをインストールする場合は、以下のコードも実行する。
> @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
Android Studio
以下公式ページよりダウンロードする。
Node.js
nvm
Node.jsのバージョン管理ツール。これを使ってNode.jsをインストールするため、
以下のコードを実行してnvmをまずインストールし、アクティブにする。
※インストール後、PCの再起動が必要な場合がある。
> choco install nvm -y
Node.js
nvmコマンドで指定したバージョンをインストール
> nvm list available
(インストール可能なバージョンの一覧が表示される。)
> nvm install 12.22.1
(指定したバージョンのインストール)
> nvm use 12.22.1
(指定したバージョンを利用できる状態にする)
> node --version
v12.22.1
yarn
Powershellを管理者モードで開き、以下のコードを実行する。
※インストール後、PCの再起動が必要になる場合がある。
> choco install yarn -y
(インストール)
> yarn --version
(インストールされたか確認)
1.22.5
python
Powershellを管理者モードで開き、以下のコードを実行する。
※バージョンは要件に合わせる
※インストール後、PCの再起動が必要になる場合がある。
> choco install -y python2
(インストール)
> python --version
Python 2.7.18
(インストールされたか確認)
React-Native-Cli
Powershellを管理者モードで開き、以下のコードを実行する。
yarn global add react-native-cli
プロジェクトの作成
以下コマンドをプロジェクトを作成するディレクトリで実行し、プロジェクトを作成する。
※日本語を入れないように
> react-native init [プロジェクト名]
JavaScript
> react-native.cmd init [プロジェクト名] --template typescript
TypeScript
仮想デバイスをセットアップ
Android Studio を起動し、上で作ったプロジェクト名のフォルダに有る、androidフォルダを開きます。
JDKの指定
起動したら、メニューの「ファイル」→「プロジェクト構造」を開き、JDKロケーションでインストールしたJDKを選択する。
仮想デバイスの作成
メニューの「ツール」→「AVDマネージャ」を開き、「仮想デバイスの作成」をクリックし、デバイスを作成し、起動します。
VSCode 拡張機能のインストール
デバッグ機能追加
react native toolをインストールする。
実行とデバックからReact Nativeを選択する。
実行形式を選択する。
行番号の左をクリックして、ブレークポイントを打ち、実行ボタンを押下して実行をクリックする。
Discussion