Share
Dans ce didacticiel, vous apprendrez à mettre en forme les applications React Native et à mettre en œuvre les mises en page couramment utilisées dans les applications. Cela inclut la disposition de la pile, la disposition de la grille et la disposition absolue. Je présume que vous connaissez déjà les bases du style d'une application React Native et de l'utilisation du CSS en général. Je ne m'attarderai donc pas trop sur StyleSheet.create et comment ajouter du style à différents éléments.
Vous pouvez trouver le code source complet pour ce tutoriel sur GitHub.
Pour simplifier les choses, nous utiliserons React Native for Web. Avec React Native pour Web Starter, nous pouvons facilement créer un nouveau projet React Native pouvant être exécuté dans le navigateur. Ce code est 100% compatible avec le projet React Native. Nous allons créer un composant distinct pour chaque mise en page que nous allons implémenter afin que vous puissiez facilement les importer dans un projet React Native normal si vous le souhaitez. Nous utilisons simplement React Native pour le Web car il est plus facile de le mettre en marche..
Vous pouvez exécuter les commandes suivantes pour configurer le projet:
clone de git https://github.com/grabcode/react-native-web-starter.git cd RNLayouts cd RNLayouts rm -rf .git npm installer
Une fois l'installation terminée, naviguez à l'intérieur du app / composants annuaire. C’est là que se trouvent les fichiers sur lesquels nous allons principalement travailler.
Ouvrez le App.js fichier et remplacez le code par défaut par ce qui suit:
importer Réagir, Composant de 'réagir'; // Importe les composants que nous allons créer ici. Classe d'exportation. App étend. Component render () return (// utilise les composants ici);
Plus tard, vous pourrez importer les composants que nous allons créer et les restituer à partir de ce fichier. Rappelez-vous simplement que tout composant que nous sauvegardons à mises en page répertoire ne devrait pas être rendu avec autre chose. Par exemple, si nous avons layouts / StackLayout.js, faire ce qui suit dans App.js:
importer Réagir, Composant de 'réagir'; // importer les composants que nous allons créer ici import StackLayout de './layouts/StackLayout'; la classe d'exportation App étend Component render () return ()
Vous pouvez servir le projet en exécutant la commande suivante:
npm run dev
Cela vous permet d'y accéder dans le navigateur en visitant http: // localhost: 3000. Un rechargement complet de la page sera déclenché si vous modifiez l’un des fichiers actuellement importés à partir du App.js fichier.
Les mises en page dans React Native utilisent un sous-ensemble de Flexbox. (Je dis "sous-ensemble" car toutes les fonctionnalités de la spécification Flexbox ne sont pas incluses.) Ainsi, si vous connaissez déjà Flexbox, vous pouvez facilement appliquer ces compétences à React Native. Il est également intéressant de noter qu'il n'y a pas de flotteurs ou d'unités basées sur des pourcentages dans React Native. Cela signifie que nous ne pouvons faire que des mises en page utilisant Flexbox et CSS..
Le premier type de disposition que nous allons implémenter est la disposition de pile. Pour une orientation verticale, il empile les éléments les uns sur les autres, tandis que pour une orientation horizontale, les éléments sont placés côte à côte. Regardons d'abord l'orientation verticale:
Voici le code pour accomplir la mise en page ci-dessus:
Accentsconagua
importer Réagir, Composant de 'réagir'; importer StyleSheet, View, Dimensions de 'react-native'; var hauteur = Dimensions.get ('fenêtre'); var box_count = 3; var box_height = height / box_count; classe d'exportation par défaut VerticalStackLayout étend Component render () return ( ) const styles = StyleSheet.create (conteneur: flex: 1, flexDirection: 'colonne', box: hauteur: box_height, box1: backgroundColor: '# 2196F3', box2: backgroundColor: '# 8BC34A ', box3: backgroundColor:' # e3aa1a '); En décomposant le code ci-dessus, nous obtenons d’abord la hauteur de l’espace disponible pour l’application à consommer. Ensuite, nous calculons quelle sera la hauteur de chaque case. Puisque nous avons trois cases, nous divisons par trois.
var hauteur = Dimensions.get ('fenêtre'); var box_count = 3; var box_height = height / box_count;Pour le balisage, les boîtes doivent être emballées dans un conteneur. Les styles communs sont déclarés dans le boîte objet, et des couleurs d’arrière-plan uniques sont appliquées à des objets portant un nom unique (box1, box2, box3):
Pour utiliser Flexbox, vous devez utiliser le fléchir propriété sur le conteneur. La valeur est la quantité d'espace qu'il va consommer. Si c'est 1, cela signifie qu'il utilisera tout l'espace disponible, à condition que l'élément n'ait pas de frères et sœurs. Nous allons regarder un exemple d'utilisation fléchir avec des frères et sœurs plus tard.
flexDirection vous permet de spécifier l'axe principal de la mise en page. Par défaut, il est défini sur colonne. Réglage flexDirection à colonne signifie que les enfants du conteneur seront disposés verticalement (empilés les uns sur les autres) tout en le plaçant à rangée signifie que les enfants seront disposés horizontalement (côte à côte). Pour obtenir une hauteur égale, définissez la hauteur du boîte à celle de la valeur que nous avons calculée plus tôt.
const styles = StyleSheet.create (conteneur: flex: 1, flexDirection: 'colonne', case: hauteur: case_hauteur // définir celui-ci, case1: couleurCouleur: '# 2196F3', boîte2: couleurCouleur : '# 8BC34A', box3: backgroundColor: '# e3aa1a');
Voici une image pour vous aider à visualiser la manière dont le contenu se déroulera en fonction de la flexDirection que vous avez spécifié.
La méthode que je viens de vous montrer est la manière manuelle de faire les choses. En utilisant le Dimensions la calcul de la largeur ou de la hauteur des éléments échouera si votre application prend en charge l’orientation des dispositifs portrait et paysage. En effet, dès que l'utilisateur retournera son appareil, la largeur ou la hauteur calculée précédemment sera fausse. React Native ne le recalculera pas automatiquement pour vous, si l'application finit par paraître bizarre.
Flexbox peut effectivement effectuer le calcul pour vous si vous ne fournissez que les valeurs correctes. Pour obtenir la même disposition que ci-dessus sans utiliser le Dimensions, tout ce que vous avez à faire est de spécifier flex: 1 pour toutes les cases au lieu de spécifier le la taille:
box: flex: 1,
Ceci est maintenant un exemple d'utilisation fléchir avec des frères et soeurs. Maintenant, nous avons trois frères et soeurs avec le même fléchir valeur. Cela signifie qu’ils partageront à parts égales l’espace disponible depuis le fléchir la valeur est la même. (Vous pouvez réellement utiliser fléchir tant que les éléments enfants ont tous la même valeur.)
En utilisant cette connaissance, vous pouvez maintenant réaliser des mises en page avec un en-tête, un contenu et un pied de page:
// entête box1: flex: 1, backgroundColor: '# 2196F3', // contenu box2: flex: 10, backgroundColor: '# 8BC34A', // footer box3: flex: .5, backgroundColor: ' # e3aa1a '
Voici à quoi cela ressemblera:
Notez que ce sera statique. Donc, si votre contenu principal dépasse la hauteur maximale disponible, le reste de votre contenu sera masqué. Si vous vous attendez à ce que votre contenu dépasse cette limite, vous pouvez utiliser la fonction intégrée. ScrollView composant pour générer automatiquement une barre de défilement verticale, comme dans les pages Web.
Pour mettre en œuvre des dispositions de pile horizontales, tout ce que vous avez à faire est de changer le flexDirection à rangée.
conteneur: flex: 1, flexDirection: 'row',
Si on change de boite fléchir valeur de retour à 1, cela se traduit par le résultat suivant:
La seule chose que nous avons changé est le flexDirection, qui est maintenant réglé sur rangée. Puisque les cases sont toutes réglées sur flex: 1, ils auront la même largeur et la même hauteur. Toutes les idées de la pile verticale s’appliquent également à celle-ci..
Si vous souhaitez contrôler la distribution des enfants dans un conteneur, vous utilisez le justifierContenu propriété sur le conteneur.
Vous trouverez ci-dessous les cinq valeurs possibles pouvant être utilisées avec cette propriété. Dans les exemples suivants, la taille de chacun des enfants est réduite pour montrer leur apparence. Vous ne pourriez voir aucune différence si le fléchir la valeur était 1 pour chacun des enfants, car ils finiraient par consommer tout l'espace disponible.
départ flexible: les éléments enfants sont alignés vers le point de départ. Notez le fond blanc juste en dessous du dernier enfant. C'est comme ça que vous savez que cela utilise départ flexible parce que tous les enfants sont alignés vers le point de départ. Cela laisse un espace vide vers la fin.
extrémité flexible: les éléments enfants sont alignés vers la ligne de fond. Notez que cette fois l'espace vide est au point de départ.
centre: les éléments enfants sont placés vers le centre. Cette fois, l’espace vide est divisé équitablement entre le point de départ et le point de fin..
espace-autour: les éléments enfants sont répartis de telle sorte qu'il y ait un espace égal autour de chacun d'eux. Cela signifie que les éléments de la partie extérieure auraient moins d'espace sur leur côté extérieur et que l'espace entre les deux enfants est doublé..
l'espace entre: les éléments enfants sont répartis de telle sorte qu'il y ait un espace égal entre chacun d'eux. 
Comme vous l'avez peut-être remarqué, chacune de ces propriétés de style dépend de la hauteur ou de la largeur des éléments enfants. Cela dépend de la largeur si le flexDirection est rangée, et sur la hauteur si le flexDirection est colonne.
Par exemple, l'espace entre n'aura pas vraiment d'effet sur une disposition de pile verticale si chacun des éléments enfants utilise fléchir contrôler la hauteur. En effet, il ne restera plus d’espace libre pour que l’espace entre chaque élément enfant soit consommé..
À première vue, justifierContenu et alignItems pourrait sembler qu'ils fassent la même chose. Ils partagent également trois valeurs possibles: départ flexible, extrémité flexible, et centre, avec l'ajout d'un étendue valeur.
La principale différence entre justifierContenu et alignItems est l'axe sur lequel les enfants sont répartis. Comme vous l'avez vu plus tôt, justifierContenu utilise toujours l'axe principal lors de la distribution des éléments enfants. Mais alignItems utilise l'axe opposé au primaire.
Nous savons déjà que l’axe est déterminé par le flexDirection cela a été défini. Donc si le flexDirection est rangée, l'axe primaire va de gauche à droite. Cela signifie que l'axe transversal va circuler de haut en bas. D'autre part, si flexDirection est colonne alors l'axe transversal ira de gauche à droite.
Voici quelques exemples de justifierContenu et alignItems mis en œuvre côte à côte avec le flexDirection de rangée. Le premier utilise justifierContenu tandis que le second utilise alignItems.
départ flexible: le positionnement des éléments est le même, c'est pourquoi le alignItems la mise en œuvre ressemble exactement à justifierContenu.
extrémité flexible: maintenant nous commençons à voir une différence. Dans le premier cas, c'est à la fin de la ligne de la première ligne, alors que la deuxième instance semble être à la ligne de départ de la dernière ligne. 
centre: centre a la même idée que le reste des valeurs que nous avons utilisées jusqu'à présent. Dans le premier cas, les éléments sont centrés sur l'axe des x, tandis que dans le second cas, ils sont centrés sur l'axe des y.
étendue: utilisez cette option pour que les éléments enfants s’étirent pour remplir le conteneur. C'est la valeur par défaut pour alignItems, donc, spécifier cette valeur est facultatif. Vous avez déjà vu comment cela fonctionne lorsque nous avons implémenté des dispositions de pile verticale et horizontale.Voici le code utilisé dans les exemples ci-dessus. Il suffit de jouer avec les valeurs pour le flexDirection, justifierContenu et alignItems si vous voulez voir à quoi ils ressemblent:
importer Réagir, Composant de 'réagir'; importer StyleSheet, View de 'react-native'; classe par défaut d'exportation AlignItems étend Component render () return () const styles = StyleSheet.create (wrapper: flex: 1, conteneur: flex: .5, flexDirection: 'ligne', justificationContenu: 'flex-start', // à remplacer par flex-end ou center borderBottomWidth : 1, borderBottomColor: '# 000', container2: flex: .5, flexDirection: 'row', alignItems: 'flex-start' // à remplacer par flex-end ou center, boîte: width: 100, height: 100, box1: backgroundColor: '# 2196F3', box2: backgroundColor: '# 8BC34A', box3: backgroundColor: '# e3aa1a';
Si vous souhaitez spécifier l'alignement d'éléments individuels dans un conteneur, vous pouvez utiliser le s'aligner propriété. Toutes les valeurs possibles pour align-items sont applicables à cette propriété aussi. Ainsi, par exemple, vous pouvez aligner un seul élément à la droite de son conteneur, tout le reste étant aligné à gauche..
React Native n’est pas livré avec un système d’agencement de grille, mais Flexbox est suffisamment flexible pour en créer un. En utilisant ce que nous avons appris jusqu'à présent, nous pouvons recréer des mises en page de grille à l'aide de Flexbox. Voici un exemple:
Et voici le code qui crée cette mise en page:
importer Réagir, Composant de 'réagir'; importer StyleSheet, View de 'react-native'; export default class GridLayout étend Component render () return () const styles = StyleSheet.create (row: flex: 1, flexDirection: 'row', justificationContenu: 'espace-entre', marginBottom: 10, box: flex: 1, hauteur: 100, backgroundColor: ' # 333 ',, box2: backgroundColor:' green ', box3: backgroundColor:' orange ', deux: flex: 2);
Dans le code ci-dessus, vous pouvez voir que nous émulons ce qu’ils font habituellement dans les frameworks de grille CSS. Chaque ligne est encapsulée dans une vue distincte et les éléments de la grille sont à l'intérieur. Un défaut fléchir valeur de 1 est appliqué à chaque élément afin qu'ils partagent également l'espace disponible sur chaque ligne. Mais pour les articles qui ont besoin de consommer plus d’espace, un fléchir la valeur est appliquée. Ceci ajuste automatiquement la largeur des autres éléments de manière à ce qu’il puisse s’adapter à tous les éléments..
Si vous souhaitez ajouter des espaces entre chaque élément d'une rangée, vous pouvez ajouter un remplissage à chacun d'eux, puis créer une zone à l'intérieur de chacun d'eux..
Cela se traduit par la sortie suivante:
React Native prend uniquement en charge absolu et relatif positionnement. Cela ne devrait toutefois pas vous limiter, car vous pouvez toujours les combiner avec Flexbox pour positionner les différents éléments où vous le souhaitez..
Regardons comment nous pourrions accomplir ce qui suit:
Nous pouvons y parvenir facilement si nous maîtrisons parfaitement les valeurs de positionnement disponibles dans le navigateur. Mais puisque nous sommes dans React Native, nous devons commencer par penser à la manière Flexbox, puis utiliser le positionnement CSS pour les petites cases..
En utilisant Flexbox, cela peut être réalisé de deux manières. Vous pouvez soit utiliser rangée ou colonne pour le flexDirection pour le conteneur principal. La manière dont vous organisez les différents éléments dépend de la méthode choisie. Ici, nous allons utiliser rangée pour le flexDirection donc l'écran sera divisé en trois colonnes. La première colonne contiendra la case orange, la deuxième colonne contiendra les cases noire, grise et verte et la troisième contiendra les cases bleue et mauve.
importer Réagir, Composant de 'réagir'; importer StyleSheet, View de 'react-native'; exporter la classe par défaut Le positionnement étend Component render () return ()
Si vous savez déjà comment chacun des éléments sera présenté, il ne vous reste plus qu'à appliquer ce que nous avons appris jusqu'à présent. Après tout, nous n’avons pas vraiment besoin d’appliquer le positionnement CSS sur les grandes boîtes, mais uniquement sur les petites..
La première colonne a seulement la case orange, donc appliquer justifierContenu: 'centre' à son conteneur devrait faire l'affaire. Si vous avez déjà oublié, flexDirection par défaut à colonne. Cela signifie que si vous définissez justifierContenu à centre, les enfants seront alignés au centre de l'axe des ordonnées.
La deuxième colonne a fondamentalement la même idée que la première, mais cette fois-ci, nous ne voulons pas aligner toutes les cases au centre. Ce que nous voulons, c’est qu’ils aient des espaces égaux entre eux, et justifierContenu: 'espace-entre' fait ce travail. Mais en même temps, nous voulons également centrer tous les enfants sur l’axe des X afin d’utiliser alignItems: 'center'.
La seule difficulté est qu’il ne faut pas appliquer de largeur propriété dans la zone grise car nous souhaitons qu’elle s’étire jusqu’à consommer toute la largeur de son parent. Puisque nous n'avons appliqué aucun largeur, nous devrions appliquer alignSelf: 'stretch' dans la case grise pour qu'elle consomme toute la largeur de son parent.
Ensuite, pour positionner la petite boîte rouge légèrement à l’écart de sa position relative, on utilise position: relative et ensuite appliquer Haut et la gauche valeurs parce que sa position relative est autour du coin supérieur gauche de son parent.
Quant à la petite boîte orange, nous utilisons position: 'absolue' parce que nous devons l’aligner sur le coin supérieur droit de son parent. Cela fonctionne car les éléments absolument positionnés dans React Native sont liés à leur parent.
La troisième colonne applique essentiellement la même idée, donc je ne vais plus l'expliquer.
const styles = StyleSheet.create (conteneur: flex: 1, flexDirection: 'rangée', à gauche: flex: 1, JustifierContenu: centre ', milieu: flex: 5, JustifierContenu:' espace-entre ' , alignItems: 'center', right: flex: 1, JustifierContenu: 'center', alignItems: 'flex-end', boîte: width: 100, height: 100, backgroundColor: '# 333', big_green_box : backgroundColor: 'green', big_orange_box: backgroundColor: 'orange', big_lightblue_box: backgroundColor: '# 03A9F4', big_gray_box: hauteur: 100, alignSelf: 'stretch', backgroundColor: '#ccc' , inner_box: width: 20, height: 20,, red_box: position: 'relative', backgroundColor: 'red', en haut: 10, à gauche: 10, orange_box: position: 'absolute', backgroundColor: ' orange ', en haut: 10, à droite: 10, purple_box: position:' absolute ', backgroundColor:' violet ', en bas: 10, à droite: 10, black_box: position:' relative ', backgroundColor:' black ' );
Essayons ensuite d’implémenter une disposition d’en-tête et de pied de page fixe. Cela se trouve généralement dans les applications qui ont une navigation par onglet; les onglets sont fixés au bas de l'écran tandis que le contenu principal peut faire défiler.
Pour ce faire, nous devons utiliser le ScrollView composant de sorte que, si le contenu principal dépasse la hauteur du conteneur, React Native génère automatiquement une barre de défilement verticale. Cela nous permet d'ajouter marginTop et marginBottom afin que le contenu principal ne soit pas obstrué par l'en-tête et le pied de page fixes. Notez également que le la gauche et droite les valeurs de l'en-tête et du pied de page sont définies sur 0 afin qu'ils consomment toute la largeur de l'appareil.
importer Réagir, Composant de 'réagir'; importer StyleSheet, View, ScrollView de 'react-native'; La classe d'exportation par défaut FixedHeaderFooter étend Component render () return () const styles = StyleSheet.create (conteneur: flex: 1, flexDirection: 'colonne', justificationContenu: 'centre', en-tête: hauteur: 40, position: 'absolu', gauche: 0, droite: 0 , top: 0, backgroundColor: '# 03A9F4', zIndex: 10, content: alignItems: 'center', marginTop: 50, marginBottom: 40, pied de page: hauteur: 40, position: 'absolute', gauche: 0, droite: 0, en bas: 0, backgroundColor: '# 8BC34A', boîte: width: 100, height: 100, backgroundColor: '# 333', marginBottom: 10);
Voici à quoi cela ressemblera:
React Native possède une grande communauté derrière lui. Il n’est donc pas étonnant que quelques bibliothèques aient déjà été créées pour faciliter l’implémentation des mises en page. Dans cette section, je vais vous présenter une bibliothèque appelée React Native Easy Grid. Vous pouvez l’utiliser pour décrire la mise en page de votre application en utilisant le la grille, Rangée, et Col Composants.
Vous pouvez l'installer avec la commande suivante:
npm installer react-native-easy-grid --save
Importez la bibliothèque et extrayez les différents composants de votre fichier.
importer Réagir, Composant de 'réagir'; importer StyleSheet, View de 'react-native'; importer Col, Row, Grid de "react-native-easy-grid";
le la grille composant est utilisé pour tout emballer. Col est utilisé pour créer une colonne, et Rangée est utilisé pour créer des lignes. Vous pouvez spécifier un Taille propriété à la fois Rangée et Col, bien que nous ne l'utilisions que sur le Rangée au dessous de. Si la taille n’est pas spécifiée, l’espace disponible sera également divisé en deux. Col les instances.
Dans ce cas, il n'y en a que deux, alors tout l'écran est divisé en deux colonnes. La première colonne est ensuite divisée en deux lignes. Ici nous avons spécifié un Taille, mais vous pouvez réellement le sauter si vous avez juste besoin de rangées de taille égale, comme nous l'avons fait ci-dessous.
La classe d'exportation par défaut FlexboxGridLibrary étend Component render () return () |
|
Une fois que cela est fait, tout ce que vous avez à faire est d’ajouter le style pour les lignes et les colonnes:
const styles = StyleSheet.create (orange_box: backgroundColor: 'orange', green_box: backgroundColor: 'green', gray_box: backgroundColor: 'grey');
Comme vous l'avez remarqué, React Native Easy Grid dispose d'une API très intuitive.
Dans ce tutoriel, vous avez appris à disposer les applications React Native. Plus précisément, vous avez appris à utiliser la Flexbox de React Native pour positionner les éléments. Vous avez également appris à utiliser React Native Easy Grid, ce qui facilite la mise en œuvre de Flexbox..
.
