Personnalisé Android Native View dans React Native

Un projet récent de React Native de la société a nécessité d'ajouter un lecteur vidéo à l'application.

De nombreux lecteurs de vidéo React Native sont déjà disponibles, mais presque tous ils viennent avec des défauts inhérents. Nous ne pouvions pas en trouver un avec l'implémentation parfaite des superpositions et autres personnalisations requises dans notre projet.

Ceci nous a conduit à développer notre propre composant natif à utiliser dans l'application.

This blog vous aidera à comprendre comment intégrer une vue native Android ou une vue personnalisée dans une application React Native en tant que composant.

Étape 1: Création de la vue

L'application React Native contient des dossiers pour les codes Android et iOS . Ouvrez le code Android à l'aide d'Android Studio et créez la vue personnalisée (lecteur vidéo) à l'aide du code natif. Dans notre projet, nous avons développé le lecteur vidéo personnalisé utilisant Exp-player pour Android dans le code Android natif.

Étape 2: création d'une classe ViewManager personnalisée

Les vues natives sont créées et manipulées par extension. ViewManager ou plus communément SimpleViewManager . A SimpleViewManager est pratique dans ce cas car il applique des propriétés communes telles que la couleur d'arrière-plan, l'opacité et la présentation Flexbox.

Dans cette étape, nous écrivons une classe qui hérite de SimpleViewManager. Dans cette classe, nous sélectionnons la vue Android à utiliser dans le code React Native.

Ici, SimpleViewManager est utilisé exposer la vue native Android au code natif de React.

Étape 3: implémentez la méthode createViewInstance

renvoyé par la méthode getName () est utilisé pour référencer le type de vue natif à partir de JavaScript.

Les vues sont créées dans la méthode createViewInstance. La vue doit s'initialiser dans son état par défaut et les propriétés sont définies via un appel suivant pour mettre à jour la vue.

Étape 4: Exposer les outils de réglage de propriétés de la vue à l'aide de l'annotation @ReactProp (ou @ReactPropGroup)

Si nous voulons envoyer des données du code natif de React à notre composant à l'aide d'accessoires, nous devons définir une méthode dans notre composant pour l'accepter. Par exemple, nous avons défini setVideoPath dans notre classe de composant.

Étape 5: création d'un module de conditionnement

Comme nous sommes tous configurés avec la classe VideoViewManager, nous devons maintenant enregistrer cette classe de gestionnaires pour qu'elle soit appelée à partir du module React Native à l'aide d'un module Packaging.
Pour cela, nous écrivons une classe qui implémente le Interface ReactPackage. Dans la méthode createViewManager (), nous instancions la classe ViewManager que nous souhaitons exposer au code natif de React.

6: Ajout du module de package à la classe d'application

Dans la classe d'application du projet React Native, ajoutez le module de package à la méthode getPackage () .

Étape 7: implémentation du module javaScript

La dernière étape consiste à créer un module JavaScript définissant la couche d'interface entre . Java et JavaScript pour les utilisateurs de la nouvelle vue. Pour implémenter cela, nous créons VideoView.js dans le dossier src tel que défini ci-dessous.

Ici, le premier paramètre de requireNativeComponent est le même. que nous avons déjà défini dans ViewManager et renvoyé par la méthode getName () .

Étape 8: Utilisez le composant

Enfin, nous sommes prêts pour le composant natif. à utiliser dans notre code natif de React.

Merci d'avoir lu le blog. J'espère que cela vous a plu et que cela a été utile.

VOUS AVEZ CONVENU CET UTILE? PARTAGEZ-LE