Ahora, esta también es una buena práctica
para usted, puede pausar el video aquí e intentar colocar estos dos botones uno al lado del otro, solo los
dos botones, no la entrada y los dos botones, pero estos dos botones deben estar en un nueva línea debajo de la entrada
pero luego se sientan uno al lado del otro.
Después de la breve pausa que puede usar para pausar el video, por supuesto lo haremos juntos.
¿Tuviste éxito?
Probémoslo juntos.
La clave aquí es usar flexbox y otra vista porque nuevamente, como mencioné anteriormente y como es realmente importante entender,
los componentes de vista son su componente principal para organizar otros componentes o para usarse como un contenedor
que también puede diseñar pero
aquí en este caso, para organizar otros componentes. Así que moveré los dos botones dentro de
esa vista y ahora podemos asignar un estilo a esa vista y ese estilo, por supuesto,
se definirá aquí en nuestro objeto de estilo y nombraré este
contenedor de botones, esto depende de usted, este nombre y allí, quiero establecer una dirección de fila flexible
para que se sienten uno al lado del otro y luego, estableceré el contenido de espacio justificado para tener
el espacio libre entre los dos botones.
Ahora agreguemos el estilo aquí a esa vista, el contenedor de botones de estilos y guardemos esto y ahora aquí están los
botones, pero para que el espacio libre tenga un efecto aquí, que por cierto será aún más claro
en Android, que actualmente no
tiene ningún efecto, para que el espacio
entre no tenga ningún efecto, permítanme mostrarlo rápidamente en Android.
Ya
ves, no hay espacio libre.
La razón de esto simplemente es que no tenemos un ancho asignado a nuestro contenedor de botones y,
por
lo tanto, como aprendió, solo toma el ancho
de los elementos secundarios y ese es simplemente el ancho de
los dos botones agregados juntos,
por lo tanto, no hay espacio libre para agregar en el medio.
Por lo tanto, tenemos algo de espacio libre en el medio, simplemente necesitamos asignar un con al contenedor de
botones y ahora ese ancho depende de usted. Dado que la entrada tiene 80%,
podríamos ir con 80% aquí también o tal vez con 60% para tener un poco más estrecho que la entrada anterior, para que los
botones no se asienten en los bordes de la entrada, pero eso es de Por supuesto,
depende
de usted y, por lo tanto, ahora con eso, si esto se recarga y miramos esto
en Android al usar esta forma conveniente de cerrarlo y reiniciarlo, ahora deberíamos ver algo de espacio libre
entre estos dos botones,
sí, eso se ve bien.
Y, por supuesto, puede jugar con
eso, también podría, por supuesto, agregar estilos a los botones, puede agregar accesorios
de estilo aquí también y agregar un margen a la izquierda y a la derecha de cada botón, eso también
habría funcionado.
También puede jugar con otros valores aquí, como espacio alrededor para tener el espacio libre a la izquierda y derecha
de los botones y no solo entre ellos.
Estas son todas las cosas que puedes hacer, iré con espacio por aquí y echaré un vistazo final a
esto, pero en última instancia, eso es simplemente algo que depende de ti.
Por supuesto, aquí es importante que comprenda cómo puede lograr algo con la ayuda de
una vista que envuelve sus botones y flexbox y, con
eso, diría que tenemos un aspecto decente aquí.
Ahora, una última cosa, lo último que todavía quiero hacer es cambiar el tamaño de estos botones porque no tienen el mismo
tamaño y creo que se vería un poco mejor si tuvieran el mismo tamaño.
Ahora en un botón, no puede agregar un accesorio de estilo y establecer un ancho, no importa si está utilizando
estilos en línea o el objeto de
hoja de estilo, y eso es algo que debe saber,
por eso lo estoy cubriendo aquí, tiene que ajustar su botón en una vista separada, como lo estoy haciendo aquí y luego darle un
botón a esa vista, por ejemplo, aquí podríamos agregar un botón de estilos, refiriéndonos a una propiedad del botón, a cada vista
y allí en este propiedad del botón que ahora estoy agregando, podría agregar un ancho de digamos 40% y ese será
el 40% del padre de esa vista, por
lo que el 40% de esa vista de contenedor de botones que en sí misma toma el 60% del ancho
total disponible y podemos hacer esto en el otro botón también, por supuesto.
Así que eso es algo que debe saber, si agrega sus vistas circundantes aquí, alrededor de sus botones.
Ahora con eso, si reiniciamos Android nuevamente, deberíamos tener botones del mismo tamaño que, por supuesto, a
menudo es algo que desea.
Por supuesto, también podría haber usado un valor de píxel aquí en lugar de valores de porcentaje, pero ahora con eso,
estoy muy feliz, creo
que ahora es realmente una aplicación que se ve bien, se comporta bien
y sí, es un buen comienzo con React Native.
Ahora, obviamente, hay mucho más que podemos aprender y profundizaremos, mucho más que podemos hacer con respecto
al estilo porque, como ya se mencionó, esta no es la aplicación más hermosa que
hayas creado, pero cubrimos muchos fundamentos importantes aquí.