Présentations d’applications natives React courantes: page Galerie

Dans cette série, vous apprenez à utiliser React Native pour créer des mises en page couramment utilisées dans les applications mobiles. Les mises en page que vous créez ne seront pas fonctionnelles. Au lieu de cela, l’objectif principal de cette série est de mettre la main à la pâte dans la mise en page du contenu dans vos applications React Native.

Si vous débutez dans la mise en page d’applications React Native ou dans le style en général, consultez mon tutoriel précédent:

Pour suivre cette série, je vous mets au défi d’essayer de recréer chaque écran par vous-même avant de lire mes instructions étape par étape dans le tutoriel. Vous ne bénéficierez pas vraiment de ce tutoriel rien qu’en le lisant! Essayez d’abord avant de rechercher les réponses ici. Si vous réussissez à le faire ressembler à l’écran d’origine, comparez votre implémentation à la mienne. Alors décidez par vous-même lequel est le meilleur!

Dans ce troisième article de la série, vous allez créer la page de galerie de photos suivante:

page de galerie de photos

Les galeries sont souvent utilisées pour afficher une collection de contenu connexe de telle sorte que seules les informations nécessaires sont présentées. La plupart du temps, cela comprend une photo, un titre et d’autres informations pertinentes.

Voici quelques exemples de ce type de mise en page utilisé dans la nature:

Crunchyroll Anime Gallery
Galerie de livres audio Librivox

Configuration du projet

La première étape, bien sûr, est de mettre en place un nouveau projet React Native:

Une fois le projet configuré, ouvrez le index.android.js et remplacez le code par défaut par ce qui suit:

Créer un src/pages dossier et créez un Gallery.js fichier à l’intérieur.

Vous aurez également besoin du react-native-vector-icons paquet. Ceci est spécifiquement utilisé pour les icônes du pied de page.

Ouvrez le android/app/build.gradle fichier et ajoutez une référence au package:

Faites de même avec le android/settings.gradle fichier en ajoutant ce qui suit en bas:

Ouvert android/app/src/main/java/com/react-native-common-screens/MainApplication.java et importez le package:

Enfin, initialisez le package:

Création de la page Galerie

Bon, maintenant que vous avez essayé de coder la mise en page vous-même (pas de triche, non?), Je vais vous montrer comment j’ai construit mon implémentation.

Contrairement aux deux pages précédentes, la page de la galerie a besoin de quelques images qui lui serviront de contenu principal. Vous pouvez aller sur Google et rechercher des images ou télécharger les images à partir du Dépôt GitHub. Toutes les images que j’ai utilisées sont étiquetées pour être réutilisées par leurs propriétaires respectifs, vous pouvez donc les utiliser librement si vous le souhaitez. Une fois que vous avez les images, enregistrez-les dans le src/images annuaire. En raison de la façon dont les images seront disposées, elles doivent toutes avoir des dimensions égales.

En relation :  5 utilisations créatives de présentations PowerPoint que vous n'avez pas encore explorées

Commencez par créer le fichier (src/pages/Gallery.js) et ajoutez le code passe-partout:

Cette page a besoin d’un constructor() fonction dans laquelle vous définissez les chemins vers les images que vous souhaitez utiliser. Dans React Native, la façon dont vous faites référence aux images qui se trouvent dans votre répertoire de travail consiste à les exiger comme vous le feriez avec un module JavaScript. Il est également important de noter que vous ne pouvez pas avoir de chemins d’image générés dynamiquement, vous devez donc fournir le chemin réel à la main.

Vous n’avez pas vraiment besoin de les définir dans l’état car les valeurs ne changeront pas. Vous pouvez en fait les définir dans un fichier séparé, l’importer, l’affecter à une variable, puis l’utiliser directement. Mais par souci de simplicité, j’ai décidé de simplement tout mettre en l’état.

À l’intérieur de render() méthode, vous allez casser la tendance de tout emballer dans un ScrollView composant, car le composant de tabulation dans la partie la plus basse de l’écran doit avoir une position fixe. Cela signifie que même si les photos dépassent la hauteur disponible, les onglets doivent toujours rester en place. Pour y parvenir, utilisez un View composant pour tout envelopper et envelopper uniquement la collection de photos dans un ScrollView. Cela vous permet d’appliquer le défilement uniquement au conteneur de la collection de photos:

Vous pouvez maintenant commencer à voir un modèle ici. Chaque fois que vous devez utiliser du code JavaScript dans le render() , vous devez créer une fonction distincte pour contenir ce code, au lieu de le placer directement dans le render() fonction. Cela le garde mince et propre.

Passons maintenant au style. Bien qu’un ScrollView n’est pas utilisé pour tout emballer cette fois, il est important de noter que vous devez encore fournir flex: 1 au conteneur principal pour qu’il consomme la totalité de l’espace disponible.

le renderGallery() est très similaire à la fonction renderWeeks() fonction que nous avons utilisée dans le didacticiel précédent, que nous avons utilisée pour rendre une page de calendrier. Si vous voulez un rappel sur la façon dont cela fonctionne, continuez et lisez le didacticiel précédent sur les pages de calendrier. Ce que vous devez savoir, c’est que resizeMode est appliqué au Image. Dans ce cas, il est défini sur cover, ce qui fait que l’image occupe tout l’espace disponible de son conteneur, tout en conservant son rapport hauteur / largeur. Cela se traduit par une image légèrement agrandie pour les appareils avec des écrans plus grands si l’image d’origine est plus petite.

Voici le getPairsArray() fonction:

En relation :  7 choses incroyables que vous pouvez faire dans l'application Arts et Culture de Google

pied de page de style page de galerie

Enfin, voici le style de chaque rangée (item) et photo (photo). Notez l’utilisation de flex: 1 sur la photo réelle. Ceci est fait parce que le Image Le composant lui-même est son propre conteneur. Vous voulez que le conteneur lui-même occupe la moitié de l’espace disponible pour chaque ligne – c’est pourquoi flex la propriété doit être attribuée. Si cela n’est pas fait, seules les dimensions nécessaires à la photo seront consommées, et le resizeMode que vous avez ajouté plus tôt n’aura même pas d’effet.

Conclusion

C’est ça! Dans ce didacticiel, vous avez appris à implémenter la mise en page d’une page de galerie. Nous nous sommes concentrés sur la manière de gérer les images lors de la mise en page de vos applications React Native. Vous devez souvent utiliser une combinaison de flex et resizeMode pour que les images se déroulent comme vous le souhaitez. Comment ma solution s’est-elle comparée à la vôtre? Faites-nous savoir dans le forum de discussion ci-dessous.

Dans un prochain didacticiel, vous apprendrez à implémenter la mise en page couramment utilisée dans les applications d’actualités. En attendant, découvrez quelques-uns de nos autres tutoriels sur React Native et Flexbox!

  • Une introduction au module CSS Flexbox

    HTML et CSS
  • Premiers pas avec les mises en page natives React

  • Créez une application sociale avec React Native

  • Animez votre application native React

  • Comment créer une application de détection de visage avec React Native

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.