1 00:00:02,230 --> 00:00:08,380 Por lo tanto, analizamos detalladamente las dimensiones, las orientaciones y la representación de diferentes estilos y diseños según el ancho 2 00:00:08,380 --> 00:00:14,030 y la altura disponibles y también cómo reaccionar a los cambios en el ancho y la altura cuando 3 00:00:14,080 --> 00:00:17,010 gira el dispositivo, por ejemplo, cosas muy importantes. 4 00:00:17,680 --> 00:00:22,900 Veamos ahora cómo puedes renderizar diferentes estilos o diseños o lo que quieras en función de la 5 00:00:23,080 --> 00:00:25,660 plataforma en la que te estás ejecutando. 6 00:00:25,660 --> 00:00:31,120 En este momento tenemos básicamente una aplicación idéntica en iOS y Android con una excepción y ese es 7 00:00:31,120 --> 00:00:32,240 nuestro botón aquí. 8 00:00:32,320 --> 00:00:38,320 Los botones se ven diferentes porque el componente del botón que estamos usando es un componente integrado en React Native 9 00:00:38,320 --> 00:00:46,060 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 10 00:00:46,060 --> 00:00:49,310 la que se está ejecutando su aplicación, ningún otro El componente 11 00:00:49,390 --> 00:00:56,290 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 12 00:00:56,320 --> 00:01:01,000 plataforma en la que se está ejecutando. Para ver un ejemplo, vamos a nuestro 13 00:01:01,000 --> 00:01:04,170 componente de encabezado y allí, trabajemos en la forma 14 00:01:04,180 --> 00:01:08,020 en que presentamos este encabezado. En Android podríamos tener este 15 00:01:08,020 --> 00:01:12,810 color de fondo y luego texto delante de él, en iOS podríamos querer tener 16 00:01:12,820 --> 00:01:19,240 un color de fondo blanco y solo tener un borde delgado en la parte inferior y en su lugar tener 17 00:01:19,240 --> 00:01:21,750 el texto en nuestro color primario, eso 18 00:01:21,760 --> 00:01:25,270 sería un El aspecto más típico de iOS después de todo. 19 00:01:25,360 --> 00:01:31,810 Ahora, para saber en qué plataforma está ejecutando, React Native lo tiene cubierto, tiene el objeto de plataforma donde 20 00:01:32,110 --> 00:01:37,630 las dimensiones lo ayudan a descubrir las dimensiones del dispositivo en el que se está ejecutando, la 21 00:01:37,630 --> 00:01:41,750 plataforma lo ayuda a descubrir la plataforma del dispositivo estas corriendo 22 00:01:41,910 --> 00:01:45,270 Entonces, ahora, en los estilos que estaba creando, podríamos 23 00:01:45,270 --> 00:01:48,660 renderizar un color de fondo diferente en función de eso. 24 00:01:48,810 --> 00:01:53,310 Podemos usar la plataforma y ahora allí, tiene un par de propiedades que 25 00:01:53,310 --> 00:02:01,170 puede usar y, por ejemplo, tiene la propiedad del sistema operativo y el sistema operativo es básicamente el sistema operativo y es uno 26 00:02:01,170 --> 00:02:02,220 de los valores 27 00:02:02,220 --> 00:02:05,670 que está viendo aquí, lo más importante iOS o Android. 28 00:02:05,700 --> 00:02:12,000 Entonces, aquí podemos verificar si eso es igual a, digamos, Android y, en este caso, configuro mi color 29 00:02:12,000 --> 00:02:13,570 de fondo en colores 30 00:02:13,770 --> 00:02:20,130 primarios, pero si no es Android y, por lo tanto, si es iOS, configuro esto para decir blanco. 31 00:02:20,130 --> 00:02:28,800 Ahora, si hacemos eso y guardamos esto, vemos un encabezado blanco aquí en el dispositivo iOS y un encabezado de color 32 00:02:28,980 --> 00:02:31,090 en el dispositivo Android. 33 00:02:31,260 --> 00:02:36,960 Ahora, por supuesto, no necesita configurar ningún oyente en la plataforma y tampoco ofrece dicha funcionalidad porque la 34 00:02:37,140 --> 00:02:42,090 plataforma no puede cambiar mientras la aplicación se está ejecutando, es el mismo sistema operativo 35 00:02:42,090 --> 00:02:43,800 todo el tiempo, por supuesto. 36 00:02:43,830 --> 00:02:46,240 Ahora terminemos el estilo para iOS. 37 00:02:46,650 --> 00:02:53,340 Dije que quiero tener un borde delgado en la parte inferior, para que podamos agregar 38 00:02:53,340 --> 00:03:01,410 un color de borde inferior y verificar la plataforma y si el sistema operativo es igual a iOS, entonces 39 00:03:01,410 --> 00:03:07,950 quiero establecer el color del borde inferior para decir esto grisáceo color, de lo 40 00:03:07,980 --> 00:03:16,350 contrario lo enviaré a blanco o transparente para que no podamos verlo en Android y agregue un borde inferior 41 00:03:16,770 --> 00:03:25,590 con digamos y allí también hacemos esa verificación para iOS de digamos un píxel en iOS y cero en Android. 42 00:03:25,590 --> 00:03:31,410 Así que ahora no deberíamos ver nada en Android, pero tenemos ese borde delgado aquí en iOS. 43 00:03:31,530 --> 00:03:39,530 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 44 00:03:39,590 --> 00:03:42,400 el accesorio de estilo, por lo que aquí en el 45 00:03:42,770 --> 00:03:48,950 texto del título, podemos agregar un accesorio de estilo y señalar estilos. título aquí o lo que quiera nombrarlo 46 00:03:48,960 --> 00:03:55,440 y agregue un objeto de estilo de título aquí en nuestra hoja de estilo donde establecemos 47 00:03:55,860 --> 00:04:01,380 el color que es el color del texto también basado en la plataforma. 48 00:04:01,770 --> 00:04:08,970 Si eso es iOS, digamos que configuramos esto en colores. primario y de lo contrario, configurémoslo en blanco, antes 49 00:04:08,970 --> 00:04:09,830 era 50 00:04:09,840 --> 00:04:11,700 negro, ahora configurémoslo en blanco. 51 00:04:11,700 --> 00:04:18,990 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 52 00:04:18,990 --> 00:04:22,600 estilos según la plataforma en la que se está ejecutando, como 53 00:04:22,620 --> 00:04:23,400 puede ver.