Donc, dans un nouvel écran de lieu, je veux pouvoir ajouter un lieu et pour cela, je vais
tout d'abord ajouter le composant de saisie de texte qui n'a bien sûr rien à voir avec les fonctionnalités des
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
titre et donc, je vais également ajouter un composant de texte ici où je dis le titre, qui devrait
agir comme une
é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
pas quel appareil l'utilisateur va utiliser, mais nous ajouterons plus qu'un simple titre, nous ajouterons également un sélecteur
d'image et un sélecteur de lieu tout au long ce module et donc pouvoir faire défiler cette page est vraiment important.
Nous avons donc maintenant cette étiquette de titre et l'entrée de texte qui lui appartient qui pour l'instant ne
feront rien mais qui permettront bientôt à l'utilisateur d'entrer un titre.
Je veux aussi m'assurer que bien sûr ce formulaire peut être soumis, donc
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
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
importez les couleurs constantes ici et onPress soumettra plus tard ce formulaire,
pour le moment je ne fais rien ici.
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
besoin de changer le type de clavier et ainsi de suite, mais un certain style serait bien et c'est en fait
vrai pour toute la page.
Donc pour cette vue ici par exemple, je veux ajouter un style de formulaire ici, donc un identifiant de style de formulaire afin
que je puisse styliser le formulaire global. Pour le titre
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
de saisie de texte ici. Avec cela, descendons à la feuille de
style et assurez-vous d'ajouter un peu de style ici. Pour la forme globale, je vais ajouter une
marge dans toutes les directions de 30 afin qu'elle ne repose pas directement sur les bords de l'écran.
Pour l'étiquette, je
veux définir une taille de police de disons 18 et ajouter également une marge au bas de 15 afin que nous ayons un
certain espacement entre l'étiquette et la saisie de texte et sur la saisie
de texte elle-même, bien pour être en mesure de le voir, je vais ajouter un bas de bordure et définir
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
une marge à son bas, donc au contenu en dessous, le bouton en ce moment de 15 et ce
que j'ajouterai également ici est un peu de rembourrage vertical, juste quatre et un peu
de rembourrage horizontal, juste deux. Si je garde ça, jetons un œil.
Si je vais à l'écran des nouveaux endroits, c'est ce que j'ai et cela ne
semble pas trop minable, également sur Android, c'est quelque chose avec lequel je peux travailler et je peux construire.
Maintenant, bien sûr, cette entrée ne fait rien,
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
quelque chose comme ça, au lieu
de cela je capturerai juste la valeur et c'est tout. Vous pouvez bien sûr ajouter de la validation, vous pouvez
ajouter un
réducteur comme nous l'avons fait dans le module de saisie utilisateur où vous avez appris comment
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
hook d'état de React ici pour que je puisse capturer mes valeurs ici.
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
chaîne vide et je vais ensuite ajouter une fonction ici, le
gestionnaire de changement de titre, qui reçoit le texte que l'utilisateur a entré et où l Je vais ensuite définir
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
ferai pas.
C'est le gestionnaire de changement de titre qui devrait maintenant être lié à l'accessoire de changement de texte ici, sur la saisie de
texte, donc
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
titre car c'est là que je stocke l'entrée utilisateur et avec
cela nous avons une entrée utilisateur entièrement fonctionnelle ici où je capture également les valeurs. Maintenant, avec cela, nous pouvons obtenir le
titre, nous avons également une
place de réserve.
Chaque fois que nous appuyons sur ce
bouton, je veux l'enregistrer donc j'aurai mon gestionnaire de sauvegarde qui est une fonction que je veux lier à
ce bouton de
sauvegarde, alors ici au lieu d'avoir cette fonction anonyme vide, je pointerai sur save placez le gestionnaire sur ce bouton
de sauvegarde et là-dedans, je veux maintenant m'assurer que cet endroit est bien enregistré et
pour cela, je vais à nouveau utiliser Redux.
Je vais donc installer Redux avec npm install --save redux et aussi React Redux et j'installerai également Redux Thunk afin
que nous puissions également l'utiliser.
Pour l'instant, je n'en ai pas besoin car je ne parle pas à un serveur, mais plus tard, une
fois que nous aurons ajouté des fonctionnalités de périphérique natif, vous verrez que nous avons également obtenu des
fonctionnalités asynchrones et où nous pourrions vouloir attendre leur fin avant nous envoyons en fait une action qui est exactement
là où Redux Thunk peut nous aider. Donc, avec ces trois packages installés, nous pouvons maintenant configurer Redux.