Accentsconagua
Share
Dans cette série, vous apprendrez à 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. L'objectif principal de cette série est de vous salir les mains lors de la mise en page du contenu de vos applications React Native..
Si vous débutez dans la présentation 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 d'abord, avant de lire mes instructions détaillées dans le didacticiel. Vous ne bénéficierez pas vraiment de ce tutoriel simplement en le lisant! Essayez d'abord avant de chercher les réponses ici. Si vous parvenez à ressembler à l'écran d'origine, comparez votre implémentation à la mienne. Ensuite, décidez 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:
Les galeries sont souvent utilisées pour afficher une collection de contenus liés de manière à ne présenter que les informations nécessaires. La plupart du temps, il s'agit d'une photo, d'un titre et d'autres informations pertinentes..
Voici quelques exemples de ce type de mise en page utilisé à l'état sauvage:
La première étape consiste bien entendu à mettre en place un nouveau projet React Native:
réact-native init réag-native-common-screen
Une fois le projet configuré, ouvrez le index.android.js fichier et remplacez le code par défaut par ce qui suit:
importer Réagir, Composant de 'réagir'; importer AppRegistry de 'react-native'; importer la galerie de './src/pages/Gallery'; exporter la classe par défaut ReactNativeCommonScreens étend Component render () return () AppRegistry.registerComponent ('ReactNativeCommonScreens', () => ReactNativeCommonScreens);
Créer un src / pages dossier et créer un Gallery.js déposer à l'intérieur.
Vous aurez aussi besoin du réagir-native-vector-icons paquet. Ceci est spécifiquement utilisé pour les icônes dans le pied de page.
npm install --save react-native-vector-icons
Ouvrez le android / app / build.gradle fichier et ajouter une référence au paquet:
dependencies // le reste des dépendances se trouvent ici dans le projet de compilation supérieur (': react-native-vector-icons') // add thisFaire la même chose avec le android / settings.gradle fichier en ajoutant ce qui suit en bas:
inclure le projet ': react-native-vector-icons' (': react-native-vector-icons'). projectDir = nouveau fichier (rootProject.projectDir, '… / node_modules / react-native-vector-icons / android')Ouvrir android / app / src / main / java / com / react-natif-common-screens / MainApplication.java et importer le package:
importer java.util.Arrays; importer java.util.List; importer com.oblador.vectoricons.VectorIconsPackage; //Ajoute ça
Enfin, initialisez le paquet:
@Override protected ListgetPackages () retourne des tableaux. asList (new MainReactPackage (), new VectorIconsPackage () // ajouter ceci);
Bon, maintenant que vous avez essayé de coder vous-même la mise en page (pas de triche, pas vrai?), Je vais vous montrer comment j'ai construit ma mise en oeuvre..
Contrairement aux deux pages précédentes, la page de la galerie nécessite des images qui lui serviront de contenu principal. Vous pouvez aller sur Google et rechercher des images ou télécharger les images depuis le 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 manière dont les images seront disposées, elles doivent toutes avoir les mêmes dimensions..
Commencez par créer le fichier (src / pages / Gallery.js) et ajouter le code standard:
importer Réagir, Composant de 'réagir'; importer StyleSheet, View, ScrollView, Image, de 'react-native'; importer l'icône de 'react-native-vector-icons / FontAwesome'; bouton d'importation de '… / composants / Bouton'; export default class Gallery étend le composant …
Cette page a besoin d'un constructeur() fonction où vous définissez les chemins d'accès aux images que vous souhaitez utiliser. Dans React Native, vous faites référence aux images qui se trouvent dans votre répertoire de travail en les exigeant, 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..
constructeur (accessoires) super (accessoires); this.state = photos: [label: 'plage', src: require ('… /images/beach.jpg'), label: 'bridge', src: require ('… /images/bridge.jpg '), label:' champs ', src: require ('… /images/fields.jpg '), label:' montagnes ', src: require ('… /images/mountains.jpg '), label: 'tournesol', src: require ('… /images/sunflower.jpg'), label: 'coucher du soleil', src: require ('… /images/sunset.jpg'), label: ' lac ', src: require ('… /images/lake.jpg '), label:' nature ', src: require ('… /images/nature.jpg '), label:' pink ', src : require ('… /images/pink.jpg'), label: 'rails', src: require ('… /images/rails.jpg'),]; 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'assigner à une variable, puis l'utiliser directement. Mais par souci de simplicité, j’ai décidé de tout mettre dans l’état.
À l'intérieur de rendre() méthode, vous allez briser la tendance à tout envelopper dans un ScrollView composant, car le composant de tabulation situé 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 rester en place. Pour ce faire, utilisez un Vue composant pour tout envelopper et seulement envelopper la collection de photos dans un ScrollView. Cela vous permet d'appliquer le défilement uniquement au conteneur de la collection de photos:
render () return (this.renderGallery () )
Maintenant, vous pouvez commencer à voir un motif ici. Chaque fois que vous devez utiliser du code JavaScript dans le rendre() fonction, vous devez créer une fonction distincte pour contenir ce code, au lieu de le placer directement dans le rendre() une 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 toujours fournir flex: 1 au conteneur principal pour qu'il consomme la totalité de l'espace disponible.
conteneur: flex: 1, flexDirection: 'colonne', galerie: flexDirection: 'colonne', onglets: flexDirection: 'rangée', backgroundColor: '# 333', padding: 20, onglet: flex: 1, icône: textAlign: 'center',
le renderGallery () la fonction est très similaire à la renderWeeks () fonction que nous avons utilisée dans le tutoriel précédent, nous avons utilisé pour rendre une page de calendrier. Si vous souhaitez un rappel sur la façon dont cela fonctionne, allez-y et lisez le didacticiel précédent sur les pages de calendrier. Ce que vous devez savoir, c'est que resizeMode est appliqué à la Image. Dans ce cas, il est réglé sur couverture, ce qui permet à l’image d’occuper tout l’espace disponible de son conteneur tout en conservant son rapport de format. Cela se traduit par un léger agrandissement de l'image pour les appareils dotés d'écrans plus grands si l'image d'origine est plus petite..
renderGallery () var count = 0; var previous_item = "; var pairs = this.getPairsArray (this.state.photos); return pairs.map ((item, index) => return () );
Ici se trouve le getPairsArray () une fonction:
getPairsArray (photos) var paires_r = []; var paires = []; var count = 0; photos.forEach ((item) => count + = 1; pairs.push (item); if (count == 2) pairs_r.push (pairs) count = 0; paires = [];); return pairs_r;
Enfin, voici le style pour chaque rangée (article) 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 un fléchir la propriété doit être attribuée. Si cela n’est pas fait, seules les dimensions requises par la photo seront utilisées et les resizeMode que vous avez ajouté plus tôt n'aura même pas d'effet.
item: flex: 1, flexDirection: 'rangée',, photo: flex: 1
C'est tout! Dans ce tutoriel, vous avez appris à implémenter la mise en page d'une page de galerie. Nous nous sommes concentrés sur la gestion des images pour la présentation de vos applications React Native. Souvent, vous devez utiliser une combinaison de fléchir et resizeMode afin de faire circuler les images 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 tutoriel, vous apprendrez à mettre en œuvre la disposition couramment utilisée dans les applications d'actualités. En attendant, consultez certains de nos autres tutoriels sur React Native et Flexbox!
