Por lo tanto, analizamos detalladamente las dimensiones, las orientaciones y la representación de diferentes estilos y diseños según el ancho
y la altura disponibles y también cómo reaccionar a los cambios en el ancho y la altura cuando
gira el dispositivo, por ejemplo, cosas muy importantes.
Veamos ahora cómo puedes renderizar diferentes estilos o diseños o lo que quieras en función de la
plataforma en la que te estás ejecutando.
En este momento tenemos básicamente una aplicación idéntica en iOS y Android con una excepción y ese es
nuestro botón aquí.
Los botones se ven diferentes porque el componente del botón que estamos usando es un componente integrado en React Native
y es uno de los muy raros, en realidad el único componente que ofrece React Native que se ajusta automáticamente en función de la plataforma en
la que se está ejecutando su aplicación, ningún otro El componente
realmente hace eso, pero por supuesto, puede escribir código para ajustar sus estilos, la lógica de diseño, lo que quiera en función de la
plataforma en la que se está ejecutando. Para ver un ejemplo, vamos a nuestro
componente de encabezado y allí, trabajemos en la forma
en que presentamos este encabezado. En Android podríamos tener este
color de fondo y luego texto delante de él, en iOS podríamos querer tener
un color de fondo blanco y solo tener un borde delgado en la parte inferior y en su lugar tener
el texto en nuestro color primario, eso
sería un El aspecto más típico de iOS después de todo.
Ahora, para saber en qué plataforma está ejecutando, React Native lo tiene cubierto, tiene el objeto de plataforma donde
las dimensiones lo ayudan a descubrir las dimensiones del dispositivo en el que se está ejecutando, la
plataforma lo ayuda a descubrir la plataforma del dispositivo estas corriendo
Entonces, ahora, en los estilos que estaba creando, podríamos
renderizar un color de fondo diferente en función de eso.
Podemos usar la plataforma y ahora allí, tiene un par de propiedades que
puede usar y, por ejemplo, tiene la propiedad del sistema operativo y el sistema operativo es básicamente el sistema operativo y es uno
de los valores
que está viendo aquí, lo más importante iOS o Android.
Entonces, aquí podemos verificar si eso es igual a, digamos, Android y, en este caso, configuro mi color
de fondo en colores
primarios, pero si no es Android y, por lo tanto, si es iOS, configuro esto para decir blanco.
Ahora, si hacemos eso y guardamos esto, vemos un encabezado blanco aquí en el dispositivo iOS y un encabezado de color
en el dispositivo Android.
Ahora, por supuesto, no necesita configurar ningún oyente en la plataforma y tampoco ofrece dicha funcionalidad porque la
plataforma no puede cambiar mientras la aplicación se está ejecutando, es el mismo sistema operativo
todo el tiempo, por supuesto.
Ahora terminemos el estilo para iOS.
Dije que quiero tener un borde delgado en la parte inferior, para que podamos agregar
un color de borde inferior y verificar la plataforma y si el sistema operativo es igual a iOS, entonces
quiero establecer el color del borde inferior para decir esto grisáceo color, de lo
contrario lo enviaré a blanco o transparente para que no podamos verlo en Android y agregue un borde inferior
con digamos y allí también hacemos esa verificación para iOS de digamos un píxel en iOS y cero en Android.
Así que ahora no deberíamos ver nada en Android, pero tenemos ese borde delgado aquí en iOS.
Por último, pero no menos importante, coloreemos el texto yendo al texto del título aquí y el texto del título de hecho se fusiona en cualquier estilo que establezcamos en
el accesorio de estilo, por lo que aquí en el
texto del título, podemos agregar un accesorio de estilo y señalar estilos. título aquí o lo que quiera nombrarlo
y agregue un objeto de estilo de título aquí en nuestra hoja de estilo donde establecemos
el color que es el color del texto también basado en la plataforma.
Si eso es iOS, digamos que configuramos esto en colores. primario y de lo contrario, configurémoslo en blanco, antes
era
negro, ahora configurémoslo en blanco.
Ahora tenemos un título en blanco aquí en Android pero un título en color aquí en iOS y así de fácil puede configurar diferentes
estilos según la plataforma en la que se está ejecutando, como
puede ver.