TV 用 React Native アプリを開発する方法

アニシャ・マルデ、カロル・ラトゥセク著

この記事を読んでいるあなたは、おそらく TV アプリ開発の複雑さと断片化に精通しており、私たちと同じように、解決策として React Native に目を向けたことがあるでしょう。これは React Native のエキサイティングな使用例であり、コミュニティがこの分野で大きな進歩を遂げています。最も注目すべきは、Expo が今年初めに Expo SDK 50 で TV サポートを導入したことです。

私たちは、私たち自身の経験 (および苦労 ?) に触発されて、TV で React Native を使用するための包括的なガイドを作成することにしました。

Expo などの React Native フレームワークを使用することが、新しいアプリを作成するための推奨されるアプローチになっているため、このガイドではこれに焦点を当てました。しかし、リリース後のディスカッション中に、TV 用のベア React Native (RN) プロジェクトをセットアップする方法を知りたい開発者がまだいることに気づきました。そのため、この記事では、ベア RN プロジェクトをセットアップする方法を検討し、複数のプラットフォーム向けにビルドするようにプロジェクトをセットアップする方法について詳しく説明します。

Expo または Bare React Native?

TV 開発を始めるには、Expo と Bare React Native という 2 つの異なる方法があります。これらのアプローチのどちらを選択するかは、プロジェクトの複雑さ、パフォーマンスのニーズ、ターゲットとする特定の TV プラットフォームなどのいくつかの要因によって異なります。

Expo を使用して TV アプリを構築する

Expo は、開発環境のセットアップの複雑さを軽減することで、TV アプリ開発へのより迅速なルートを提供します。複数のプラットフォーム (Web、TV、モバイル) に対するすぐに使用できるサポートと、事前構成されたビルド プロセスを提供します。 Expo はすぐに始めるのに最適です。 ?

始め方

詳細については、この Expo ドキュメントまたはガイドブックの「はじめに」の章をご覧ください。

ベア React Native を使用した TV アプリの構築

一方、Bare React Native は、開発者により多くの制御と柔軟性を提供できます。特定のライブラリを必要とするプロジェクトや、独自のパフォーマンス要件があるプロジェクトに最適です。

始め方

Bare React Native プロジェクトを開始する場合、プロジェクトが TV 用に構成されていることを確認する最も簡単な方法は、React Native コミュニティ CLI テンプレートを使用することです。

npx @react-native-community/cli@latest init TVTest --template @react-native-tvos/template-tv

これにより、react-native-tvos と Android および TvOS に必要なすべての構成を含むプロジェクトが作成されます。

既存のプロジェクトに TV サポートを追加する

既存の React Native プロジェクトがあり、TV サポートを追加したい場合は、これらの構成を処理して、それを拡張して TV アプリを構築する必要があります。上記のテンプレートがこれを処理することに注意してください。

1. package.json の依存関係を更新します

npx @react-native-community/cli@latest init TVTest --template @react-native-tvos/template-tv

これにより、プロジェクトは Apple TV と Android TV をサポートするために必要な変更を加えた React Native のフォーク、react-native-tvos を使用できるようになります。

?このパッケージとコアの反応ネイティブ パッケージをプロジェクト内で同時に使用することはできませんが、フォークを使用しても「通常の」モバイル ビルドの作成が妨げられることはありません。

2. Android マニフェストを更新

• Android TV アプリケーションの場合は、リーンバック ランチャーを Android マニフェスト ファイルに追加して、アプリがランチャー アクティビティを宣言していることを確認する必要があります。

"react-native": "npm:react-native-tvos@latest"

これがないと、アプリケーションは Google Play で検出できず、インストール後にシステムのホーム画面に表示される TV アプリとして認識されません (アプリは [設定] > [アプリ] > [すべて] にのみ表示されます)アプリ)

• android.hardware.touchscreen 機能は不要であり、アプリが Android TV 用に構築されていることを宣言します。

<intent-filter>
  <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
</intent-filter>

• アプリが Android TV 用に構築されていることを宣言します。

<uses-feature android:name="android.hardware.touchscreen" android:required="false" />
<uses-feature android:name="android.hardware.faketouch" android:required="false" />

これらの変更の詳細については、TV サポートの追加に関する Android ドキュメントを参照してください。

?これらの変更は TV アプリの Android マニフェストにのみ追加することをお勧めします。アプリが TV に加えて別のビルド プラットフォームをターゲットにしている場合でも、プラットフォーム ドメイン機能 (モバイル ビルドではタッチスクリーンが必要であるなど) を確認する必要があります。

以下では、個別のマニフェストを持つようにアプリを構造化する方法を説明します。

*3. Project.pbxproj *

を更新します

これに従って、iOS プロジェクト ファイルを更新して TVOS のサポートを定義します。

4.ポッドファイルを更新

<uses-feature android:name="android.software.leanback" android:required="false" />

これにより、プロジェクトが確実に tvOS 用に構成されます。

追加の TV プラットフォームを処理するためのアプリの構築

React Native の最大の利点の 1 つは、複数のプラットフォームで 1 つのコードベースを使用できることです。これは、TV 用のビルドを作成する場合にも当てはまります。ただし、モバイルおよび TV プロジェクトでは、個別の package.json、podfile、Android マニフェストが必要になる場合があります。

これを処理するにはアプリをどのように構成すればよいでしょうか? 1 つのオプションは、プロジェクトをモノリポジトリとして構造化することです:

Yarn ワークスペースを使用したモノリポジトリ設定の詳細については、Oskar の記事を確認してください。これにより、TV 関連のコードをモバイルから分離でき、他の TV プラットフォームに拡張することもできるため、柔軟性が得られます。 WebOS、Tizen。

小規模プロジェクト向けの別のアプローチでは、テンプレートに似た構造を使用し、ビルド フレーバー レベルで Android TV と Android Mobile 固有の機能セットを区別し、マニフェストをマージします。

Expo ルートを選択するか、Bare React Native アプローチを選択するかに関係なく、アプリに TV サポートを追加するには、ほんの数ステップが必要です。この記事が、テレビ開発への取り組みの開始に役立つことを願っています。 React Native を使用して TV 向けに構築するためのヒントやコツについては、ガイドブックをご覧ください。この本の内容についてご質問やご要望がございましたら、以下にコメントを残してください ⬇️

以上がTV 用 React Native アプリを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。