Comment développer une application React Native pour la télévision

Par Anisha Malde et Karol Latusek

Si vous lisez cet article, vous êtes probablement familier avec les complexités et la fragmentation du développement d'applications TV, et comme nous, vous vous êtes tourné vers React Native comme solution. Il s'agit d'un cas d'utilisation passionnant de React Native, dans lequel la communauté fait des progrès significatifs dans ce domaine, notamment avec l'introduction par Expo de la prise en charge de la télévision dans Expo SDK 50 plus tôt cette année.

Inspirés par nos propres expériences (et difficultés ?), nous avons décidé de créer un guide complet sur l'utilisation de React Native pour la télévision.

Étant donné que l'utilisation de frameworks React Native, tels qu'Expo, est désormais l'approche recommandée pour créer de nouvelles applications, notre guide s'est concentré sur ce point. Cependant, lors de nos discussions après le lancement, nous avons réalisé qu'il y avait encore des développeurs qui voulaient savoir comment mettre en place un simple projet React Native (RN) pour la télévision. C'est pourquoi cet article explorera comment configurer votre projet nu RN et développera comment configurer votre projet pour qu'il soit construit sur plusieurs plates-formes.

Expo ou Bare React Native ?

Il existe deux manières différentes de se lancer dans le développement TV : Expo et Bare React Native. Votre choix entre ces approches dépendra de plusieurs facteurs tels que la complexité du projet, les besoins en performances et les plateformes TV spécifiques que vous ciblez.

Créer une application TV avec Expo

Expo présente une voie plus rapide vers le développement d'applications TV en réduisant la complexité de configuration de votre environnement de développement. Il offre une prise en charge prête à l'emploi pour plusieurs plates-formes (Web, TV et mobile) et des processus de construction préconfigurés. Expo est idéal pour démarrer rapidement ! ?

Comment commencer

Vous pouvez trouver plus d'informations dans cette documentation de l'Expo ou dans le chapitre « Mise en route » de notre guide.

Créer une application TV avec Bare React Native

D'un autre côté, Bare React Native peut offrir aux développeurs plus de contrôle et de flexibilité. Il est idéal pour les projets qui nécessitent des bibliothèques spécifiques ou ont des exigences de performances uniques.

Comment commencer

Si vous démarrez un projet Bare React Native, le moyen le plus simple de vous assurer que votre projet est configuré pour la télévision est d'utiliser le modèle CLI de la communauté React Native :

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

Cela crée un projet avec React-native-tvos et toutes les configurations requises pour Android et TvOS.

Ajout du support TV à un projet existant

Si vous avez un projet React Native existant et que vous souhaitez ajouter la prise en charge de la télévision, vous devez gérer ces configurations pour l'étendre afin de créer des applications TV. Notez que le modèle ci-dessus s'en charge pour vous.

1. Mettre à jour les dépendances package.json

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

Cela permet à votre projet d'utiliser un fork de React Native, React-native-tvos, avec les modifications nécessaires pour prendre en charge Apple TV et Android TV.

? Vous ne pouvez pas utiliser ce package et le package principal React-Native simultanément dans un projet, mais l'utilisation du fork ne vous empêche pas de créer vos builds mobiles « classiques ».

2. Mettre à jour le manifeste Android

• Pour les applications Android TV, vous devez vous assurer que votre application déclare une activité de lancement en ajoutant le lanceur Leanback à votre fichier manifeste Android :

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

Sans cela, votre application ne sera pas détectable sur Google Play et elle ne sera pas reconnue comme une application TV qui apparaît sur l'écran d'accueil du système après l'installation (l'application ne sera visible que dans Paramètres > Applications > Toutes Applications.)

• Déclarez que la fonctionnalité android.hardware.touchscreen n'est pas requise et que votre application est conçue pour Android TV :

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

• Déclarez que votre application est conçue pour Android TV :

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

Pour plus d'informations sur ces modifications, lisez la documentation Android sur l'ajout de la prise en charge de la télévision.

? Nous vous recommandons d’ajouter ces modifications uniquement au manifeste Android des applications TV. Si votre application cible différentes plates-formes de build en plus de la télévision, vous souhaitez toujours vous assurer que les fonctionnalités du domaine de la plate-forme, par exemple l'écran tactile, sont requises sur la version mobile.

Nous expliquons ci-dessous comment vous pouvez structurer votre application pour avoir des manifestes distincts.

*3. Mettre à jour le projet.pbxproj *

Mettez à jour le fichier du projet iOS pour définir la prise en charge de TVOS en fonction de ceci.

4. Mettre à jour le fichier Pod

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

Cela garantit que votre projet est configuré pour tvOS.

Structurer votre application pour gérer la plate-forme TV supplémentaire

L'un des plus grands avantages de React Native est la possibilité d'utiliser une seule base de code pour plusieurs plates-formes. C'est également le cas lorsque vous créez des builds pour la télévision. Cependant, les projets mobiles et TV peuvent nécessiter des packages.json, des fichiers pod et des manifestes Android distincts.

Comment pouvez-vous structurer votre application pour gérer cela ? Une option consiste à structurer votre projet en monorepo :

Consultez l'article d'Oskar pour plus de détails sur une configuration monorepo avec les espaces de travail Yarn. Cela permet une flexibilité car nous pouvons séparer le code lié à la télévision du mobile et pouvons également l'étendre à d'autres plates-formes de télévision, par ex. WebOS, Tizen.

Une autre approche pour les petits projets utilise une structure similaire au modèle et différencie les ensembles de fonctionnalités spécifiques à Android TV et Android Mobile au niveau de la version de construction, puis en fusionnant les manifestes.

Que vous choisissiez la voie Expo ou l'approche Bare React Native, l'ajout de la prise en charge de la télévision à votre application ne nécessite que quelques étapes. Nous espérons que cela vous aidera à démarrer votre parcours de développement TV. Consultez le guide pour plus de trucs et astuces sur la création pour la télévision à l'aide de React Native. Si vous avez des questions ou des demandes concernant le contenu que vous aimeriez voir dans le livre, veuillez laisser un commentaire ci-dessous ⬇️

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!