0
0
Read Time:1 Minute, 58 Second
仮想マシン(ホスト:Windows11/Hyper-V（プロセッサ：AMD Ryzen）経由/ゲスト:Windows10)上に、React Native開発環境を新規作成した時の備忘録です。
１．基本手順・前提環境：
基本手順は｢React Native docs｣および（androidアプリ編）基づいています。
今回の環境は、普段Flutter開発で使用している仮想環境を複製したものを使用しています。
その為、以下が本手順の前提環境(※必須というわけではない)になっています。
故に一部、止むを得ずバージョン変更(バージョンダウン等)したものも含めてあります。
同様に一部、上記基本手順で推奨していても(諸事情により)異なる手順(バージョン変更)で実施した部分も含めてあります。
（１）Node.js：v21.5.0 （※当時最新版はv21.7.1／long-term版はv20.11.1）
※基本手順ではNode-TLSを推奨していますが、これは本番環境には適していますが、最新機能等で試行･開発する場合には(上記の様に)Node.jsが良い様です。
（２）Chocolatey(Windows向けパッケージマネージャ)：v2.2.2（最新版）
（３）Python：v3.12.1 （※当時最新版はv3.9.19）
（４）JDK：v17.0.10 （※当時最新版はv21.0.2）
※基本手順ではv17を推奨しています。
※以前最新版v21版でFlutter開発環境も試しましたが、結果として訳(別途)ありv17にダウングレードしたという経緯(詳細はこちら｢[基礎知識]Flutter開発環境準備／(1.Javaダウングレード)｣)もあります。
（５）IDE／Android Studio：Giraffe / 2022.3.1 Patch3
※インストール手順詳細(過去の作業記録)は以下参照
・｢[基礎知識]Android Studioインストール記録｣
・｢[基礎知識]Android Studio(Cnary6ビルド(Jellyfish))インストール記録｣
(5-1)Android SDK：14
(5-2)Android SDK Platform 34
(5-3)Android Virtual Device
(5-4)Android Emulator
（６）IDE／Visual Studil：2022（v17.9）
※インストール後、以下のワークロード、個別のコンポーネントを追加インストール
(6-1)ワークロード
①Node.js開発
②.NETデスクトップ開発
③C++によるデスクトップ開発（MSVC v143 – VS 2022 C++ x64/x86 build tools (Latest)）
④ユニバーサルWindowsプラットフォーム開発（C++ (v143) Universal Windows Platform tools）
(6-2)個別のコンポーネント：
①Windows 10 SDK (10.0.19041.0)
②MSVC v143 – VS 2022 C++ ARM64 build tools (Latest)
（７）Gradle
(7-1)Gradle：v7.6.4（最新版 ※Windows版）
→別記事｢[基礎知識]Gradle (v8.7) インストール記録｣参照
(7-2)Android Studio標準Gradleプラグイン（v7.5.1）
※
※Gradle v7.6.4 は、JDK v19まで対応済み。もしJDK v19よりも上のバージョンの場合は、JDKのバージョンダウンが必要になる。
※一方Android Studioには標準Gradleプラグインがあり、これはv7.5.1だった。
React Native 開発環境では、上記(7-1)と(7-2)の両方が必要でした。（動作確認済み）
（８）PowerShell：最新版
※> winget search Microsoft.PowerShell
（９）その他
上記(基本ツール導入･設定)以外にもOS設定等が(React Native導入の事前準備では)必要でした。
①Windows(OS)の｢開発者モード｣：有効化
②Windows(OS)のRAM(メモリ容量)：16GB以上
③Windows(OS)の｢長いパスの有効性｣：有効化
※レジストリ設定変更(‘HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem‘)
：｢LongPathsEnabled｣ = 1
（１０）依存関係
上記導入･設定完了後、以下のコマンドをPowerShell(管理者)で実行し、問題が無いことを確認する。
> Set-ExecutionPolicy Unrestricted -Scope Process -Force;
> iex (New-Object System.Net.WebClient).DownloadString(‘https://aka.ms/rnw-vs2022-deps.ps1’);
※原典：｢依存関係確認｣(https://microsoft.github.io/react-native-windows/docs/rnw-dependencies)
２．React Native セットアップ･動作確認
（１）React-Native-CLI インストール
①以下のコマンドでReact-Native-CLIをインストールできます。
> npm install -g react-native-cli
（２）プロジェクト準備
①以下の(A)､(B)いずれかのコマンドでプロジェクトを作成できます。
(A)…インストール済のReact Native を使用してプロジェクトを作成します。
(B)…毎回最新版React Native をインストールし、その上でプロジェクトを作成します。
(A) > react-native init <新規プロジェクト名>
(B) > npx react-native init <新規プロジェクト名>
※上記いずれも結果は同じです。
例：react-native init test04
以上迄でReact Native開発環境準備は完了です。
（３）エミュレータによるAndroidアプリ実行
以降の手順(｢(3)エミュレータによるAndroidアプリ実行｣含めて)は、以下の別記事に掲載してありますので、そちらを参照して下さい。
→前回別記事｢[基礎知識]React Native (androidアプリ実行まで)｣
React Nativeの開発環境準備は以上です。
Happy
0 %
Sad
0 %
Excited
0 %
Sleepy
0 %
Angry
0 %
Surprise
0 %