1 00:00:02,110 --> 00:00:07,000 Donc, dans un nouvel écran de lieu, je veux pouvoir ajouter un lieu et pour cela, je vais 2 00:00:07,030 --> 00:00:12,190 tout d'abord ajouter le composant de saisie de texte qui n'a bien sûr rien à voir avec les fonctionnalités des 3 00:00:12,190 --> 00:00:19,330 appareils natifs mais nous en avons également besoin parce que dans là, nous pouvons maintenant ajouter une telle entrée de texte qui permet à l'utilisateur d'entrer le 4 00:00:19,330 --> 00:00:24,350 titre et donc, je vais également ajouter un composant de texte ici où je dis le titre, qui devrait 5 00:00:24,370 --> 00:00:25,360 agir comme une 6 00:00:25,360 --> 00:00:32,450 étiquette pour cette entrée de texte ici et dans l'ensemble, je veux également une vue de défilement ici pour envelopper tout mon contenu, car je ne sais 7 00:00:32,520 --> 00:00:37,540 pas quel appareil l'utilisateur va utiliser, mais nous ajouterons plus qu'un simple titre, nous ajouterons également un sélecteur 8 00:00:37,540 --> 00:00:43,120 d'image et un sélecteur de lieu tout au long ce module et donc pouvoir faire défiler cette page est vraiment important. 9 00:00:43,180 --> 00:00:48,820 Nous avons donc maintenant cette étiquette de titre et l'entrée de texte qui lui appartient qui pour l'instant ne 10 00:00:48,820 --> 00:00:52,450 feront rien mais qui permettront bientôt à l'utilisateur d'entrer un titre. 11 00:00:52,540 --> 00:00:55,840 Je veux aussi m'assurer que bien sûr ce formulaire peut être soumis, donc 12 00:00:56,170 --> 00:01:02,500 ce que je veux aussi faire, c'est que je veux ajouter un composant bouton ici et après la saisie de texte ici, je vais avoir mon bouton 13 00:01:02,500 --> 00:01:10,450 où je dis enregistrer place pour Par exemple, ajoutez une couleur ici et définissez-la sur Couleurs. primaire et pour cela, vous devez vous assurer que vous 14 00:01:10,540 --> 00:01:15,730 importez les couleurs constantes ici et onPress soumettra plus tard ce formulaire, 15 00:01:15,820 --> 00:01:19,750 pour le moment je ne fais rien ici. 16 00:01:19,750 --> 00:01:25,030 L'entrée de texte peut bien sûr également être configurée, bien que la configuration de base soit très bien ici, je n'ai pas 17 00:01:25,030 --> 00:01:29,920 besoin de changer le type de clavier et ainsi de suite, mais un certain style serait bien et c'est en fait 18 00:01:29,920 --> 00:01:31,360 vrai pour toute la page. 19 00:01:31,360 --> 00:01:37,330 Donc pour cette vue ici par exemple, je veux ajouter un style de formulaire ici, donc un identifiant de style de formulaire afin 20 00:01:37,330 --> 00:01:41,140 que je puisse styliser le formulaire global. Pour le titre 21 00:01:41,140 --> 00:01:50,980 ici, j'ajouterai un style d'étiquette et pour la saisie de texte, je veux aussi ajouter mes propres styles et j'utiliserai l'identifiant 22 00:01:51,100 --> 00:01:55,210 de saisie de texte ici. Avec cela, descendons à la feuille de 23 00:01:55,210 --> 00:02:00,180 style et assurez-vous d'ajouter un peu de style ici. Pour la forme globale, je vais ajouter une 24 00:02:00,220 --> 00:02:05,350 marge dans toutes les directions de 30 afin qu'elle ne repose pas directement sur les bords de l'écran. 25 00:02:06,160 --> 00:02:07,480 Pour l'étiquette, je 26 00:02:07,780 --> 00:02:15,640 veux définir une taille de police de disons 18 et ajouter également une marge au bas de 15 afin que nous ayons un 27 00:02:15,640 --> 00:02:20,530 certain espacement entre l'étiquette et la saisie de texte et sur la saisie 28 00:02:20,860 --> 00:02:27,670 de texte elle-même, bien pour être en mesure de le voir, je vais ajouter un bas de bordure et définir 29 00:02:27,670 --> 00:02:36,460 sa couleur sur ce gris clair ici avec ce code hexadécimal de #ccc et une largeur de bas de bordure ici de 1, puis j'ai également 30 00:02:36,490 --> 00:02:43,060 une marge à son bas, donc au contenu en dessous, le bouton en ce moment de 15 et ce 31 00:02:43,060 --> 00:02:48,300 que j'ajouterai également ici est un peu de rembourrage vertical, juste quatre et un peu 32 00:02:48,670 --> 00:02:52,100 de rembourrage horizontal, juste deux. Si je garde ça, jetons un œil. 33 00:02:52,150 --> 00:02:57,310 Si je vais à l'écran des nouveaux endroits, c'est ce que j'ai et cela ne 34 00:02:57,400 --> 00:03:03,360 semble pas trop minable, également sur Android, c'est quelque chose avec lequel je peux travailler et je peux construire. 35 00:03:03,460 --> 00:03:05,970 Maintenant, bien sûr, cette entrée ne fait rien, 36 00:03:05,980 --> 00:03:13,390 je veux bien sûr capturer ce que l'utilisateur a entré et garder cela simple, ici je n'ajouterai pas de validation super complexe ou 37 00:03:13,390 --> 00:03:15,770 quelque chose comme ça, au lieu 38 00:03:15,790 --> 00:03:22,030 de cela je capturerai juste la valeur et c'est tout. Vous pouvez bien sûr ajouter de la validation, vous pouvez 39 00:03:22,330 --> 00:03:23,360 ajouter un 40 00:03:23,370 --> 00:03:28,680 réducteur comme nous l'avons fait dans le module de saisie utilisateur où vous avez appris comment 41 00:03:28,690 --> 00:03:36,490 gérer des formulaires plus complexes de toutes les manières, là encore je vais garder cela très simple et donc, je vais juste importer utiliser le 42 00:03:36,490 --> 00:03:40,660 hook d'état de React ici pour que je puisse capturer mes valeurs ici. 43 00:03:40,660 --> 00:03:49,360 Donc ici, je vais avoir ma valeur de titre et définir la fonction de valeur de titre et utiliser l'état d'utilisation pour initialiser cela à une 44 00:03:49,350 --> 00:03:53,140 chaîne vide et je vais ensuite ajouter une fonction ici, le 45 00:03:53,230 --> 00:03:59,800 gestionnaire de changement de titre, qui reçoit le texte que l'utilisateur a entré et où l Je vais ensuite définir 46 00:03:59,800 --> 00:04:08,750 ma valeur de titre sur ce texte et ici, bien sûr, vous pouvez ajouter la validation, mais encore une fois pour garder les choses simples, je ne le 47 00:04:08,750 --> 00:04:09,470 ferai pas. 48 00:04:09,470 --> 00:04:15,380 C'est le gestionnaire de changement de titre qui devrait maintenant être lié à l'accessoire de changement de texte ici, sur la saisie de 49 00:04:15,380 --> 00:04:16,040 texte, donc 50 00:04:16,040 --> 00:04:22,190 là je pointerai sur le gestionnaire de changement de titre et je lierai bien sûr la valeur de cette entrée à ma valeur de 51 00:04:22,190 --> 00:04:25,070 titre car c'est là que je stocke l'entrée utilisateur et avec 52 00:04:25,190 --> 00:04:33,050 cela nous avons une entrée utilisateur entièrement fonctionnelle ici où je capture également les valeurs. Maintenant, avec cela, nous pouvons obtenir le 53 00:04:33,050 --> 00:04:35,530 titre, nous avons également une 54 00:04:35,570 --> 00:04:37,640 place de réserve. 55 00:04:37,640 --> 00:04:40,110 Chaque fois que nous appuyons sur ce 56 00:04:40,190 --> 00:04:46,370 bouton, je veux l'enregistrer donc j'aurai mon gestionnaire de sauvegarde qui est une fonction que je veux lier à 57 00:04:46,370 --> 00:04:47,680 ce bouton de 58 00:04:47,720 --> 00:04:54,050 sauvegarde, alors ici au lieu d'avoir cette fonction anonyme vide, je pointerai sur save placez le gestionnaire sur ce bouton 59 00:04:54,050 --> 00:04:58,920 de sauvegarde et là-dedans, je veux maintenant m'assurer que cet endroit est bien enregistré et 60 00:04:59,030 --> 00:05:01,540 pour cela, je vais à nouveau utiliser Redux. 61 00:05:01,910 --> 00:05:10,880 Je vais donc installer Redux avec npm install --save redux et aussi React Redux et j'installerai également Redux Thunk afin 62 00:05:10,880 --> 00:05:13,660 que nous puissions également l'utiliser. 63 00:05:13,670 --> 00:05:19,170 Pour l'instant, je n'en ai pas besoin car je ne parle pas à un serveur, mais plus tard, une 64 00:05:19,170 --> 00:05:24,230 fois que nous aurons ajouté des fonctionnalités de périphérique natif, vous verrez que nous avons également obtenu des 65 00:05:24,230 --> 00:05:29,750 fonctionnalités asynchrones et où nous pourrions vouloir attendre leur fin avant nous envoyons en fait une action qui est exactement 66 00:05:29,750 --> 00:05:34,470 là où Redux Thunk peut nous aider. Donc, avec ces trois packages installés, nous pouvons maintenant configurer Redux.