React Native を使用した Android 向けの開発の開始

このガイドでは、Windows で React Native の使用を開始し、Android デバイスで動作するクロスプラットフォーム アプリを作成する方法について説明します。

概要

React Native は、Facebook によって作成されたオープンソース のモバイル アプリケーション フレームワークです。 これは、Android、iOS、Web、UWP (Windows) 用のアプリケーションを開発するために使用され、ネイティブ UI コントロールとネイティブ プラットフォームへの完全なアクセスを提供します。 React Native を使用するには、JavaScript の基礎を理解する必要があります。

必要なツールをインストールして React Native の使用を開始する

1. Visual Studio Code (または選んだコード エディター) をインストールします。

2. Android Studio for Windows をインストールし、ANDROID_HOME環境変数を設定します。 「 環境のセットアップ - React Native 」の手順に従います。 必ず 開発 OS の選択を "Windows" に、 ターゲット OS の選択を Android に設定してください。

3. JAVA_HOME環境変数を設定します。 Android アプリのビルドに使用される Gradle ツールには、Java SDK の特定のバージョン要件が必要です。 サポートされているバージョンを確認するには、Android Studio で Settings->Build、Execution、Deployment->Build Tools->Gradle に移動します。 Gradle JDK ドロップダウンで選択したパスを書き留めます。 次の手順を使用して、JAVA_HOME環境変数をこのパスに設定します。

   • Windows の検索メニューで、「システム環境変数の編集」と入力すると、[システムのプロパティ] ウィンドウが開きます。
   • [環境変数] を選択し、[ユーザー変数] で [新規作成] を選択します。
   • 変数名をJAVA_HOMEに設定し、値を Android Studio から取得したパスに設定します。

4. Windows 用 NodeJS をインストールします。NodeJS の複数のプロジェクトとバージョンを操作する場合は、Windows 用の Node Version Manager (nvm) を使用することを検討できます。 新しいプロジェクトには、最新の LTS バージョンをインストールすることをお勧めします。

React Native を使用した新しいプロジェクトの作成

1. npx (npx と共にインストールされるパッケージ ランナー ツール) を使用して、新しい React Native プロジェクトを 作成します。 Windows コマンド プロンプト、PowerShell、Windows ターミナル、または VS Code の統合ターミナルから ([表示]>[統合ターミナル]) から作成します。

   npx react-native init MyReactNativeApp
   

   特定の React Native バージョンを持つ新しいプロジェクトを開始する場合は、--version 引数を使用できます。 React Native のバージョンの詳細については、バージョン - React Native に関する記事を参照してください。

   npx react-native@X.XX.X init  <projectName> --version X.XX.X
   

2. 新しい "MyReactNativeApp" ディレクトリを開きます。

   cd MyReactNativeApp
   

3. ハードウェア Android デバイスでプロジェクトを実行する場合は、USB ケーブルを使用してデバイスをコンピューターに接続します。

4. Android エミュレーターでプロジェクトを実行する場合は、Android Studio が既定のエミュレーターと共にインストールされているので何も操作を行う必要はありません。 特定のデバイスのエミュレーターでアプリを実行する場合。 ツールバーの [AVD マネージャー] ボタンをクリックします。

   .

5. プロジェクトを実行するには、次のコマンドを入力します。 これにより、新しいコンソール ウィンドウが開き、Node Metro Bundler が表示されます。

   npx react-native run-android
   

   

   

   Note

   Android Studio の新しいインストールを使用していて、その他の Android 開発をまだ行っていない場合、アプリを実行したときに、Android SDK のライセンスの受け入れについてのエラーがコマンドラインで発生することがあります。 たとえば、"Warning: License for package Android SDK Platform 29 not accepted. (警告: パッケージ Android SDK プラットフォーム 29 のライセンスは受け入れられません)" と表示されます。これを解決するには、Android Studio の SDK マネージャー ボタンをクリックします。 または、次のコマンドを使用してライセンスを一覧表示して同意することもできます。その場合は必ず、コンピューター上の SDK の場所へのパスを使用してください。

   C:\Users\[User Name]\AppData\Local\Android\Sdk\tools\bin\sdkmanager --licenses
   

6. アプリを変更するには、選択した IDE で MyReactNativeApp プロジェクト ディレクトリを開きます。 VS Code または Android Studio をお勧めします。

7. react-native init によって作成されたプロジェクト テンプレートは、App.js というメイン ページを使用します。 このページには、React Native の開発に関する情報への多数の役立つリンクが事前に設定されています。 次に示す "HELLO WORLD!" 文字列のように、最初の Text 要素にテキストを追加します。

   <Text style={styles.sectionDescription}>
     Edit <Text style={styles.highlight}>App.js</Text> to change this
     screen and then come back to see your edits. HELLO WORLD!
   </Text>
   

8. アプリを再読み込みして、加えた変更を表示します。 これを実行するには、いくつかの方法があります。

   • Metro Bundler コンソール ウィンドウで、「r」と入力します。
   • Android デバイス エミュレーターで、キーボードの [r] をダブルタップします。
   • ハードウェア Android デバイスで、デバイスをシェイクして React Native のデバッグ メニューを開き、[再読み込み] を選択します。

その他のリソース

• Android 用のデュアルスクリーン アプリを開発し、Surface Duo デバイス SDK を入手する

• Windows Defender の除外を追加してパフォーマンスを向上させる

• 仮想化サポートを有効にしてエミュレーターのパフォーマンスを向上させる