React Nativeを既に使用している場合は、新しい技術スタックを習得したり、複数の異なるコードベースを管理したりしなくても、Amazon Fire OSデバイスを簡単にターゲットに設定できます。Expoフレームワークを使用すると簡単かつ迅速にアプリを開発できます。このガイドでは、Fire TVとFireタブレットの両方を対象に、React Nativeを使用してアプリを開発する方法を説明します。
事前に以下のツールをインストールします。
Android Studioとコマンドラインツールを構成します。
Fireタブレット向け:
Fire TV向け:
ターミナルで、インストールしたexpoパッケージを使用して、新しいReact Nativeプロジェクトを作成します。
npx create-expo-app FireTabletDemo --template blank
Fireタブレットエミュレーターで実行
使用可能な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-tv
Fire TVエミュレーターで実行
Android TVエミュレーターを起動します。
emulator -avd name-of-your-tv-emulator
プロジェクトディレクトリに移動し、アプリを実行します。
cd FireTVDemo
npx expo start -a
Fireタブレットの場合と同様、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デバイス向けアプリをビルドする際は、以下の関連リソースも参照してください。