1 00:00:02,330 --> 00:00:06,200 Ahora a veces puede ser engorroso agregar un montón de tales 2 00:00:06,200 --> 00:00:09,920 controles y aquí ya tenemos tres controles en el encabezado, 3 00:00:09,920 --> 00:00:14,070 por ejemplo, ciertamente algo que podemos agregar pero quizás no sea óptimo. 4 00:00:14,480 --> 00:00:22,970 En lugar de mantener nuestros objetos de estilo más limpios, podríamos configurar un encabezado base aquí, por 5 00:00:23,360 --> 00:00:37,110 ejemplo, base de encabezado y luego agregar headerIOS y headerAndroid y ahora lo que hacemos es tomar todos estos estilos que cambian según la plataforma fuera del estilo 6 00:00:37,110 --> 00:00:39,600 base, agréguelos aquí a headerIOS 7 00:00:39,860 --> 00:00:44,830 y headerAndroid y en headerIOS, solo mantenemos el aspecto 8 00:00:44,970 --> 00:00:51,020 de iOS aquí, tan blanco, luego este color para el borde en 9 00:00:56,160 --> 00:01:04,100 la parte inferior y un ancho de píxel de ese borde y aquí en Android, eliminamos 10 00:01:04,200 --> 00:01:13,200 esta marca y mantenemos el color primario como color de fondo y, por otro lado, eliminamos nuestro borde 11 00:01:13,200 --> 00:01:19,800 al usar estos valores o al eliminarlo por completo y no configurarlo en 12 00:01:19,800 --> 00:01:20,970 absoluto. 13 00:01:20,970 --> 00:01:28,590 Ahora solo necesitamos asegurarnos de agregar headerIOS o headerAndroid y para eso, podemos subir aquí y configurar nuestro 14 00:01:28,690 --> 00:01:35,050 objeto de estilos donde fusionamos todos nuestros estilos base de encabezado ahora, por lo 15 00:01:35,070 --> 00:01:45,500 que estos siempre están configurados pero ahora, además, puede fusionarse en el resultado de la selección de plataforma, que ahora es un método que 16 00:01:45,500 --> 00:01:54,770 toma un objeto donde tenemos que especificar una clave iOS y señalar el valor o, en este caso, el objeto que queremos 17 00:01:54,770 --> 00:02:02,270 usar si estamos en iOS, que son estilos. headerIOS y agregue una clave de Android y señale 18 00:02:02,270 --> 00:02:05,310 los estilos que headerAndroid y con 19 00:02:05,540 --> 00:02:12,380 eso le decimos a React Native, por favor, combine las propiedades del valor, en este caso, un 20 00:02:12,380 --> 00:02:15,680 objeto que estamos seleccionando para iOS y Android. 21 00:02:15,680 --> 00:02:21,410 Por lo tanto, siempre tendrá que pasar un objeto a la selección de plataforma y luego tendrá valores diferentes para 22 00:02:21,410 --> 00:02:26,390 iOS y Android y el valor aquí también podría ser un número, simplemente no funcionaría aquí porque 23 00:02:26,390 --> 00:02:32,350 aquí realmente esperamos un objeto para que podamos extraiga todos los pares de valores de propiedad y páselos a nuestro estilo circundante. 24 00:02:32,360 --> 00:02:37,310 Entonces, aquí un número no tiene sentido, pero puede usar select con cualquier tipo de valor, 25 00:02:37,370 --> 00:02:38,960 aquí solo necesitamos un 26 00:02:39,020 --> 00:02:45,410 objeto, por lo que apuntamos a los objetos headerIOS y headerAndroid. Y con eso, tenemos un código más ágil, tenemos estilos 27 00:02:45,680 --> 00:02:51,110 más ágiles allí y luego tenemos un código con un estilo base donde luego usamos select de plataforma 28 00:02:51,110 --> 00:02:57,230 para elegir dinámicamente diferentes estilos basados en la plataforma en la que estamos corriendo y, por lo tanto, ahora, Tenemos 29 00:02:57,230 --> 00:03:04,760 el mismo aspecto que antes pero ahora de una manera más elegante. Otro lugar en nuestra aplicación donde podríamos aprovechar 30 00:03:04,760 --> 00:03:11,360 esto es nuestro botón principal aquí. Nuestro botón principal se ve y se siente igual en ambas plataformas, lo 31 00:03:11,480 --> 00:03:14,780 cual no es horrible, pero que también podría no ser lo que queremos. 32 00:03:15,590 --> 00:03:21,590 Si vamos a nuestro MainButton. js, vemos que siempre usamos opacidad táctil aquí, pero en realidad 33 00:03:21,590 --> 00:03:23,940 en Android, podríamos querer usar el efecto dominó. 34 00:03:23,990 --> 00:03:30,740 Ahora, afortunadamente, React Native tiene el componente de retroalimentación nativa táctil incorporado que realmente nos da un objeto 35 00:03:30,740 --> 00:03:33,830 táctil que tiene un efecto dominó incorporado, 36 00:03:33,920 --> 00:03:38,730 por lo que queremos usarlo en Android y opacidad táctil en iOS. 37 00:03:38,810 --> 00:03:44,300 Ahora, por supuesto, podemos usar la API de plataforma que, por lo tanto, también tenemos que importar de React 38 00:03:44,330 --> 00:03:47,510 Native para usar un componente diferente aquí basado en la 39 00:03:47,630 --> 00:03:52,520 plataforma y para eso podemos usar una característica realmente ordenada React no ha reaccionado específicamente a 40 00:03:52,520 --> 00:03:54,200 React Native, pero podemos usar 41 00:03:54,290 --> 00:04:00,200 en React en general, podemos configurar una variable que comience con un carácter de mayúscula para que podamos usarla como 42 00:04:00,230 --> 00:04:07,430 un elemento jsx porque solo las variables de caracteres de mayúscula se pueden usar como elementos jsx y le damos un nombre al componente 43 00:04:07,490 --> 00:04:12,170 de botón, el nombre depende totalmente de usted y, por defecto, esa opacidad se puede tocar. 44 00:04:12,170 --> 00:04:19,730 Así que señalo el objeto de opacidad táctil aquí, sin corchetes angulados, solo apuntándolo así. 45 00:04:19,730 --> 00:04:27,350 Ahora podemos agregar un if check y verificar si el sistema operativo de la plataforma es igual a Android e importante, también 46 00:04:27,350 --> 00:04:29,230 verificar algo más en la 47 00:04:29,240 --> 00:04:37,210 plataforma, también verificar si la versión de la plataforma es mayor o igual a 21 porque solo la versión 21 o superior de 48 00:04:37,230 --> 00:04:40,040 la API de Android admite el efecto dominó. 49 00:04:40,100 --> 00:04:46,130 Entonces, si ambas cosas son verdaderas, configuraremos el componente del botón en retroalimentación nativa táctil, entonces usaremos el que tiene 50 00:04:46,130 --> 00:04:50,480 el efecto dominó, de lo contrario usaremos el que tiene el efecto de opacidad. 51 00:04:50,600 --> 00:04:56,930 Entonces, si estamos en Android y la versión de Android es lo suficientemente alta, es 21 52 00:04:56,930 --> 00:05:03,350 o superior, entonces usamos comentarios nativos táctiles. Ahora, como lo llamo con un carácter inicial mayúscula, podemos usar esto 53 00:05:03,350 --> 00:05:12,260 aquí en lugar de la opacidad táctil en nuestro código jsx, parece extraño al principio pero funcionará perfectamente bien. Si ahora guardamos esto y esto se 54 00:05:12,500 --> 00:05:22,640 reinicia, verá que ahora tiene ese efecto dominó, puede verlo si presionamos y mantenemos presionado, verá ese 55 00:05:22,640 --> 00:05:29,450 efecto dominó en el botón. Todavía no se ve perfecto porque en realidad es 56 00:05:29,450 --> 00:05:33,350 rectangular y no respeta nuestro radio de borde y lo arreglaremos, 57 00:05:33,350 --> 00:05:40,340 pero funciona y, por otro lado, aquí en iOS, tenemos el efecto de opacidad como puede ver si presiona esto. 58 00:05:40,340 --> 00:05:47,990 Así que ahora arreglemos el radio del borde y podemos hacerlo envolviendo esto con otra vista y eso es solo un 59 00:05:47,990 --> 00:05:51,780 pequeño truco, una pequeña solución que debes tener en cuenta. 60 00:05:52,010 --> 00:05:57,490 Envolvemos esto con otra vista donde configuro un estilo de, digamos contenedor de botones, 61 00:05:58,480 --> 00:06:07,430 agrego ese estilo allí abajo en nuestra hoja de estilos y en ese contenedor de botones aquí que ahora está envuelto alrededor de todo, 62 00:06:07,430 --> 00:06:08,640 configuro el mismo 63 00:06:08,780 --> 00:06:17,910 radio de borde que establecí en el botón , 25 en este caso aquí y agrego un desbordamiento oculto, lo que significa que cualquier 64 00:06:18,000 --> 00:06:25,320 componente secundario que iría más allá de los límites de estos componentes, por lo que el componente con este estilo 65 00:06:25,320 --> 00:06:31,170 se recorta básicamente y esto garantizará que el efecto dominó que ahora es un El 66 00:06:31,170 --> 00:06:36,670 componente hijo de esta vista se recortará en los bordes redondeados de este botón. 67 00:06:37,210 --> 00:06:44,070 Entonces, si guardamos esto y volvemos a intentarlo, verá que el efecto dominó solo llena el botón, que por supuesto 68 00:06:44,070 --> 00:06:50,200 se ve mucho mejor y, por supuesto, en iOS, todavía tenemos el mismo comportamiento que antes. 69 00:06:51,070 --> 00:06:55,750 Por lo tanto, usar la plataforma aquí en una comprobación de if también es algo que podemos hacer, 70 00:06:55,780 --> 00:07:01,180 pero también podemos usar este truco ordenado aquí para representar componentes totalmente diferentes en función de la plataforma en la que nos 71 00:07:01,180 --> 00:07:01,780 estamos ejecutando.