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 présentations que vous allez créer ne seront pas fonctionnelles. L'objectif principal de cette série est de vous salir les mains lors de la présentation du contenu dans vos applications natives React.
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 cette seconde partie de la série, vous allez créer la page de calendrier suivante:
Les applications de calendrier permettent de 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 comporteront 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:
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 le calendrier de './src/pages/Calendar'; 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 Calendrier.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 de navigation ainsi que d'autres icônes qui seront nécessaires dans la 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..
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 plusieurs possibilités ici d’utiliser le code JavaScript pour améliorer le rendu..
Commencez par inclure tous les composants et packages dont vous aurez besoin:
importer Réagir, Composant de 'réagir'; importer StyleSheet, Text, View, ScrollView de 'react-native'; importer l'icône de 'react-native-vector-icons / FontAwesome'; importer plage de 'lodash'; bouton d'importation de '… / composants / Bouton';
Cette fois, il y a un nouveau paquet que vous n'avez pas encore installé, c'est lodash. Vous n’avez pas vraiment besoin de l’ensemble de la bibliothèque lodash, mais du intervalle une 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:
export default class Calendar calendar Component render () return (… ) const styles = StyleSheet.create (conteneur: flex: 1);
L'en-tête contient trois éléments: le bouton permettant de revenir à la page précédente, le titre de la page actuelle et le texte affichant une représentation conviviale de la date actuellement sélectionnée..
Calendrier Aujourd'hui
entête a un flexDirection de rangée de sorte que chaque header_item est empilé horizontalement. Le même fléchir la 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. Ceci est fait car par défaut ils sont alignés sur le côté le plus à gauche de leur conteneur.
header: backgroundColor: '# 329BCB', flexDirection: 'row', padding: 20, header_item: flex: 1, header_button: flexDirection: 'row', text_center: textAlign: 'center', text_right : textAlign: 'right', header_text: color: '#fff', fontSize: 20, bold_text: fontWeight: 'bold',
Une fois les styles ajoutés, cela devrait maintenant ressembler à ceci:
Suivant est le calendrier actuel, qui est 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.
Cela peut être mis en œuvre de deux manières au moins. La première méthode consiste à traiter chaque élément comme un élément unique et à appliquer justifierContenu: 'espace-entre' à son conteneur. La seconde méthode consiste à regrouper tous les éléments relatifs à l’année et à ceux liés au mois..
La deuxième méthode est celle qui est appliquée ci-dessous. Sémantiquement, cela a beaucoup plus de sens car le bouton de navigation d'une année à l'autre, l'année elle-même, et le bouton de navigation d'une page à l'autre sont tous liés, vous pouvez donc les traiter comme une seule chose en les plaçant dans le même conteneur. La même chose est vraie avec les contrôles de mois.
2013 novembre
À partir de là, vous pouvez appliquer la même technique à ces deux groupes de composants sur la même ligne. Pour ajouter des espaces entre les deux boutons (avant et arrière) et l’étiquette, nous utilisons justifierContenu: 'espace-entre'. Nous utilisons alignItems: 'center' pour pousser tous les éléments à l'intérieur vers le centre. Enfin, nous ajoutons un rembourrage à gauche et à droite pour ajouter plus d'espace entre les deux groupes.
calendar_header: flexDirection: 'row', calendar_header_item: flex: 1, flexDirection: 'row', JustContent: 'space-between', alignItems: 'center', paddingTop: 20, paddingRight: 40, paddingLeft: 40, calendar_header_text: fontWeight: 'bold', fontSize: 20,
Suivant sont les jours de la semaine. Nous utilisons une fonction pour les rendre, car il est préférable d'utiliser du code JavaScript pour afficher tous les éléments..
this.renderWeekDays ()
Donc, au lieu d'avoir sept Vue ou Texte 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 () une fonction. Pour chaque itération, rendre un Texte composant qui montre le jour.
renderWeekDays () let weekdays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']; return weekdays.map ((day) => return (day.toUpperCase () ) );
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 ne vient pas avec le transformation de texte Propriété CSS, c'est donc le seul moyen d'obtenir des lettres majuscules en dehors de l'utilisation manuelle de chaînes majuscules.
Voici le style de l'en-tête du calendrier:
calendar_weekdays_text: flex: 1, couleur: '# C0C0C0', textAlign: 'center',
Le calendrier jours utilise également une fonction pour rendre les jours:
this.renderWeeks ()
le renderWeeks () la fonction utilise le intervalle() function dans lodash pour générer un tableau contenant les jours du dernier mois 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 en tant que source de données pour les jours calendaires. En effet, si vous parcourez simplement les éléments et générez un Texte composant pour chaque jour, il n'y aura pas de distinction entre chaque semaine. Vous savez déjà que pour que chaque jour de calendrier soit en ligne, vous devez appliquer flexDirection: 'ligne' à son conteneur. Donc, l'appliquer à un seul conteneur aurait pour effet de placer tous les jours de calendrier sur une seule ligne.
Cela signifie que vous devez disposer d'un conteneur distinct pour chaque semaine. La question est comment. Encore une fois, il y a au moins deux façons d'accomplir cela..
La première méthode consiste à laisser une variable stocker le nombre de jours actuellement générés, puis à ajouter une instruction conditionnelle qui rendra une ouverture. 0 et une fermeture à chaque fois c'est 7. Une fois c'est 7, réinitialiser à 0. 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 dans des tableaux contenant sept jours chacun. À partir de là, vous pouvez parcourir chacune de ces baies 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 () la fonction fait.
renderWeeks () let past_month_days = range (27, 31); let this_month_days = range (1, 30); let days = past_month_days.concat (past_month_days, this_month_days); let grouped_days = this.getWeeksArray (days); return grouped_days.map ((week_days, index) => return (this.renderDays (week_days) ) );
Ici se trouve le getWeeksArray () une fonction:
getWeeksArray (days) var weeks_r = []; var seven_days = []; var count = 0; days.forEach ((day) => count + = 1; seven_days.push (jour); if (count == 7) weeks_r.push (seven_days) count = 0; seven_days = [];); return weeks_r;
Et voici la renderDays () une fonction:
renderDays (week_days) return week_days.map ((jour, index) => return ( ) );
Ajoutez le style pour chaque semaine (jours de la semaine) et le jour (journée et day_text):
week_days: flexDirection: 'row', jour: flex: 1, backgroundColor: '# F5F5F5', remplissage: 17, marge: 2, day_text: textAlign: 'center', couleur: '# A9A9A9', fontSize : 25,
Vient ensuite la note ajoutée par l'utilisateur pour le jour 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. Bien sûr, tous ces éléments sont liés, nous allons donc les placer dans le même conteneur. Mais à y regarder 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:
Faire du vélo dans le quartier. 20h23 14 JEUDI
La date sélectionnée occupe moins d’espace que la note, vous devez donc appliquer une valeur plus grande. fléchir valeur aux notes. flex: 3 et flex: 1 sont utilisés dans ce cas, ce qui signifie que les notes utilisent 3/4 de l’espace disponible et que la date sélectionnée en utilise 1/4. Vous pouvez également utiliser des nombres décimaux (0,75 et 0,25) si cela vous semble plus logique. 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.
notes: marginTop: 10, padding: 20, borderColor: '# F5F5F5', borderTopWidth: 1, borderBottomWidth: 1, flexDirection: 'row', backgroundColor: '#FAFAFA', notes_notes: flex: 3, notes_text: fontSize: 18, notes_selected_date: flex: 1, alignItems: 'flex-end', flexDirection: 'column', small_text: fontSize: 15, big_text: fontSize: 50, fontWeight: 'bold', inline: flexDirection: 'row',
Enfin, nous ajoutons les journaux, qui sont très similaires à ceux du tutoriel précédent. Je vous laisse donc le soin de comprendre comment la mise en page est réalisée.!
Créer une nouvelle entrée Le jeudi 14 novembre
Voici les styles:
logs: flexDirection: 'ligne', JustifierContenu: 'espace-entre', alignItems: 'center', remplissage: 20, borderColor: '# F5F5F5', borderBottomWidth: 1, log_text: fontSize: 25, log_subtext: fontSize: 18
C'est tout! Dans ce tutoriel, vous avez créé une page de calendrier. Nous avons créé une belle présentation de calendrier pour une application et je vous ai montré comment utiliser le code JavaScript 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 à seulement sept jours. Flexbox ne dispose d'aucun moyen pour spécifier cela. Nous avons donc utilisé JavaScript pour reconstruire le tableau de jours d'origine de manière à ce qu'il soit divisé en groupes de sept jours chacun. De là, tout ce que nous devions faire était d’envelopper chaque groupe dans un Vue et ensuite appliquer flexDirection: 'ligne' pour rendre chacun d'eux rendre dans leur propre rangée.
Dans un prochain tutoriel, vous apprendrez à mettre en œuvre la disposition couramment utilisée dans les pages de galerie. En attendant, consultez certains de nos autres tutoriels sur React Native et Flexbox.
