Los estilos en línea son muy fáciles de aplicar, pero su desventaja es que cuanto más compleja se vuelve
tu aplicación y se vuelve tu configuración, tu componente se vuelve más difícil de seguir junto con todos estos estilos en línea.
Tendrá un montón de código allí, en su código jsx y puede ser difícil de leer, de
entenderlo.
Por lo tanto, aunque puede usar estilos en línea, en
realidad se recomienda usar un objeto de hoja de estilo y eso es exactamente lo que se
está creando allí.
Esto usa una hoja de estilo que es una clase al final proporcionada por React
Native, por eso la importamos desde allí y esto al final crea un objeto Javascript que contiene toda la configuración de estilo.
La diferencia con un objeto Javascript vainilla que también podría crear por
su cuenta es simplemente esa hoja de estilo. create podría en el futuro también aplicar algunas optimizaciones de rendimiento y aplicar sus
estilos de manera más eficiente al final.
Por lo tanto, debe usar eso porque no pierde nada, pero en el futuro,
podría beneficiarse de optimizaciones adicionales. En este momento, cuando estoy grabando esto, sin embargo,
no hay diferencia, pero nuevamente debería usar la hoja de estilo. cree porque no hará daño y es posible que obtenga
optimizaciones de rendimiento adicionales en el futuro. Otra ventaja de usar la hoja de
estilo es que esto agregará automáticamente algo de validación, lo que significa que si está usando una propiedad de estilo incorrecta
o un valor incorrecto, React Native lo detectará y arrojará un error que simplemente hace que sea más fácil
detectarlo. tales errores, si no
hubiera validación, fallaría en silencio, simplemente no aplicaría el estilo y es posible que
ni siquiera lo vea al instante o verá que el estilo no es correcto pero realmente no ve por qué
no funciona, por lo tanto, esta validación incorporada es otra
ventaja de usar ese objeto de hoja de estilo aquí. Para crear, pasa un objeto Javascript como argumento, por
lo que el argumento que pasa aquí
es un objeto Javascript y en ese objeto, ahora puede definir sus estilos y
no lo hace agregando el relleno 10 porque no estaría claro dónde esto debe aplicarse, en su
lugar, utilice
cualquier nombre de propiedad de su elección, como por ejemplo pantalla, para configurar el estilo de nuestra vista de pantalla general, por
lo que para este
nivel superior de usted aquí y podría haber elegido el nombre que
desee aquí, esto No tiene que ser pantalla. Aquí, ahora tiene un objeto Javascript
anidado, por lo que el valor de esta propiedad es otro
objeto Javascript y allí, configura el relleno 50 por
ejemplo, por lo que el estilo que teníamos allí también.
Ahora podemos eliminar ese estilo aquí, todavía tengo la
propiedad de estilo pero ya no tengo el objeto de estilo en línea y en su lugar aquí,
ahora apunto a estilos, que es esta constante que contiene nuestro objeto de hoja de estilo, apunto a estilos y
luego con punto, señalo el estilo de pantalla y eso es lo que quise decir, puedes elegir el nombre que quieras
aquí, si hubieras nombrado
esta raíz, entonces solo tendrías que usar la raíz allí. Para que pueda usar el nombre que desee, solo
tiene que
asegurarse de que los nombres que usa allí coincidan con los nombres que usa aquí y ahora
solo le dice a React Native que esta vista debería tener los estilos definidos para la pantalla allí abajo.
Puede hacer lo mismo para nuestro contenedor de entrada,
digamos, nuevamente este nombre depende totalmente de usted, contenedor de entrada. Aquí tomaré este objeto
de estilo que apliqué como un
estilo en línea a esta vista antes y lo apliqué como mi valor para este contenedor de entrada.
Ahora aquí en esa vista, hacemos referencia a estilos. inputContainer, ahora con algo de
formato automático que puede hacer en Visual Studio Code yendo a preferencias, atajos de teclado
y luego buscar documento de formato, ese es el atajo que desea presionar para
que los documentos se autoformaten, el archivo. Con eso, tenemos una estructura de código limpia aquí, NOSOTROS
vemos que estos son nuestros estilos de contenedor de entrada y los aplicamos aquí.
Otra ventaja de tener este objeto de hoja de estilo es que también puede aplicar el mismo estilo
a múltiples vistas sin copiarlo.
Entonces, si queremos tener el estilo del contenedor de entrada, no solo en esta vista sino también en
esta de allí abajo, simplemente podríamos escribir estilos de estilo. inputContainer, puede aplicar este estilo a tantos componentes
como desee.
Ahora, por supuesto, no lo necesito aquí, pero podríamos usarlo aquí si lo necesitamos. Ahora el último estilo que quiero aplicar está
en la entrada de texto aquí.
Allí, solo nombraré esta entrada, demasiadas llaves, configure mis estilos aquí y
luego en la entrada de texto, consulte los estilos. entrada, así.
Y con eso, si guardamos esto, tenemos el mismo aspecto que antes, pero ahora estamos usando el objeto de hoja de estilo
que hace que compartir y reutilizar estilos sea más fácil y que posiblemente también nos
brinde algunas optimizaciones de rendimiento futuras y, además, nuestro código jsx aquí simplemente es mucho más delgado ahora.