React Nativeの環境設定と構築（史上最も詳しいチュートリアルと注意事項）
React Native 公式サイトの環境構築チュートリアルは詳しく説明されておらず、いくつかの落とし穴があり、構築環境が非常に遅いのですが、この記事はそれらの問題を解決するものであり、初心者向けの定番ドキュメントです。
まずは公式サイトの説明文をご覧ください。
重要:インストールする必要がある依存関係は、Node、JDK、Android Studio です。
この 3 つの基本をインストールすれば十分です。次に、これら 3 つのインストールについて詳しく説明します。
1. ノードのインストール
ノードの公式 Web サイトに直接アクセスして、対応するノードのバージョンをダウンロードすることもできますが、NVM を使用することをお勧めします。NVM はバージョンを簡単に切り替えることができ、古いプロジェクトを引き継いだ後のノードのダウングレードという面倒な問題を回避できるからです。
NVM のインストールは、NVM のノード バージョンを管理するために私が書いた別の記事を使用します。
2. 糸を取り付けます
Yarn は Facebook が提供する npm に代わるツールで、ノード モジュールのダウンロードを高速化できます。
最初のステップでノードがインストールされたので、cmd を開いて次のコマンドを実行できます。
npm install -g yarn
糸をインストールした後、npm の代わりに糸を使用することができます。たとえば、npm install コマンドの代わりに糸を使用し、npm install の代わりに糸を使用してサードパーティのライブラリ名を追加します。
注: vscode コンパイラーのターミナルがyarnコマンドを入力し、「yarnアイテムは...として認識できません」というエラーを報告する場合、その理由は、vscodeの統合ターミナルがpowershellを使用しているため、powershellの実行を設定する必要があります。許可。
PowerShell の実行権限を設定します。
1. 検索開始ボックスで PowerShell を検索し、右クリックして管理者として実行します。
2. set-ExecutionPolicy RemoteSigned コマンドを実行し、y オプションを入力します。
3. Java 開発キットをインストールする
React Native には Java Development Kit [JDK] 11 が必要です。コマンドラインに javac -version (java ではなく javac であることに注意してください) と入力すると、現在インストールされている JDK バージョンを表示できます。バージョンが要件を満たしていない場合は、TemurinまたはOracle JDKにアクセスしてダウンロードできます (後者のダウンロードには登録とログインが必要です)。
1. Java Development Kit をダウンロードします ここ
で紹介するのは Oracle JDK の方法です
以下の図に示すように、公式 Web サイトを開き、インストール後に jdk-11.0.19_windows-x64_bin.exe ファイルをクリックしてダウンロードしますexe ファイルを実行すると、手動で設定しなくても環境変数が自動的に設定されます。
2. 契約に同意した後、ダウンロードを続行し、
最初のステップをクリックすると、次のポップアップ ウィンドウが開きます。
3.
Oracle にログインして前のステップをクリックした後、ログインしていない場合はログインする必要があります。登録していない場合は、まず登録してからログインする必要があります
ログイン後、jdk-11.0.19_windows-x64_bin.exe ファイルをダウンロードします。
4. jdk-11.0.19_windows-x64_bin.exe をインストールします
。インストールは非常に簡単です。次のステップに進むだけです。インストール パスにはデフォルトのパスが推奨されます。
5. インストールが成功したかどうかを確認します。cmd
を開き、javac -version と入力します。バージョン番号が表示されれば、インストールは成功したことを意味します。
4. Android開発環境を構築する
Android 開発環境の構築は非常に面倒で、公式サイトにも詳しく解説されておらず、構築手順が少し難しいですが、この記事では、寄り道をせずに Android 開発環境を構築する方法を説明します。
1. Android Studio をダウンロード
国内ユーザーは公式リンクを開けない場合があるため、まず VPN に接続してから公式リンクを入力してダウンロードする必要があります。検索エンジンを使用して、VPN を使用せずに利用可能なダウンロード リンクを自分で検索します。クリックしてAndroid Studio
に入ります
android-studio-2022.2.1.19-windows.exe をダウンロードし、ダブルクリックしてインストールを開きます
2. Android Studio をインストールします
。上級インストール エンジニアとして、次へ、そして最後にインストールに至るまでのインストール スキルを説明します。
3. Android Studio の設定
前の図は Android Studio を開くためにチェックを入れた状態です
(1) 選択方法
開くと、次のようなポップアップ ウィンドウが表示され、デフォルトでは 2 番目のオプションが選択されています。
(2) プロキシを設定しますか?
次のステップで以下のポップアップウィンドウが表示された場合は、プロキシを設定しますが、Android Studio に慣れていない場合や頻繁に使用しない場合、この設定は無視されます[キャンセル] をクリックしてポップアップ ウィンドウを閉じます。
(3) 次のように初期構成ページに入り、「次へ」をクリックします。
(4) 次のようにカスタム インストールを選択します。
(5) デフォルトのパスで問題ありません。次へ進みます。
(6) テーマの背景色を選択します。
どれを選択しても問題ありません。個人の好みによって異なります。
(7) ダウンロードするコンテンツを確認する
注: このエミュレータをダウンロードする必要はありません。サードパーティのエミュレータ (例: Ye Shen エミュレータ) を使用できます。サードパーティのエミュレータの使用方法については紹介しません。この記事では Android 仮想デバイスのみを紹介します。 Androidが公式に提供しているエミュレータは非常に便利だと思います。
Android が提供する Android Virtual Device エミュレーターの手順 (16) に直接進みます。
ここで重要な点があります。ダウンロードする必要があるパッケージの合計は 1.97G です。この Android 仮想デバイス パッケージは 1.44G を占めています。次のステップではダウンロードが非常に遅くなります。ダウンロードの進行状況がまったく進まない場合もありますが、問題ではありません。 . 解決策については後ほど説明しますので、先に進んでください。
以下の図のように、Android 仮想デバイスを含むすべてのパスを確認します。Android SDK の場所のパスもデフォルトです (以降の失敗を防ぐため)。[次へ] をクリックして次のステップに進みます。
(8) このステップは、システム アクセラレーションを設定できることを検出するもので、2GB が推奨されています。引き続き [次へ] をクリックして次のステップに進みます。
(9) インストールを確認し、「次へ」をクリックします。
(10) ダウンロード内容
インストールするパッケージを表示し、次へ
(11) 契約に同意する
左側の 3 つの項目をクリックし、右側の [同意する] にチェックを入れて契約に同意し、[完了] をクリックします。
(12) 次のステップは、各パッケージをインストールすることです。「
詳細を表示」をクリックして、ダウンロードする特定のコンテンツを表示します。
(13) シミュレーター パッケージのリンクを取得します
。重要な点は、シミュレーター パッケージをダウンロードするためのリンクをコピーすることです:
https://dl.google.com/android/repository/sys-img/google_apis/x86_64-33_r10.zip
後でダウンロード パスが変更される可能性があります。自分でコピーするのが最善です。x86_64 の zip パッケージを見るのが正しいです。
(14) エミュレータ パッケージをダウンロードします: x86_64-33_r10.zip、
ブラウザのアドレス バーにコピー リンクを置き、Enter キーを押してダウンロードします。フルスピードで直接ダウンロードされ、ハングすることなく 10 分でダウンロードされます
。プロキシをダウンロードする場合は、最初にダウンロードすることができます。まず次の手順を実行してください。
(15) ダウンロードを終了し、Android Studio
エミュレータを終了します。エミュレータが大きすぎるため、ダウンロードが遅すぎます。いつ正常にダウンロードされるかわかりません。この手順は、実際にはエミュレータ パッケージのダウンロード リンクを取得することです。前のステップはすでに「今すぐエミュレータ パッケージをダウンロード」にあります。
まず [キャンセル] をクリックしてダウンロードを閉じ、次に [完了] をクリックしてから、右上隅の [X] をクリックして Android Studio を閉じます。
(16) Android Studio を再度開く
Android Studio を再度開くと、最初の手順に戻り、前の手順を続けます。
重要なポイント: 次のステップに進んで、Android 仮想デバイスのチェックを外します。合計ダウンロード サイズが 224M しかないことがわかります (そのため、パッケージのダウンロードは後で非常に高速になります)。その後、次へ進み、その後のステップは次のとおりです。上と同じです。
(17) ダウンロードは間もなく完了します。
注: ダウンロードが完了すると、プログラムがシステム環境変数を自動的に構成する場合があります。360 などのセキュリティ ソフトウェアをインストールしている場合は、プログラムがシステム設定を変更しようとしていることを検出するように求めるメッセージが表示されます。許可する必要があります。許可しない場合は、フォローアップが行われる可能性があります。環境変数を自分で設定する必要があります。設定方法は Baidu によって異なります。
「完了」をクリックして完了します。
(18) プロジェクトを開く
React Native プロジェクトを開きます。プロジェクトがない場合は、まず新しいプロジェクトに移動します。
(19) SDKマネージャーを開く
プロジェクトを開くと下図のように表示されますので、
下図の矢印のアイコン(SDKマネージャー)をクリックします。
以下の SDK パスをコピーします
これをフォルダー ディレクトリに貼り付け、Enter キーを押して Sdk ディレクトリを開きます。
(20) エミュレータを解凍します。
Sdk ディレクトリの下にある x86_64 フォルダを見つけ、手順 (14) でダウンロードしたエミュレータ圧縮パッケージ (このパッケージは解凍後の x86_64 フォルダです) をこのディレクトリに解凍し、このフォルダを次のように置き換えます。
(21) SDK の設定
Android Studio を閉じ、再度 SDK マネージャーを開き、
SDK マネージャーの「SDK プラットフォーム」タブを選択し、右下の「パッケージの詳細を表示」にチェックを入れます。Android 13 (Tiramisu) オプションを展開し、Android SDK Platform 33 と Google API を必ずチェックしてください。 Intel x86 Atom System Image (これは、前の手順で解凍されたエミュレータ パッケージです。前の水平バーは、構成されていることを示します。いいえ)ダウンロードするにはチェックする必要があります)、次のように:
次に、「SDK ツール」タブをクリックし、右下隅の「パッケージの詳細を表示」にもチェックを入れます。「Android SDK Build-Tools」オプションを展開し、React Native に必要な 33.0.0 バージョンが選択されていることを確認します。他の複数のバージョンを同時にインストールできます。
次に、「適用」をクリックしてこれらのコンポーネントをダウンロードしてインストールします。確認のポップアップが表示されたら、「OK」をクリックします。
最後に「完了」をクリックして、SDK マネージャーを閉じます。
(22) シミュレータの作成
[デバイスの作成]ボタンをクリックします。
好みの解像度のエミュレータ モデルを作成する
以下の画像が表示されれば、作成が成功したことを意味します。
(23) ANDROID_HOME環境変数を設定する
React Native は、正常にコンパイルできるように、環境変数を通じて Android SDK がインストールされているパスを知る必要があります。
[コントロール パネル] -> [システムとセキュリティ] -> [システム] -> [システムの詳細設定] -> [詳細] -> [環境変数] -> [新規] を開き、Android SDK が配置されているディレクトリを指す ANDROID_HOME という名前の環境変数 (システム変数またはユーザー変数) を作成します。 、特定のパスは下の図と一致しない可能性があります。ご自身で確認してください。手順 (19) を参照して SDK マネージャーを開き、SDK パスをコピーします。
(24) いくつかのツールのディレクトリを環境変数 Path に追加します。 [
コントロール パネル] -> [システムとセキュリティ] -> [システム] -> [システムの詳細設定] -> [詳細設定] -> [環境変数] を開き、Path 変数を選択して [編集] をクリックします。[新規] をクリックし、次のツール ディレクトリ パスを追加します: platform-tools、emulator、tools、tools/bin
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin
図に示すように:
新しい環境変数を有効にするには、既存のコマンド プロンプト ウィンドウを閉じて再度開く必要があります。
終了。
(35) React natvie プロジェクトを開始し、
vscode をテストしてプロジェクト (私のプロジェクトなど) を開きます。ターミナルに「yarn android」と入力すると、上記で作成したエミュレータがデフォルトで自動的に開きます。