Les styles en ligne sont très faciles à appliquer, mais leur inconvénient est que plus votre application
est complexe et votre configuration devient complexe, plus votre composant est difficile à suivre avec tous ces styles en ligne.
Vous aurez beaucoup de code là-haut, dans votre code jsx et il peut être difficile de le lire, de
le comprendre.
Par conséquent, même si vous pouvez utiliser des styles en ligne,
il est en fait recommandé d'utiliser un objet de feuille de style et c'est exactement ce qui
est créé là-bas.
Cela utilise une feuille de style qui est une classe à la fin fournie par React
Native, c'est pourquoi nous l'importons à partir de là et cela crée à la fin un objet Javascript qui contient toute votre configuration de style.
La différence avec un objet Javascript vanille que vous pouvez également créer vous-même
comme celui-ci est simplement cette feuille de style. create pourrait à l'avenir également appliquer certaines optimisations de performances et appliquer vos
styles plus efficacement à la fin.
Par conséquent, vous devez l'utiliser car vous ne perdez rien, mais à l'avenir,
vous pourriez bénéficier d'optimisations supplémentaires. En ce moment, quand j'enregistre cela, il n'y a pas
de différence, mais encore une fois, vous devez utiliser la feuille de style. créer car cela ne fera pas de mal et vous pourrez
obtenir des optimisations de performances supplémentaires à l'avenir. Un autre avantage de l'utilisation de la feuille
de style est que cela ajoutera automatiquement une certaine validation, ce qui signifie que si vous utilisez une propriété de style incorrecte ou
une valeur incorrecte, React Native le détectera et générera une erreur qui vous permettra simplement de la repérer plus facilement. de
telles erreurs, s'il n'y avait pas
de validation, cela échouerait silencieusement, cela n'appliquerait tout simplement pas le style et vous pourriez
même ne pas le voir instantanément ou vous verrez que le style n'est pas correct mais vous ne voyez pas vraiment pourquoi
cela ne fonctionne pas, donc cette validation intégrée est un autre
avantage de l'utilisation de cet objet de feuille de style ici. Pour créer, vous passez un objet Javascript comme argument, donc
l'argument que vous passez ici est un objet
Javascript et dans cet objet, vous pouvez maintenant définir vos styles et vous ne le
faites pas en ajoutant un remplissage 10 car il serait difficile de savoir où cela devrait être appliqué,
à la
place, vous utilisez n'importe quel nom de propriété de votre choix, comme par exemple écran, pour configurer le style de notre vue d'écran
globale, donc pour ce
niveau supérieur de vous ici et vous auriez pu choisir le nom que vous
voulez ici, ce n'a pas besoin d'être un écran. Ici, vous avez maintenant un objet
Javascript imbriqué, donc la valeur de cette propriété est un autre
objet Javascript et là, vous configurez le remplissage 50
par exemple, donc le style que nous avions là-haut aussi.
Maintenant, nous pouvons supprimer ce style ici, j'ai toujours
la propriété style mais je n'ai plus l'objet de style en ligne et à la place ici, je pointe
maintenant sur les styles qui est cette constante qui contient notre objet de feuille de style, je pointe sur les styles, puis
avec point, je pointe vers le style d'écran et c'est ce que je voulais dire, vous pouvez choisir n'importe quel nom que
vous voulez ici, si vous
auriez nommé cette racine, alors il vous suffirait d'utiliser root là-haut. Ainsi, vous pouvez utiliser n'importe quel nom que vous
voulez, vous
devez simplement vous assurer que les noms que vous utilisez là-bas correspondent aux noms que vous
utilisez ici et indique maintenant à React Native que cette vue devrait obtenir les styles définis pour l'écran là-bas.
Vous pouvez faire de même pour notre conteneur d'entrée, disons,
encore une fois, ce nom dépend entièrement de vous, conteneur d'entrée. Ici, je prendrai cet
objet de style que j'ai appliqué
en tant que style en ligne à cette vue auparavant et je l'ai appliqué comme valeur pour ce conteneur d'entrée.
Maintenant, sur cette vue, nous référençons les styles. inputContainer, maintenant avec une mise en forme
automatique que vous pouvez d'ailleurs faire dans Visual Studio Code en allant dans les préférences, les raccourcis
clavier et ensuite rechercher le format du document, c'est le raccourci que vous souhaitez appuyer pour
que les formats automatiques des documents, le fichier. Avec cela, nous avons une structure de code propre ici,
NOUS voyons que ce sont nos styles de conteneurs d'entrée et nous les appliquons ici.
Un autre avantage d'avoir cet objet de feuille de style est également QUE vous pouvez appliquer le même style à
plusieurs vues sans le copier.
Donc, si nous voulons avoir le style du conteneur d'entrée, non seulement sur cette vue mais aussi
sur celle-ci, nous pourrions simplement écrire des styles de style. inputContainer, vous pouvez appliquer ce style à autant de composants que
vous le souhaitez.
Bien sûr, je n'en ai pas besoin ici, mais nous pourrions l'utiliser ici si nous en avions besoin. Maintenant, le dernier style que je veux appliquer est
sur la saisie de texte ici.
Là, je vais juste nommer cette entrée, trop d'accolades, configurer mes styles ici puis
sur la saisie de texte, se référer aux styles. entrée, comme
ça. Et avec cela, si nous enregistrons cela,
nous avons le même aspect qu'auparavant, mais maintenant nous utilisons l'objet de feuille de style qui facilite le partage
et la réutilisation des styles et qui peut également nous donner quelques optimisations de
performances futures et en plus, notre code jsx ici simplement est beaucoup plus maigre maintenant.