Un projet récent de React Native chez la société a également nécessité l'intégration d'un lecteur vidéo dans l'application.
De nombreux lecteurs vidéo React Native sont déjà disponibles, mais ils présentent presque tous des défauts inhérents. Nous ne pouvions pas en trouver un avec l'implémentation parfaite des superpositions et des autres personnalisations requises dans notre projet.
Ceci nous a conduit à développer notre propre composant natif à utiliser dans l'application.
Ce blog vous aidera à comprendre comment Intégrez 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 Android et iOS. codes natifs. 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 en étendant 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 elle-même 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 paramètres du gestionnaire de propriétés de la vue à l'aide de l'annotation @ReactProp (ou @ReactPropGroup)
Si nous voulons envoyer des données du code React Native à 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 React Native.
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
Source link