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 Studio は、既定で最新の Android SDK をインストールします。 React Native には、Android 6.0 (Marshmallow) SDK 以降が必要です。 最新の SDK バージョンを使用することをお勧めします。

  3. Java SDK と Android SDK の環境変数パスを作成します。

    • Windows の検索メニューで、「システム環境変数の編集」と入力すると、[システムのプロパティ] ウィンドウが開きます。
    • [環境変数] を選択し、[ユーザー変数] で [新規作成] を選択します。
    • 変数名と値 (パス) を入力します。 Java SDK と Android SDK の既定のパスは次のとおりです。 Java SDK と Android SDK をインストールする特定の場所を選択した場合は、それに応じて変数のパスを更新してください。
      • JAVA_HOME: C:\Program Files\Android\Android Studio\jre\bin
      • ANDROID_HOME: C:\Users\username\AppData\Local\Android\Sdk

    Screenshot of adding environmental variable path

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

注意

また、好みのコマンドライン インターフェイス (CLI)、およびバージョン管理用の Git を使用するために、Windows ターミナルをインストールして使用することも検討できます。 Java JDK は、Android Studio v2.0 以降と共にパッケージ化されていますが、Android Studio とは別に JDK を更新する必要がある場合は、Windows x64 インストーラーを使用してください。

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 マネージャー] ボタンをクリックします。

    Screenshot of the AVD Manager button。

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

    npx react-native run-android

    Screenshot of Metro Bundler in a console window

    Screenshot of the default React Native app running in an Android emulator

    注意

    Android Studio の新しいインストールを使用していて、その他の Android 開発をまだ行っていない場合、アプリを実行したときに、Android SDK のライセンスの受け入れについてのエラーがコマンドラインで発生することがあります。 たとえば、"Warning: License for package Android SDK Platform 29 not accepted. (警告: パッケージ Android SDK プラットフォーム 29 のライセンスは受け入れられません)" と表示されます。これを解決するには、Android Studio Screenshot of the SDK Manager button の 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 のデバッグ メニューを開き、[再読み込み] を選択します。 Screenshot of the React Native debug menu

その他のリソース