Présentations d’applications natives React courantes: page de calendrier

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 allez créer 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 didacticiel. 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 cette deuxième partie de la série, vous allez créer la page de calendrier suivante:

page de calendrier

Les applications de calendrier sont utilisées pour suivre les événements et les rendez-vous ajoutés par l’utilisateur. Vous trouverez différentes variantes dans la nature, mais la plupart d’entre elles auront les mêmes éléments qu’un calendrier physique: le mois et l’année en cours, les jours du mois et les événements ou rendez-vous ajoutés par l’utilisateur.

Voici quelques exemples de ce type de mise en page:

calendrier google
calendrier android

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 Calendar.js fichier à l’intérieur.

Vous aurez également besoin du react-native-vector-icons paquet. Ceci est spécifiquement utilisé pour les icônes de navigation ainsi que pour les autres icônes qui seront nécessaires dans la 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 de calendrier

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.

Au début, je pensais que ce serait le plus difficile à mettre en œuvre, mais croyez-moi, ce n’est vraiment pas si compliqué tant que vous connaissez déjà les bases. Il existe ici quelques possibilités d’utiliser du code JavaScript pour faciliter le rendu.

Commencez par inclure tous les composants et packages dont vous aurez besoin:

Cette fois, il y a un nouveau package que vous n’avez pas encore installé, et c’est lodash. Vous n’aurez pas vraiment besoin de toute la bibliothèque lodash, juste le range fonction. Ceci est utilisé pour générer un tableau de nombres basé sur une plage spécifique. Vous pouvez installer uniquement cette fonction en exécutant npm install --save lodash.range sur votre terminal.

Ajoutez le code standard pour créer des pages:

L’en-tête comporte trois éléments: le bouton pour revenir à la page précédente, le titre de la page en cours et le texte montrant une représentation conviviale de la date actuellement sélectionnée.

aspect initial de la page de calendrier

header a un flexDirection de row pour que chacun header_item est empilé horizontalement. Le même flex valeur est attribuée à chacun d’eux afin qu’ils consomment des quantités égales d’espace. text_center et text_right sont utilisés pour aligner le texte à l’intérieur de ceux header_items au centre et à droite. Cela est fait parce que, par défaut, ils sont alignés sur le côté le plus à gauche de leur conteneur.

Une fois les styles ajoutés, cela devrait maintenant ressembler à ceci:

en-tête de style page de calendrier

Vient ensuite le calendrier proprement dit, divisé en trois parties: l’en-tête, les jours de la semaine et les jours du calendrier:

L’en-tête du calendrier permet à l’utilisateur de changer l’année et le mois.

En relation :  Comment créer des présentations de diaporama impressionnantes dans iMovie

Il y a au moins deux façons de mettre cela en œuvre. La première méthode consiste à traiter chaque élément comme un élément unique et à appliquer justifyContent: 'space-between' à son contenant. La deuxième méthode consiste à regrouper tous les éléments qui ont à voir avec l’année et à regrouper ceux qui ont à voir avec le mois.

La deuxième méthode est celle qui est appliquée ci-dessous. Sémantiquement parlant, cela a beaucoup plus de sens car le bouton de navigation en arrière d’une année, l’année elle-même et le bouton de navigation vers l’avant sont tous liés, vous pouvez donc les traiter comme une seule chose en les mettant dans le même conteneur. La même chose est vraie avec les contrôles du mois.

page de calendrier ajouté en-tête de calendrier

De là, vous pouvez appliquer la même technique à ces deux groupes de composants dans la même ligne. Pour ajouter des espaces entre les deux boutons (arrière et avant) et l’étiquette, nous utilisons justifyContent: 'space-between'. Nous utilisons alignItems: 'center' pour pousser tous les éléments à l’intérieur vers le centre. Enfin, nous ajoutons un rembourrage gauche et droit pour ajouter plus d’espace entre les deux groupes.

page de calendrier ajouté styles d'en-tête de calendrier

Viennent ensuite les jours de la semaine. Nous utilisons une fonction pour les rendre car il est préférable d’utiliser du code JavaScript pour rendre tous les éléments.

Donc au lieu d’en avoir sept View ou Text composants rendant chaque jour de la semaine, vous pouvez simplement avoir un tableau contenant les jours de la semaine. Vous pouvez ensuite parcourir ces jours en utilisant le Array.map() fonction. Pour chaque itération, rendez un Text composant qui montre le jour.

Notez que dans le code ci-dessus, le toUpperCase() La fonction est utilisée pour convertir toutes les lettres de chaque jour en majuscules. React Native n’est pas fourni avec text-transform Propriété CSS, c’est donc le seul moyen d’obtenir des lettres majuscules en dehors de l’utilisation manuelle de chaînes majuscules.

page de calendrier ajoutée jours de semaine calendaires

Voici le style de l’en-tête du calendrier:

page de calendrier style jours de semaine calendaires

Les jours calendaires utilisent également une fonction de rendu des jours:

le renderWeeks() utilise la fonction range() fonction dans lodash pour générer un tableau contenant les jours du mois dernier et les jours du mois en cours. Ces deux tableaux sont ensuite fusionnés.

Cependant, vous ne pouvez pas utiliser directement le tableau résultant comme source de données pour les jours calendaires. C’est parce que si vous parcourez simplement les éléments et affichez un Text composante pour chaque jour, il n’y aura aucune distinction entre chaque semaine. Vous savez déjà que pour intégrer chaque jour calendaire, vous devez postuler flexDirection: 'row' à son contenant. Donc, en l’appliquant à un seul conteneur, tous les jours calendaires seraient placés sur une seule ligne.

Cela signifie que vous devez avoir un conteneur séparé pour chaque semaine. La question est de savoir comment. Encore une fois, il existe au moins deux façons d’y parvenir.

La première méthode consiste à avoir une variable stockant le nombre de jours actuellement générés, puis à ajouter une instruction conditionnelle qui rendra une ouverture <View> chaque fois que la variable contient et une clôture </View> à chaque fois que c’est 7. Une fois que c’est 7, réinitialisez-le à . C’est la méthode la plus simple.

Mais je vais utiliser une méthode différente ici. Sous le getWeeksArray() fonction est utilisée pour l’implémenter. Cette fonction accepte le tableau de jours et les regroupe en tableaux contenant chacun sept jours. À partir de là, vous pouvez parcourir chacun de ces tableaux pour rendre le conteneur de la semaine. Ensuite, pour chaque itération, vous parcourez à nouveau les jours de la semaine pour afficher les jours. C’est ce que le renderDays() fonction fait.

Voici le getWeeksArray() fonction:

Et voici le renderDays() fonction:

En relation :  3 façons de créer une page FAQ de qualité (et conviviale pour le référencement)
page de calendrier ajoutée jours calendaires

Ajoutez le style pour chaque semaine (week_days) et jour (day et day_text):

page de calendrier ajouter le style des jours de calendrier

Vient ensuite la note ajoutée par l’utilisateur pour le jour actuellement sélectionné et la date et l’heure sélectionnées. Encore une fois, il est préférable de regrouper les éléments en fonction de leur objectif plutôt que de la manière dont ils sont placés dans la page. Certes, tous ces éléments sont liés, nous les placerons donc dans le même conteneur. Mais en y regardant de plus près, vous verrez que vous pouvez les regrouper davantage: la note réelle et la date sélectionnée. Dans cet esprit, voici le balisage avec lequel vous vous retrouverez:

page de calendrier ajouter des notes

La date sélectionnée occupe moins d’espace que la note, vous devez donc appliquer un plus grand flex valeur aux notes. flex: 3 et flex: 1 sont utilisés dans ce cas, ce qui signifie que les billets consomment 3/4 de l’espace disponible et la date sélectionnée en consomme 1/4. Vous pouvez également utiliser des décimales (0.75 et 0.25) si cela a plus de sens pour vous. L’important est de choisir une norme et de s’y tenir. alignItems: 'flex-end' est utilisé sur notes_selected_date afin que tous ses enfants soient alignés à droite. Cela est nécessaire car, par défaut, ils sont alignés à gauche.

la page de calendrier a ajouté un style aux journaux

Enfin, nous ajoutons les journaux, qui sont très similaires à ceux du tutoriel précédent, je vous laisse donc le soin de déterminer comment la mise en page est réalisée!

Voici les styles:

Conclusion

C’est ça! Dans ce didacticiel, vous avez créé une page de calendrier. Nous avons créé une belle mise en page de calendrier pour une application et je vous ai montré comment le code JavaScript peut être utilisé pour compenser certaines des limitations de Flexbox.

Comme vous l’avez vu, nous avions besoin d’un moyen de limiter le nombre de jours consécutifs à sept jours seulement. Flexbox n’a pas de moyen de spécifier cela, nous avons donc utilisé JavaScript pour reconstruire le tableau original de jours de telle sorte qu’ils soient divisés en groupes de sept jours chacun. À partir de là, tout ce que nous avions à faire était d’envelopper chaque groupe dans un View puis appliquez flexDirection: 'row' pour que chacun d’eux soit rendu dans sa propre rangée.

Dans un prochain didacticiel, vous apprendrez à implémenter la mise en page couramment utilisée dans les pages de la galerie. En attendant, consultez certains de nos autres tutoriels sur React Native et Flexbox.

  • Commencez avec React Native

  • Premiers pas avec les mises en page natives React

    Réagir natif
  • Créez une application sociale avec React Native

  • Animez votre application native React

    Réagir natif
  • Une introduction au module CSS Flexbox

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.