Así que comenzamos con la entrada de texto, en este momento no estamos haciendo nada con los valores que ingresa el usuario,
pero antes de hacerlo, asegurémonos de que en realidad el botón no esté debajo de esa entrada, sino al lado a
la derecha y para
De nuevo, tenemos que trabajar en el diseño.
Es por eso que tengo esta vista adicional aquí alrededor de la entrada de texto en el botón.
No necesitaríamos eso, pero ahora con esa vista anidada, podemos controlar cómo se alinean estos dos
elementos entre sí, agregando nuevamente la propiedad de estilo aquí
y ahora para el diseño, para posicionar las cosas, React Native usa flexbox, que también podría sepa de la web, en
caso de que no lo haga, adjunto encontrará recursos que lo ayudarán a comenzar con CSS flexbox.
No es necesario conocer flexbox dentro y fuera, pero es útil saber un poco al respecto,
el trabajo de flexbox funciona de tal manera que coloca los elementos dentro de una vista uno al lado del otro o uno encima
del otro, de forma predeterminada uno encima del otro en React Native
y puede cambiar eso configurando la dirección de flexión desde la columna, que es el valor predeterminado para la fila, y simplemente agregando
esto, en esta vista, anulamos el valor predeterminado, que es el predeterminado, por eso no tenemos que configurarlo en la
columna y ahora ya , veremos que el botón en la entrada de texto se sienta uno al lado del otro,
todavía no
se ve tan bien pero están sentados uno al lado del otro. Ahora para que se vea mejor, también podemos
agregar más, por
ejemplo, puede definir cómo se alinean y distribuyen las cosas en su fila o columna.
Por ejemplo, con contenido justificado, puede controlar cómo se distribuyen los elementos a lo largo de su eje principal y
con la fila, el eje principal es de izquierda a
derecha, si eso sería una columna, el eje principal sería de arriba a abajo.
Entonces, ahora podríamos especificar un valor y aquí mi IDE incluso me da autocompletado, lo cual es muy conveniente,
podríamos especificar un valor de espacio entre, por ejemplo. Lo que esto significa es que todo el espacio libre restante está entre
los dos elementos, por lo que ahora no
están sentados directamente uno al lado del otro, sino que hay algo de espacio libre entre ellos, como
se puede ver.
Ahora también podemos alinearlos en su eje transversal, por
lo que el eje principal para la fila de dirección de flexión se dejó de izquierda a
derecha, el eje transversal entonces es de arriba a abajo. Para la columna de dirección flexible, el eje principal sería de arriba a abajo y el eje transversal
sería de izquierda a derecha,
por lo que el eje transversal simplemente es el opuesto del eje principal, por así decirlo. Justifique las posiciones de contenido a lo largo
del eje principal, con elementos de alineación puede controlar cómo se alinean los elementos secundarios de esta vista a lo largo
del eje transversal y allí tiene valores diferentes, como por ejemplo centro.
Entonces, en este caso, dado que tenemos una fila de dirección flexible, esto debería centrar verticalmente todos los elementos, lo que significa que el botón ahora
se ve mejor y simplemente está centrado allí en el medio de esta entrada. Bueno, y ahora también podemos aumentar un poco
el ancho de esa entrada yendo a la entrada de texto y allí, en
el estilo, también podemos agregar un ancho de digamos 200, para darle a esto un ancho de 200 píxeles, lo
que significa que Esto ahora es un poco más grande. Alternativamente, por cierto, también podría haber elegido un valor
de porcentaje como 80%, lo que significa que esto toma el 80% del ancho disponible puesto a disposición por
su componente principal, así como por la vista que lo rodea. Y ahora con eso, echamos un vistazo a los primeros fundamentos importantes,
sobre el diseño de React Native y el diseño de cosas, pero en este momento, estamos haciendo todo eso con
ese concepto llamado estilos en línea, lo que significa que estamos configurando los estilos directamente en los elementos y eso no
es lo ideal.