So entwickeln Sie eine React Native App für das Fernsehen

Von Anisha Malde und Karol Latusek

Wenn Sie diesen Artikel lesen, sind Sie wahrscheinlich mit der Komplexität und Fragmentierung der TV-App-Entwicklung vertraut und haben sich wie wir an React Native als Lösung gewandt. Es handelt sich um einen spannenden Anwendungsfall von React Native, bei dem die Community in diesem Bereich erhebliche Fortschritte gemacht hat – vor allem durch die Einführung der TV-Unterstützung durch Expo Anfang des Jahres im Expo SDK 50.

Inspiriert durch unsere eigenen Erfahrungen (und Schwierigkeiten?) haben wir beschlossen, einen umfassenden Leitfaden zur Verwendung von React Native für das Fernsehen zu erstellen.

Da die Verwendung von React Native-Frameworks wie Expo mittlerweile der empfohlene Ansatz für die Erstellung neuer Apps ist, konzentrierte sich unser Leitfaden darauf. Bei unseren Post-Launch-Diskussionen stellten wir jedoch fest, dass es immer noch Entwickler gab, die wissen wollten, wie man ein reines React Native (RN)-Projekt für das Fernsehen einrichtet. Aus diesem Grund wird in diesem Artikel erläutert, wie Sie Ihr reines RN-Projekt einrichten und wie Sie Ihr Projekt für die Erstellung für mehrere Plattformen einrichten.

Expo oder Bare React Native?

Es gibt zwei verschiedene Möglichkeiten, mit der TV-Entwicklung zu beginnen: Expo und Bare React Native. Ihre Wahl zwischen diesen Ansätzen hängt von mehreren Faktoren ab, wie z. B. der Komplexität des Projekts, den Leistungsanforderungen und den spezifischen TV-Plattformen, auf die Sie abzielen.

Erstellen einer TV-App mit Expo

Expo bietet einen schnelleren Weg zur TV-App-Entwicklung, indem es die Komplexität der Einrichtung Ihrer Entwicklungsumgebung reduziert. Es bietet sofort einsatzbereite Unterstützung für mehrere Plattformen (Web, TV und Mobilgeräte) und vorkonfigurierte Build-Prozesse. Die Expo ist ideal für den schnellen Einstieg! ?

So fangen Sie an

Weitere Informationen finden Sie in dieser Expo-Dokumentation oder im Kapitel „Erste Schritte“ in unserem Ratgeber.

Erstellen einer TV-App mit Bare React Native

Andererseits kann Bare React Native Entwicklern mehr Kontrolle und Flexibilität bieten. Es ist ideal für Projekte, die bestimmte Bibliotheken erfordern oder besondere Leistungsanforderungen haben.

So fangen Sie an

Wenn Sie ein Bare React Native-Projekt starten, können Sie am einfachsten sicherstellen, dass Ihr Projekt für TV konfiguriert ist, indem Sie die CLI-Vorlage der React Native-Community verwenden:

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

Dadurch wird ein Projekt mit React-Native-TVOS und allen erforderlichen Konfigurationen für Android und TvOS erstellt.

Hinzufügen von TV-Unterstützung zu einem bestehenden Projekt

Wenn Sie über ein bestehendes React Native-Projekt verfügen und TV-Unterstützung hinzufügen möchten, müssen Sie diese Konfigurationen bearbeiten, um es zum Erstellen von TV-Apps zu erweitern. Beachten Sie, dass die obige Vorlage dies für Sie erledigt.

1. Package.json-Abhängigkeiten aktualisieren

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

Dadurch kann Ihr Projekt einen Zweig von React Native, React-Native-TVOS, mit den Änderungen verwenden, die zur Unterstützung von Apple TV und Android TV erforderlich sind.

? Sie können dieses Paket und das Core-React-Native-Paket nicht gleichzeitig in einem Projekt verwenden. Die Verwendung des Forks hindert Sie jedoch nicht daran, Ihre „normalen“ mobilen Builds zu erstellen.

2. Android-Manifest aktualisieren

• Für Android TV-Anwendungen müssen Sie sicherstellen, dass Ihre App eine Launcher-Aktivität deklariert, indem Sie den Leanback-Launcher zu Ihrer Android-Manifestdatei hinzufügen:

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

Ohne dies ist Ihre Anwendung bei Google Play nicht auffindbar und wird nicht als TV-App erkannt, die nach der Installation auf dem Startbildschirm des Systems angezeigt wird (die App ist nur unter Einstellungen > Apps > Alle sichtbar). Apps.)

• Erklären Sie, dass die Funktion „android.hardware.touchscreen“ nicht erforderlich ist und dass Ihre App für Android TV erstellt wurde:

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

• Erklären Sie, dass Ihre App für Android TV erstellt wurde:

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

Weitere Informationen zu diesen Änderungen finden Sie in der Android-Dokumentation zum Hinzufügen von TV-Unterstützung.

? Wir empfehlen, diese Änderungen nur dem Android-Manifest der TV-Apps hinzuzufügen. Wenn Ihre App neben TV auch auf andere Build-Plattformen abzielt, möchten Sie dennoch sicherstellen, dass die Plattformdomänenfunktionen, z. B. TouchScreen, für den mobilen Build erforderlich sind.

Im Folgenden erklären wir, wie Sie Ihre App so strukturieren können, dass sie separate Manifeste hat.

*3. Aktualisieren Sie Project.pbxproj *

Aktualisieren Sie die iOS-Projektdatei, um die Unterstützung von TVOS entsprechend zu definieren.

4. Podfile aktualisieren

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

Dadurch wird sichergestellt, dass Ihr Projekt für tvOS konfiguriert wird.

Strukturieren Sie Ihre App, um die zusätzliche TV-Plattform zu verwalten

Einer der größten Vorteile von React Native ist die Möglichkeit, eine Codebasis für mehrere Plattformen zu verwenden. Dies ist auch der Fall, wenn Sie Builds für das Fernsehen erstellen. Allerdings benötigen mobile und TV-Projekte möglicherweise separate package.json, Podfiles und Android-Manifeste.

Wie können Sie Ihre App strukturieren, um damit umzugehen? Eine Möglichkeit besteht darin, Ihr Projekt als Monorepo zu strukturieren:

Weitere Informationen zu einem Monorepo-Setup mit Yarn-Arbeitsbereichen finden Sie in Oskars Artikel. Dies ermöglicht Flexibilität, da wir TV-bezogenen Code vom Mobilgerät trennen und ihn auch auf andere TV-Plattformen erweitern können, z. B. WebOS, Tizen.

Ein anderer Ansatz für kleinere Projekte verwendet eine Struktur ähnlich der Vorlage und unterscheidet Android TV- und Android Mobile-spezifische Funktionssätze auf der Build-Flavour-Ebene und dann durch Zusammenführen von Manifesten.

Ob Sie sich für die Expo-Route oder den Bare-React-Native-Ansatz entscheiden, das Hinzufügen von TV-Unterstützung zu Ihrer App erfordert nur wenige Schritte. Wir hoffen, dass dies Ihnen den Einstieg in Ihre TV-Entwicklungsreise erleichtert. Weitere Tipps und Tricks zum Erstellen für das Fernsehen mit React Native finden Sie im Leitfaden. Wenn Sie Fragen oder Wünsche zu Inhalten haben, die Sie im Buch sehen möchten, hinterlassen Sie bitte unten einen Kommentar ⬇️

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie eine React Native App für das Fernsehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!