Así que pasemos a la pantalla de filtros y ahora mismo, solo tengo mi
contenido ficticio, la pantalla de filtro y, por supuesto,
eso no es lo que quiero allí, sino que quiero tener algo de texto en la parte superior donde realmente digo filtros disponibles
/ restricciones o algo como esto en el que quiero apuntar a un determinado objeto de
estilo con estilos, nombremos título tal vez porque será nuestro título principal aquí y debajo de eso, quiero tener mis diferentes
filtros.
Ahora, ¿cómo se ve un filtro? Necesitamos algún interruptor, alguna casilla de verificación, algo como esto
que nos permita activar y desactivar un filtro y una etiqueta para eso.
Ahora eso significa que probablemente una vista tenga sentido agrupar la etiqueta y que cambiar
juntos y colocarlos uno al
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,
decir glutenFree allí y al lado de eso, un interruptor y afortunadamente React
Native tiene un interruptor incorporado, se llama interruptor. El componente de conmutador representa un
buen conmutador que podemos usar, por lo que
aquí podemos usar un conmutador como este y mostrarlo en la pantalla. Tendremos que configurar esto, pero para
comenzar, podemos usarlo así. Ahora, para algunos estilos básicos, para el título y el contenedor de
filtro aquí,
vamos aquí, agreguemos el contenedor
de filtro y el título aquí y el título es bastante sencillo. Allí, quiero utilizar la familia de fuentes
abierta sin negrita y un tamaño de fuente de 22, un margen en todas las direcciones de 20 y
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,
por lo que el centrado vertical ya no
debería suceder y, para eso, simplemente podemos
deshacernos del centro de contenido justificado y el contenedor de filtro, por otro lado, debe colocar el interruptor y el
texto uno al lado del otro en una fila.
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
el centro, de modo que esté centrado verticalmente. Ahora echemos un vistazo a eso, si guardamos esto y
vamos a la pantalla de filtro, esto es lo que tenemos. Aquí tenemos un interruptor y, como ven ahora, siempre está retrocediendo,
eso es algo de lo
que nos ocuparemos en un segundo, pero generalmente, lo vemos y aquí en los filtros para Android, tenemos un interruptor de
Android que también salta atrás, pero que convenientemente ya está diseñado previamente para Android, por lo que en realidad es
otro
componente integrado en React Native que tiene un aspecto predeterminado para Android. Entonces eso no es
tan malo.
Una cosa que quiero cambiar es para el contenedor del filtro, quiero asignar
un ancho fijo de digamos 80% y realmente cambiar esto aquí al espacio intermedio, no
al espacio
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
que no salte hacia atrás cuando lo activemos. Para eso, debe saber que para los conmutadores, debe administrar manualmente su
estado y eso en realidad no es nuevo, en React a menudo es el caso de que para estos componentes de entrada,
necesite almacenar lo que ingresa el usuario y alimentarlo nuevamente en el componente para reflejar eso en la interfaz de
usuario actualizada y lo
hacemos con la gestión del estado.
Entonces importamos para usar el enlace de estado de React para que podamos administrar el estado
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
está activado ese interruptor aquí, tiene
una propiedad de valor,
esa es una propiedad integrada en el interruptor incorporado en el que alimento en isGlutenFree, por lo que esto toma un
valor booleano que indica si ese interruptor se representa como activo o no activo, así que si está marcado como
marcado o no está marcado, debería decir, y tiene una propiedad onValueChange que toma una función
que se activa cada vez que el
usuario hace clic en ese interruptor. Esta función aquí obtiene el nuevo
valor, por lo que si el interruptor estaba en el modo falso, en el modo desmarcar, el nuevo valor será verdadero
y al revés, por supuesto, y podemos usarlo para actualizar nuestro estado y establecer isGlutenFree en el nuevo valor
y dado que también alimentamos este estado nuevamente, ahora nuestro interruptor debería ser modificable y debería permanecer
en ese modo actualizado.
Entonces, si echamos un vistazo a esto, ahora realmente podemos alternar ese cambio y eso es una mejora.
El estilo del interruptor no es lo que quiero, sin embargo, usa un
color predeterminado, por supuesto, me gustaría usar mis colores que uso en la
aplicación todo el tiempo y para eso, podemos importar nuestros
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
de pista que nos permite personalizar los colores para ese interruptor, de modo que el color de
fondo, etc. y el color de pista toman un objeto como valor, por lo tanto, tenemos un objeto que pasamos aquí a este enlace
dinámico donde puede establecer un color de fondo para el estado falso, por lo que si está inactivo, si
no está marcado y estoy bien con el valor predeterminado, esto se ve bien para yo, pero
también puede
configurar uno para el caso verdadero, que es el caso de que
esté marcado y allí quiero usar colores, color primario y, por supuesto, puede tomar el color que desee.
Y si hacemos eso y vuelvo a los filtros, ahora usamos nuestro propio color aquí, que por supuesto está
más en línea con el
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
pulgar aquí, que es verde aquí en Android y esto solo toma una cadena, una cadena de color, por lo que un código
hexadecimal, por ejemplo, allí también podemos apuntar a los colores de color primario y si Hacemos eso, en iOS, ahora tiene
este color y el mismo
en Android.
Ahora, por supuesto, en iOS, esto realmente no se ve tan
bien, allí me gustaría mantener el valor predeterminado y la solución
es bastante simple, nuevamente podemos usar la API de la plataforma antigua, importar esto y luego aquí al
asignar un color de pulgar , Compruebo la plataforma. es igual a Android, en cuyo caso quiero usar el color primario para mi pulgar,
de lo contrario, estableceré esto en una cadena vacía, lo que significa que usará el predeterminado que es blanco en iOS.
Y con eso, aquí tenemos el mismo aspecto que antes que me gusta en iOS
pero, por supuesto, también
puede ajustar esto a sus requisitos y en Android, todavía tendremos el aspecto que vimos antes, si voy al filtro
pantalla aquí que se ve bien allí también. Así que ese es el interruptor y
cómo podemos agregarlo, ahora solo necesitamos repetir esto para todos nuestros otros interruptores
también, así que todos los otros filtros quiero decir. Así que puedo copiar esa vista y agregarla
nuevamente
sin lactosa o vegana, pero si te encuentras copiando y pegando una y otra
vez mientras intentamos hacerlo aquí, ese es siempre un buen caso para crear un componente separado o un función
que representa este código reutilizable.
Y aquí, nuevamente, crearé un componente separado en ese mismo archivo porque realmente solo lo uso allí,
de
nuevo, también podría buscar un archivo separado si lo desea.
Lo llamaré interruptor de filtro y esto obtiene algunos accesorios y,
en este componente, al final devuelvo este código, configuramos un para con la vista y el texto, etc. Y,
por
supuesto, ahora el texto debe ser dinámico. Allí podríamos establecer esto en la etiqueta de accesorios
y depende totalmente de ti lo que elijas aquí porque de todos modos serás el que pase
los valores de los accesorios y, por supuesto, aquí, lo que sucede en ValueChange y lo que pasamos al valor también difiere.
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
y aquí para onValueChange, simplemente señalaré los accesorios. onChange, por ejemplo, pero de nuevo, todos estos nombres
de utilería, por supuesto, dependen totalmente de usted porque usted será el que use
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
un accesorio de etiqueta aquí, si lo nombraste de manera diferente,
debes nombrarlo de manera diferente
aquí, por supuesto, y la etiqueta, por supuesto, es GlutenFree porque estoy a punto de reemplazar este interruptor aquí.
Luego tenemos que pasar un estado porque agregué un accesorio de estado aquí para administrar mi valor, si
lo nombraste de manera diferente, también debes nombrarlo de manera
diferente allí abajo y aquí señalaré isGlutenFree, mi
estado y onChange necesidades que
se proporcionará porque aquí estoy usando el accesorio onChange para vincularlo a onValueChange.
Entonces, esto debería apuntar a una función y, por supuesto, aquí, simplemente mantendré esta función
aquí y dado que solo uso onChange aquí para reenviarla a onValueChange, obtenemos el nuevo argumento de valor aquí también.
Ahora podemos deshacernos de esta vista y usar nuestro componente de interruptor de filtro y ahora simplemente repetir
lo que, por supuesto, es mucho más fácil.
Así que ahora aquí también podemos tener sin lactosa, vegano y vegetariano y necesitamos
agregar tres nuevos estados ahora, así que aquí déjenme replicar esto, tenemos isLactoseFree y establecemos
isLactoseFree, aquí tenemos isVegan y establecemos isVegan
y aquí tenemos isVegetarian yy
conjunto es vegetariano.
Ahora solo necesitamos asegurarnos de que usamos los estados en los lugares correctos, por lo que para el
segundo interruptor de filtro donde tenemos el filtro lactoseFree, reenvío el estado
isLactoseFree y actualizo el conjunto isLactoseFree, por supuesto. Para el cambio vegano, reenvío
isVegan y lo actualizamos con set isVegan y para vegetariano, reenviamos isVegetarian y
actualizamos set isVegetarian, de esta manera.
Bien,
eso debería ser, si ahora guardamos esto, deberíamos tener una pantalla de filtro con nuestros diferentes filtros que podemos
configurar de forma independiente porque tenemos estados independientes. Creo que sería bueno tener algo
de espacio entre estas filas, así que implementemos esto. En nuestro contenedor de filtro aquí, simplemente podemos agregar un
margen vertical de digamos 10 o 50 tal vez, un poco más y esto debería asegurarnos de que tengamos algo
de espacio allí,
sí, y esto se ve bastante bien.