Il y a quelques choses où nous
pourrions continuer, mais je veux continuer avec le conteneur d'entrée, qui est le conteneur autour
de ces entrées, donc autour du texte de sélection d'un nombre, autour du texte saisi ici et autour des boutons et ce
conteneur a un largeur et il aligne les éléments mais comme je l'ai
décrit plus tôt, ce serait bien d'avoir cette carte pour
y regarder et pour cela, nous avons besoin de styles plus exotiques qui semblent vraiment fantaisistes mais simplement de
quelques règles de style que nous n'avons pas utilisées auparavant.
Par exemple, je veux ajouter une ombre, une légère ombre
portée et vous le faites avec quatre propriétés principales que vous pouvez utiliser. Une couleur, un décalage, une opacité et un rayon.
Maintenant, une couleur d'ombre doit être claire, c'est la couleur de votre ombre.
Le décalage de l'ombre est le décalage par rapport à votre conteneur
et cela prend réellement l'objet qui à son tour prend une largeur et une hauteur,
vous pouvez donc dire que je veux compenser l'ombre de deux pixels par rapport à la largeur et de
deux pixels par rapport à la hauteur , qui influence l'effet tridimensionnel que vous créez. L'opacité décrit la transparence de cette ombre, si vous définissez l'opacité
sur 1, vous avez
alors une ombre totalement transparente, donc une ombre forte très visible et si vous augmentez ou diminuez ce que je
devrais dire, si vous la définissez sur 0. 1 par exemple, vous avez
une ombre que vous pouvez à peine voir. Le rayon de l'ombre décrit ensuite la netteté de cette ombre,
si
elle a des bords rugueux ou si elle est un peu plus floue, plus douce, des choses comme ça.
Donc ici, je vais utiliser une couleur d'ombre noire, en passant, vous pouvez également utiliser des codes hexadécimaux
ici si vous le souhaitez et vous pouvez également utiliser des codes RGBA si vous préférez, soit des codes RVB normaux en fait, soit également
avec un alpha canal pour décrire la transparence ici. Bien que la transparence ici n'aura pas d'influence directe,
pour l'ombre, vous devrez la définir avec l'opacité de l'ombre. Pour les autres couleurs, cela aurait une influence
mais ce n'est qu'une note secondaire. Ci-joint, vous trouverez un lien avec plus de détails
sur la façon dont vous pouvez configurer les couleurs et les valeurs de couleur acceptées par React Native, car évidemment, c'est
beaucoup plus exhaustif que ce que je peux montrer ici, je vais simplement choisir le nom parce que je
veux un noir couleur, alors pourquoi ne pas opter pour ce raccourci? Maintenant, outre la couleur, l'ombre ici recevra également un décalage
et, comme je l'ai dit, le décalage prend ici un objet.
Maintenant, au cas où vous vous demanderiez comment je le sais, pour celui que mon IDE me dit, si je commence à taper le décalage
d'ombre ici, vous voyez cet indice que je reçois à droite, vous devriez normalement l'obtenir également, mais au cas
où vous ne le feriez pas obtenez ceci, les documents officiels sont bien sûr l'endroit où aller et là, toujours sous les guides,
les composants et les API, vous pouvez cliquer sur le composant de vue là-bas ou simplement cliquer sur les documents d'API ici
dans le coin supérieur droit puis choisir votre vue ici et là, vous trouverez un accessoire de style, puis vous pouvez trouver une liste de tous les styles de vue qui
sont pris en charge et bien sûr aussi comment vous les configurez et là par exemple, vous avez appris que le décalage
d'ombre est un objet avec un nombre et une hauteur. Pour la couleur, vous avez appris que cela prend une
couleur et c'est exactement le lien que vous trouvez ci-joint, où il décrit le type
de couleurs que vous pouvez utiliser.
Voilà donc juste une petite note latérale, ici je vais utiliser un décalage d'ombre avec une largeur de zéro
mais une hauteur de 2 afin que mon ombre soit décalée un peu vers le bas pour ainsi dire, pas tellement vers la
droite, donc pas du tout à droite en fait et j'ajouterai ensuite un rayon d'ombre qui est un certain nombre d'essayons six et
voyons ce que cela
fait et enfin et surtout, une opacité d'ombre de 0. 26 qui est relativement transparent mais qui me
semble plutôt sympa.
De plus, je donnerai à mon conteneur d'entrée une couleur d'arrière-plan blanche pour m'assurer qu'il est toujours blanc et non transparent,
ce qui est sinon la valeur par défaut, de sorte que si nous aurions
une autre couleur d'arrière-plan derrière le conteneur, disons comme couleur de base de l'écran entier, le conteneur
ici aurait toujours un fond blanc.
Maintenant, avec cela, si vous enregistrez cela, vous devriez voir une ombre qui ressemble à ceci
sur iOS mais vous ne voyez aucune ombre sur Android et ce
n'est pas un bug, mais les propriétés de l'ombre ici ne fonctionnent que sur iOS et cela laisse une importante question, comment pouvez-vous
définir une ombre sur Android alors? N'est-ce pas possible?
C'est là que vous avez un accessoire de style spécial, l'accessoire d'élévation. Cela ne fonctionne que sur Android comme l'info-bulle montre également
ici, la plate-forme Android tandis que les propriétés de l'ombre ne fonctionnent que sur iOS. Maintenant, l'élévation prend simplement un certain nombre de disons 5, puis
utilise l'élévation de conception de matériau Android par défaut, vous avez donc moins de contrôle, mais d'autre part,
vous obtenez l'apparence de conception de matériau par défaut à laquelle vos utilisateurs pourraient
être habitués de toute façon, c'est donc la bonne chose à ce sujet et maintenant nous
avons également une ombre ici sur Android et iOS. Sur iOS, vous remarquerez également que l'ombre est également visible à
gauche et à droite de la boîte, même si je lui ai donné un décalage d'ombre de 0 pour la largeur,
qui peut cependant être contrôlé avec le rayon d'ombre, si vous définissez l'ombre rayon à zéro, alors vous
voyez que vous n'avez que l'ombre où vous avez défini son décalage ici, vous pouvez donc vous assurer
que l'ombre n'est vraiment là où vous le souhaitez. Si vous définissez un rayon d'ombre cependant et par défaut, il
y a aussi un rayon d'ombre par défaut, vous obtenez cet effet de déversement qui est une ombre
plus naturelle après tout, donc ici c'est en fait l'effet que je veux. Maintenant, avec cela, j'ai ajouté une ombre à la fois sur Android
en utilisant l'ombre Android par défaut et sur iOS. Soit dit en passant sur Android, vous pouvez bien
sûr modifier le niveau d'élévation pour jouer avec différents niveaux d'élévation jusqu'à ce que vous ayez l'apparence que vous souhaitez pour
votre application, vous avez suffisamment d'ombre en gros. Maintenant, en plus d'avoir l'ombre ici, je
pense que ce serait bien d'avoir un peu de rembourrage dans cette boîte maintenant parce que les articles sont
trop près des bords, ils sont assis directement sur les bords après tout. Donc, pour changer cela, je vais également ajouter un peu de rembourrage
ici et ce sera un rembourrage de 20 et encore, c'est une valeur que vous pouvez expérimenter, trouver
le rembourrage que vous préférez personnellement et vous pensez que cela semble bon et si nous essayons cela, maintenant cela semble beaucoup mieux.
De plus, les coins arrondis
seraient une bonne chose, donc j'ajouterai ici un rayon de bordure de disons 10 pour avoir des bordures légèrement arrondies.
Si nous enregistrons maintenant cela, cela me semble assez agréable sur les deux plates-formes, sur les deux appareils.
Donc, c'est maintenant le conteneur d'entrée,
nous ne pouvons pas voir l'entrée et les boutons devraient probablement avoir la même taille
également, mais au moins, le conteneur semble maintenant bien.