💨

Windows10でReact Native環境構築やってみた

2 min read

環境

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

以下公式ページよりダウンロードする。

https://developer.android.com/studio?hl=ja

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

ログインするとコメントできます