Donc, de retour dans le code, nous avons commencé par ajouter quelques vues ici et bien sûr, cela ne fonctionnera
pas, cela cassera ou ne rendra rien de significatif à l'écran. Dans cette première vue imbriquée ici, dans ce bloc,
je suis
allé avoir une entrée de texte et un bouton. Idéalement, les deux sont fournis par React Native, nous avons une entrée
de texte ici et nous avons également un composant bouton. Nous pouvons donc importer à la fois la saisie de texte
qui permet à l'utilisateur de saisir du texte et un bouton, puis ici dans cette vue, dans cette première vue imbriquée, je
vais ajouter une saisie de texte en tant que balise à fermeture automatique car il n'y a rien que nous puissions passer entre l'ouverture et en fermant
les balises et pour le
bouton, vous pourriez penser que vous utilisez un bouton comme celui-ci, mais en fait, ce n'est pas ainsi
que
ce bouton React Native fonctionne, il s'agit plutôt d'un bouton à fermeture automatique et vous définissez une propriété title pour définir
le texte à y rendre et ici, on pourrait dire ajouter. Maintenant, nous avons une entrée de texte et un
bouton là-bas et si nous enregistrons ceci et cela se recharge, nous voyons le bouton ici mais nous ne voyons pas l'entrée de texte, non?
Donc, cela ne fonctionne pas comme prévu.
La raison en est que la saisie de texte sera masquée ici sous la barre d'état.
C'est maintenant le moment où nous devrions commencer à ajouter une mise en page, une structure
à cette page, car l'ajout de
composants seuls ne fera pas l'affaire, une application React Native consiste à utiliser des composants, puis
à ajouter la bonne mise en page, la bonne structure à vos composants. Donc ici, par exemple, il serait logique d'ajouter un rembourrage général autour de cette vue, donc
sur cette vue de dessus, donc le rembourrage est essentiellement à une certaine distance de la bordure de cette vue qui est
essentiellement le cadre de l'appareil dans notre cas
ici, car je suis en parlant de la vue du haut au contenu de la vue, donc un certain espacement entre les
bordures du haut, de cette vue environnante et du contenu de la vue et pour cela, nous pouvons ajouter la propriété
de style ici sur la vue.
La plupart des composants de React Native prennent en charge la propriété style, la vue le fait et là, vous utilisez
cette liaison de contenu dynamique ici que vous connaissez également dans React normal avec les accolades simples
et le style attend un objet Javascript maintenant. Nous ajoutons donc une autre paire d'accolades ici et maintenant
une erreur courante est que vous pensez que c'est une syntaxe spéciale qui
nécessite des accolades doubles, en effet c'est la syntaxe React normale avec des accolades pareillement bouclées où alors la valeur
dynamique que vous passez au style se trouve être un objet
Javascript, nous avons donc une autre paire d'accolades. Et dans cet objet, vous pouvez maintenant avoir
des paires clé-valeur où les clés sont vos noms de propriété de style et les valeurs sont les valeurs de ces
propriétés de style et ces noms de propriété de style sont influencés par CSS.
Donc, ici, ce que vous pouvez faire, c'est que vous pouvez ajouter un remplissage, qui existe également dans React Native et
une liste complète des propriétés de style prises en charge peut toujours être trouvée en accédant au composant que
vous utilisez, comme la vue ici, puis en cliquant sur sur la propriété de style et ici, si vous cliquez sur les
styles de vue, vous verrez une liste de toutes les propriétés fournies que vous pouvez utiliser et vous verrez quelques propriétés spéciales pour
la vue ici, puis quelques accessoires généraux comme les accessoires de mise en page et là, vous trouveriez le rembourrage par exemple.
C'est ainsi que vous pouvez découvrir ce qui est pris en charge, mais vous verrez également de nombreux exemples tout au long de ce cours.
Donc, ici, j'ajoute un remplissage et la valeur peut maintenant être simplement un nombre qui sera des pixels indépendants de l'appareil,
donc une valeur de pixel qui semble toujours bonne quelle que soit la taille de l'appareil que vous avez.
Donc ici, nous pourrions ajouter 10 et si nous le faisons, maintenant nous voyons que le bouton est un
peu plus bas, peut-être ajoutons 30 ici afin que nous puissions voir une plus grande différence
et maintenant cela fonctionne et maintenant si vous appuyez au-dessus du bouton, vous ne
voyez pas vraiment une entrée ici mais vous voyez que mon clavier virtuel s'est ouvert sur Android, sur
iOS il ne s'ouvre pas par défaut mais là
aussi vous pouvez taper ici et si vous deviez taper assez souvent ou si vous allez à matériel, ce clavier à bascule clavier logiciel, il
devrait également s'ouvrir là-bas, donc ici nous
avons également une entrée.
Alors maintenant, nous pouvons voir cette entrée parce que maintenant elle n'est plus derrière cette barre d'état.
Donc, l'ajout de ce rembourrage était probablement logique, car maintenant, nous nous sommes assurés que notre disposition est à l'intérieur
de notre écran ici.
Maintenant, il existe d'autres outils pour s'assurer que nous avons suffisamment de
remplissage ici, mais pour l'instant, définissons manuellement le remplissage et définissons-le peut-être à une valeur de 30.
Nous commençions donc avec la mise en page, maintenant
revenons à ce composant et assurons-nous que nous pouvons voir quelque chose, nous pouvons
voir qu'il y a une entrée de texte et nous n'avons pas seulement à le deviner.
Pour cela, nous pouvons aller à la saisie de texte et y ajouter par exemple l'accessoire d'espace réservé et
comme pour découvrir ce que vous
pouvez définir, vous pouvez toujours aller aux documents officiels, dans ce cas aux documents de saisie de texte et là, vous trouverez une description de son
utilisation et quelques exemples mais si vous
faites défiler vers le bas, vous trouverez également tous les accessoires que vous pouvez définir et là par exemple, vous
découvrez que vous pouvez définir un accessoire d'espace réservé, qui est ce texte factice qui s'affiche avant que l'utilisateur
n'entre du texte.
Donc ici, cela prend une chaîne et ici, nous pourrions entrer l'objectif de cours parce que vous devriez pouvoir définir votre
objectif de cours ici
et si vous le faites, vous voyez à la fois sur Android et sur
iOS il y a ce texte d'objectif de cours.
Maintenant encore, cela pourrait être un peu
mieux, pourrait être un peu plus clair qu'il y a une entrée de texte et donc ici, je vais
ajouter un
style, un autre style en ligne et ici je vais configurer la couleur du bas de la bordure en noir, noir maintenant est une chaîne, ces raccourcis
de couleur sont pris en charge dans React Native et une liste complète de toutes les couleurs disponibles est
jointe à cette conférence ici et je peux également voir qu'une largeur de bordure inférieure de disons 1 et ce que cela signifie, cela
devrait définir un fond frontière sur cette entrée de sorte que maintenant si nous revenons en arrière, nous avons ce
soulignement ici, nous pouvons le voir clairement sur iOS et comme il n'y a toujours pas beaucoup d'espace sur iOS,
permettez-moi d'augmenter ce rembourrage ici à 50 peut-être, oui ça a l'air mieux.
Alors maintenant, nous avons cette frontière en dessous de notre entrée et cela montre clairement qu'il y a une entrée ici.
Bien sûr, vous n'êtes pas limité à définir uniquement une bordure en
bas, vous pouvez également définir une bordure
générale en omettant le bas ici, une couleur et une largeur
de bordure et si vous le faisiez, cela serait entouré d'un frontière.
Maintenant, une note importante concernant ces noms de style ici, les noms des propriétés de style, vous voyez bien sûr que
c'est la largeur de la bordure, la couleur de la bordure écrite comme ceci, en CSS normal, vous auriez eu la couleur de la bordure
et cela appliquerait la couleur de la bordure mais cela être un nom de propriété non valide en Javascript, c'est pourquoi cela
n'est pas pris en charge.
Maintenant, en fait, un nom de propriété valide en Javascript serait si vous enveloppez cela entre guillemets, mais
même cela n'est pas pris en charge dans React Native, donc ces syntaxes alternatives, par exemple cette syntaxe fonctionneraient en Javascript si
vous appliquez un style à l'élément HTML Web , ces syntaxes ne sont pas prises en charge dans React Native cependant, vous devez vraiment utiliser cette
syntaxe de cas de chameau où vous écrivez par exemple la couleur de la bordure comme ceci
ou en bref, vous devez utiliser les noms de propriété que vous trouvez également dans les documents officiels, là il n'y
a pas d'autres noms pour ces propriétés de style et nous pourrions maintenant ajouter ici un remplissage de disons 10 afin que nous ayons
un certain espacement entre la bordure et la partie réelle où nous entrons quelque chose et je dirais que cela
semble déjà bien mieux et nous peut clairement voir que nous avons ici une entrée où les utilisateurs peuvent
entrer quelque chose.