1 00:00:02,390 --> 00:00:08,060 Así que pasemos a la pantalla de filtros y ahora mismo, solo tengo mi 2 00:00:08,060 --> 00:00:11,420 contenido ficticio, la pantalla de filtro y, por supuesto, 3 00:00:11,510 --> 00:00:20,060 eso no es lo que quiero allí, sino que quiero tener algo de texto en la parte superior donde realmente digo filtros disponibles 4 00:00:20,060 --> 00:00:25,910 / restricciones o algo como esto en el que quiero apuntar a un determinado objeto de 5 00:00:25,910 --> 00:00:33,560 estilo con estilos, nombremos título tal vez porque será nuestro título principal aquí y debajo de eso, quiero tener mis diferentes 6 00:00:33,560 --> 00:00:34,250 filtros. 7 00:00:34,250 --> 00:00:41,180 Ahora, ¿cómo se ve un filtro? Necesitamos algún interruptor, alguna casilla de verificación, algo como esto 8 00:00:41,180 --> 00:00:45,210 que nos permita activar y desactivar un filtro y una etiqueta para eso. 9 00:00:45,230 --> 00:00:50,840 Ahora eso significa que probablemente una vista tenga sentido agrupar la etiqueta y que cambiar 10 00:00:50,840 --> 00:00:52,970 juntos y colocarlos uno al 11 00:00:52,970 --> 00:01:04,560 lado del otro probablemente y le daré a la vista un estilo de contenedor de filtro, algo así y allí, como dije, quiero tener un texto con una etiqueta, por ejemplo, 12 00:01:04,560 --> 00:01:09,300 decir glutenFree allí y al lado de eso, un interruptor y afortunadamente React 13 00:01:10,050 --> 00:01:16,080 Native tiene un interruptor incorporado, se llama interruptor. El componente de conmutador representa un 14 00:01:16,080 --> 00:01:19,140 buen conmutador que podemos usar, por lo que 15 00:01:19,140 --> 00:01:28,180 aquí podemos usar un conmutador como este y mostrarlo en la pantalla. Tendremos que configurar esto, pero para 16 00:01:28,210 --> 00:01:36,520 comenzar, podemos usarlo así. Ahora, para algunos estilos básicos, para el título y el contenedor de 17 00:01:36,520 --> 00:01:37,780 filtro aquí, 18 00:01:37,780 --> 00:01:39,490 vamos aquí, agreguemos el contenedor 19 00:01:39,490 --> 00:01:48,040 de filtro y el título aquí y el título es bastante sencillo. Allí, quiero utilizar la familia de fuentes 20 00:01:48,120 --> 00:01:58,410 abierta sin negrita y un tamaño de fuente de 22, un margen en todas las direcciones de 20 y 21 00:01:58,550 --> 00:02:08,580 también establecer el texto alinear al centro para centrar esto. Por cierto, la pantalla general ya no debería centrar elementos en el eje principal, 22 00:02:08,610 --> 00:02:11,530 por lo que el centrado vertical ya no 23 00:02:11,700 --> 00:02:14,330 debería suceder y, para eso, simplemente podemos 24 00:02:14,460 --> 00:02:21,610 deshacernos del centro de contenido justificado y el contenedor de filtro, por otro lado, debe colocar el interruptor y el 25 00:02:21,640 --> 00:02:24,970 texto uno al lado del otro en una fila. 26 00:02:24,970 --> 00:02:34,060 Entonces, aquí podemos establecer la dirección de flexión a fila, justificar el contenido quizás agregando espacio alrededor y alinear elementos en el eje transversal que está en 27 00:02:34,060 --> 00:02:40,080 el centro, de modo que esté centrado verticalmente. Ahora echemos un vistazo a eso, si guardamos esto y 28 00:02:40,080 --> 00:02:46,290 vamos a la pantalla de filtro, esto es lo que tenemos. Aquí tenemos un interruptor y, como ven ahora, siempre está retrocediendo, 29 00:02:46,290 --> 00:02:47,460 eso es algo de lo 30 00:02:47,460 --> 00:02:53,130 que nos ocuparemos en un segundo, pero generalmente, lo vemos y aquí en los filtros para Android, tenemos un interruptor de 31 00:02:53,130 --> 00:02:58,380 Android que también salta atrás, pero que convenientemente ya está diseñado previamente para Android, por lo que en realidad es 32 00:02:58,380 --> 00:02:58,920 otro 33 00:02:58,920 --> 00:03:05,300 componente integrado en React Native que tiene un aspecto predeterminado para Android. Entonces eso no es 34 00:03:05,300 --> 00:03:07,240 tan malo. 35 00:03:07,250 --> 00:03:13,070 Una cosa que quiero cambiar es para el contenedor del filtro, quiero asignar 36 00:03:13,070 --> 00:03:19,430 un ancho fijo de digamos 80% y realmente cambiar esto aquí al espacio intermedio, no 37 00:03:19,430 --> 00:03:20,480 al espacio 38 00:03:20,480 --> 00:03:32,030 alrededor porque creo que ahora se ve un poco mejor, sí definitivamente, también en Android y ahora, podemos asegurarnos de que este interruptor realmente funcione y 39 00:03:32,030 --> 00:03:39,440 que no salte hacia atrás cuando lo activemos. Para eso, debe saber que para los conmutadores, debe administrar manualmente su 40 00:03:39,440 --> 00:03:46,130 estado y eso en realidad no es nuevo, en React a menudo es el caso de que para estos componentes de entrada, 41 00:03:46,670 --> 00:03:53,120 necesite almacenar lo que ingresa el usuario y alimentarlo nuevamente en el componente para reflejar eso en la interfaz de 42 00:03:53,210 --> 00:03:54,790 usuario actualizada y lo 43 00:03:55,130 --> 00:03:57,080 hacemos con la gestión del estado. 44 00:03:57,100 --> 00:04:03,040 Entonces importamos para usar el enlace de estado de React para que podamos administrar el estado 45 00:04:03,290 --> 00:04:13,770 aquí en este componente funcional y aquí, tendré mi estado de gluten y nombraré esto es GlutenFree y estableceré el estado de uso GlutenFree, inicialmente eso es falso y ahora 46 00:04:14,660 --> 00:04:16,930 está activado ese interruptor aquí, tiene 47 00:04:17,150 --> 00:04:18,800 una propiedad de valor, 48 00:04:22,330 --> 00:04:29,650 esa es una propiedad integrada en el interruptor incorporado en el que alimento en isGlutenFree, por lo que esto toma un 49 00:04:29,650 --> 00:04:36,640 valor booleano que indica si ese interruptor se representa como activo o no activo, así que si está marcado como 50 00:04:36,640 --> 00:04:42,550 marcado o no está marcado, debería decir, y tiene una propiedad onValueChange que toma una función 51 00:04:42,550 --> 00:04:45,160 que se activa cada vez que el 52 00:04:45,160 --> 00:04:49,520 usuario hace clic en ese interruptor. Esta función aquí obtiene el nuevo 53 00:04:49,610 --> 00:04:56,480 valor, por lo que si el interruptor estaba en el modo falso, en el modo desmarcar, el nuevo valor será verdadero 54 00:04:56,480 --> 00:05:02,750 y al revés, por supuesto, y podemos usarlo para actualizar nuestro estado y establecer isGlutenFree en el nuevo valor 55 00:05:03,110 --> 00:05:09,050 y dado que también alimentamos este estado nuevamente, ahora nuestro interruptor debería ser modificable y debería permanecer 56 00:05:09,290 --> 00:05:10,800 en ese modo actualizado. 57 00:05:10,820 --> 00:05:17,430 Entonces, si echamos un vistazo a esto, ahora realmente podemos alternar ese cambio y eso es una mejora. 58 00:05:17,450 --> 00:05:21,800 El estilo del interruptor no es lo que quiero, sin embargo, usa un 59 00:05:21,800 --> 00:05:26,010 color predeterminado, por supuesto, me gustaría usar mis colores que uso en la 60 00:05:26,180 --> 00:05:30,020 aplicación todo el tiempo y para eso, podemos importar nuestros 61 00:05:30,020 --> 00:05:39,140 colores constantemente, por supuesto, así que importa colores de constantes / Colores y el interruptor tiene otra propiedad que nos ayuda con el estilo aquí, podemos agregar color 62 00:05:39,710 --> 00:05:45,130 de pista que nos permite personalizar los colores para ese interruptor, de modo que el color de 63 00:05:45,140 --> 00:05:52,910 fondo, etc. y el color de pista toman un objeto como valor, por lo tanto, tenemos un objeto que pasamos aquí a este enlace 64 00:05:52,910 --> 00:05:59,030 dinámico donde puede establecer un color de fondo para el estado falso, por lo que si está inactivo, si 65 00:05:59,030 --> 00:06:04,490 no está marcado y estoy bien con el valor predeterminado, esto se ve bien para yo, pero 66 00:06:04,490 --> 00:06:05,270 también puede 67 00:06:05,660 --> 00:06:09,570 configurar uno para el caso verdadero, que es el caso de que 68 00:06:09,740 --> 00:06:15,680 esté marcado y allí quiero usar colores, color primario y, por supuesto, puede tomar el color que desee. 69 00:06:15,680 --> 00:06:22,580 Y si hacemos eso y vuelvo a los filtros, ahora usamos nuestro propio color aquí, que por supuesto está 70 00:06:22,580 --> 00:06:24,740 más en línea con el 71 00:06:24,740 --> 00:06:33,340 resto de esta aplicación y, obviamente, esto también funcionará aquí en Android. También podemos establecer el color del pulgar, que es el color de este 72 00:06:33,340 --> 00:06:41,290 pulgar aquí, que es verde aquí en Android y esto solo toma una cadena, una cadena de color, por lo que un código 73 00:06:42,410 --> 00:06:49,530 hexadecimal, por ejemplo, allí también podemos apuntar a los colores de color primario y si Hacemos eso, en iOS, ahora tiene 74 00:06:49,530 --> 00:06:51,270 este color y el mismo 75 00:06:55,710 --> 00:06:56,820 en Android. 76 00:06:59,660 --> 00:07:03,420 Ahora, por supuesto, en iOS, esto realmente no se ve tan 77 00:07:03,420 --> 00:07:07,480 bien, allí me gustaría mantener el valor predeterminado y la solución 78 00:07:07,500 --> 00:07:13,620 es bastante simple, nuevamente podemos usar la API de la plataforma antigua, importar esto y luego aquí al 79 00:07:13,620 --> 00:07:21,000 asignar un color de pulgar , Compruebo la plataforma. es igual a Android, en cuyo caso quiero usar el color primario para mi pulgar, 80 00:07:21,480 --> 00:07:26,410 de lo contrario, estableceré esto en una cadena vacía, lo que significa que usará el predeterminado que es blanco en iOS. 81 00:07:26,510 --> 00:07:31,650 Y con eso, aquí tenemos el mismo aspecto que antes que me gusta en iOS 82 00:07:31,650 --> 00:07:33,300 pero, por supuesto, también 83 00:07:33,300 --> 00:07:40,140 puede ajustar esto a sus requisitos y en Android, todavía tendremos el aspecto que vimos antes, si voy al filtro 84 00:07:40,140 --> 00:07:45,650 pantalla aquí que se ve bien allí también. Así que ese es el interruptor y 85 00:07:45,950 --> 00:07:50,060 cómo podemos agregarlo, ahora solo necesitamos repetir esto para todos nuestros otros interruptores 86 00:07:50,120 --> 00:07:55,700 también, así que todos los otros filtros quiero decir. Así que puedo copiar esa vista y agregarla 87 00:07:55,700 --> 00:07:56,430 nuevamente 88 00:07:56,990 --> 00:08:01,960 sin lactosa o vegana, pero si te encuentras copiando y pegando una y otra 89 00:08:02,090 --> 00:08:08,900 vez mientras intentamos hacerlo aquí, ese es siempre un buen caso para crear un componente separado o un función 90 00:08:08,900 --> 00:08:10,680 que representa este código reutilizable. 91 00:08:10,730 --> 00:08:15,590 Y aquí, nuevamente, crearé un componente separado en ese mismo archivo porque realmente solo lo uso allí, 92 00:08:15,590 --> 00:08:16,040 de 93 00:08:16,040 --> 00:08:19,150 nuevo, también podría buscar un archivo separado si lo desea. 94 00:08:19,390 --> 00:08:23,720 Lo llamaré interruptor de filtro y esto obtiene algunos accesorios y, 95 00:08:23,720 --> 00:08:30,820 en este componente, al final devuelvo este código, configuramos un para con la vista y el texto, etc. Y, 96 00:08:30,820 --> 00:08:31,410 por 97 00:08:31,610 --> 00:08:37,100 supuesto, ahora el texto debe ser dinámico. Allí podríamos establecer esto en la etiqueta de accesorios 98 00:08:37,100 --> 00:08:41,810 y depende totalmente de ti lo que elijas aquí porque de todos modos serás el que pase 99 00:08:43,050 --> 00:08:48,930 los valores de los accesorios y, por supuesto, aquí, lo que sucede en ValueChange y lo que pasamos al valor también difiere. 100 00:08:48,930 --> 00:08:57,230 Así que aquí, este debería ser el estado de los accesorios, por ejemplo, el valor de los accesorios o lo que sea que quieras usar 101 00:08:57,310 --> 00:09:03,490 y aquí para onValueChange, simplemente señalaré los accesorios. onChange, por ejemplo, pero de nuevo, todos estos nombres 102 00:09:03,490 --> 00:09:08,140 de utilería, por supuesto, dependen totalmente de usted porque usted será el que use 103 00:09:08,140 --> 00:09:16,870 ese componente y en realidad lo usaremos ahora aquí, así, así que el componente de cierre automático, donde ahora podemos establecer una etiqueta porque estoy esperando 104 00:09:16,870 --> 00:09:20,730 un accesorio de etiqueta aquí, si lo nombraste de manera diferente, 105 00:09:20,800 --> 00:09:22,990 debes nombrarlo de manera diferente 106 00:09:22,990 --> 00:09:29,230 aquí, por supuesto, y la etiqueta, por supuesto, es GlutenFree porque estoy a punto de reemplazar este interruptor aquí. 107 00:09:29,380 --> 00:09:35,830 Luego tenemos que pasar un estado porque agregué un accesorio de estado aquí para administrar mi valor, si 108 00:09:35,830 --> 00:09:39,610 lo nombraste de manera diferente, también debes nombrarlo de manera 109 00:09:39,620 --> 00:09:42,970 diferente allí abajo y aquí señalaré isGlutenFree, mi 110 00:09:42,970 --> 00:09:45,120 estado y onChange necesidades que 111 00:09:45,130 --> 00:09:49,840 se proporcionará porque aquí estoy usando el accesorio onChange para vincularlo a onValueChange. 112 00:09:49,840 --> 00:09:55,990 Entonces, esto debería apuntar a una función y, por supuesto, aquí, simplemente mantendré esta función 113 00:09:55,990 --> 00:10:03,550 aquí y dado que solo uso onChange aquí para reenviarla a onValueChange, obtenemos el nuevo argumento de valor aquí también. 114 00:10:04,870 --> 00:10:10,480 Ahora podemos deshacernos de esta vista y usar nuestro componente de interruptor de filtro y ahora simplemente repetir 115 00:10:10,510 --> 00:10:13,270 lo que, por supuesto, es mucho más fácil. 116 00:10:13,270 --> 00:10:23,450 Así que ahora aquí también podemos tener sin lactosa, vegano y vegetariano y necesitamos 117 00:10:24,490 --> 00:10:34,740 agregar tres nuevos estados ahora, así que aquí déjenme replicar esto, tenemos isLactoseFree y establecemos 118 00:10:34,740 --> 00:10:39,210 isLactoseFree, aquí tenemos isVegan y establecemos isVegan 119 00:10:39,270 --> 00:10:42,720 y aquí tenemos isVegetarian yy 120 00:10:48,010 --> 00:10:51,000 conjunto es vegetariano. 121 00:10:51,020 --> 00:10:57,740 Ahora solo necesitamos asegurarnos de que usamos los estados en los lugares correctos, por lo que para el 122 00:10:57,760 --> 00:11:02,220 segundo interruptor de filtro donde tenemos el filtro lactoseFree, reenvío el estado 123 00:11:02,250 --> 00:11:09,100 isLactoseFree y actualizo el conjunto isLactoseFree, por supuesto. Para el cambio vegano, reenvío 124 00:11:09,160 --> 00:11:17,980 isVegan y lo actualizamos con set isVegan y para vegetariano, reenviamos isVegetarian y 125 00:11:17,980 --> 00:11:22,060 actualizamos set isVegetarian, de esta manera. 126 00:11:25,410 --> 00:11:25,880 Bien, 127 00:11:25,970 --> 00:11:31,790 eso debería ser, si ahora guardamos esto, deberíamos tener una pantalla de filtro con nuestros diferentes filtros que podemos 128 00:11:31,790 --> 00:11:36,770 configurar de forma independiente porque tenemos estados independientes. Creo que sería bueno tener algo 129 00:11:36,770 --> 00:11:43,610 de espacio entre estas filas, así que implementemos esto. En nuestro contenedor de filtro aquí, simplemente podemos agregar un 130 00:11:43,610 --> 00:11:50,570 margen vertical de digamos 10 o 50 tal vez, un poco más y esto debería asegurarnos de que tengamos algo 131 00:11:50,570 --> 00:11:51,970 de espacio allí, 132 00:11:52,130 --> 00:11:54,550 sí, y esto se ve bastante bien.