React Nativeを既に使用している場合は、新しい技術スタックを習得したり、複数の異なるコードベースを管理したりしなくても、Amazon Fire OSデバイスを簡単にターゲットに設定できます。Expoフレームワークを使用すると簡単かつ迅速にアプリを開発できます。このガイドでは、Fire TVとFireタブレットの両方を対象に、React Nativeを使用してアプリを開発する方法を説明します。
事前に以下のツールをインストールします。
- Node.js： JavaScriptランタイム環境
- npmまたはYarn： JavaScriptのパッケージマネージャー
- Android Studio：Fire OSアプリのコンパイルと実行をローカルで行うためのIDE
Android Studioとコマンドラインツールを構成します。
- このガイドに従い、ANDROID_HOME環境変数を設定します。
- Android Studioの仮想デバイスマネージャーから以下のエミュレーターをインストールします。
Fireタブレット向け：
Fire TV向け：
ターミナルで、インストールしたexpoパッケージを使用して、新しいReact Nativeプロジェクトを作成します。
npx create-expo-app FireTabletDemo --template blankFireタブレットエミュレーターで実行
使用可能なavdsをリストアップし、Androidタブレットを起動します。
emulator -list-avds
emulator -avd name-of-your-tablet-emulatorプロジェクトディレクトリ（例：FireTabletDemo）に移動し、npxを使用してアプリを実行します。
cd FireTabletDemo
npx expo start -a
ローカルの開発サーバーとExpo Goを使用し、エミュレーター上でアプリが実行されます。Androidビルドを作成する必要はありません。
物理的なタブレットデバイスで実行
こちらの説明に従い、Android Debug Bridge（ADB）を使用してFireタブレットに接続します。次に、デバイスとして使用可能かどうかを確認します。
adb devices -l
プロジェクトディレクトリに移動し、ターゲットデバイス（例：KFTRWI）で開発ビルドを実行します。
cd FireTabletDemo
npx expo run:android -d [deviceName]開発ビルドがandroidディレクトリ内にインストールされます。
Fire TV対応アプリをビルドする手順は、タブレットの場合とほぼ同じです。新規ディレクトリで、expoを使用して新しいReact Nativeプロジェクトを作成します。ただし今回は、次のようにwith-tvを指定します。
npx create-expo-app FireTVDemo -e with-tvFire TVエミュレーターで実行
Android TVエミュレーターを起動します。
emulator -avd name-of-your-tv-emulatorプロジェクトディレクトリに移動し、アプリを実行します。
cd FireTVDemo
npx expo start -aFireタブレットの場合と同様、Androidビルドを作成しなくても、アプリがavdエミュレーターで実行されます。
ビルドのターゲットをFire TVに設定
Fire TV向けにビルドするには、app.jsonでisTVプロパティをtrueに設定します。
{
"expo": {
"plugins": [
[
"@react-native-tvos/config-tv",
{
"isTV": true,
}
]
],
"name": "FireTVDemo",
"slug": "FireTVDemo"
}
}Fire TVデバイスでプロジェクトを実行
こちらの説明に従い、Android Debug Bridge（ADB）を使用してFire TVに接続します。次に、デバイスとして使用可能かどうかを確認します。
adb devices -l
プロジェクトディレクトリに移動し、ターゲットデバイス（例：-d AFTSS）で開発ビルドを実行します。
cd FireTVDemo
npx expo run:android -d [deviceName]開発ビルドがデバイスにインストールされました。
💡 AndroidビルドがFire TV向けに最適化されていることを確認するには、アプリのAndroidマニフェストファイルでAndroid Leanback機能を使用していることをチェックしてください。
これで、Fire OS向けの最初のReact Nativeアプリをビルドできました。 React Nativeを使用してAmazonデバイス向けアプリをビルドする際は、以下の関連リソースも参照してください。
- hello-world-fire-tv-react-native
- react-native-multi-tv-app-sample
- React-Native-IAP: One package to rule them all（英語のみ）
- A guide to Turbo Modules in React Native（サンプル reactnative-turbo-module-demo を参照）（英語のみ）
