1 00:00:02,230 --> 00:00:08,300 Así que comenzamos con la entrada de texto, en este momento no estamos haciendo nada con los valores que ingresa el usuario, 2 00:00:08,350 --> 00:00:14,020 pero antes de hacerlo, asegurémonos de que en realidad el botón no esté debajo de esa entrada, sino al lado a 3 00:00:14,020 --> 00:00:15,520 la derecha y para 4 00:00:15,520 --> 00:00:17,700 De nuevo, tenemos que trabajar en el diseño. 5 00:00:17,710 --> 00:00:21,970 Es por eso que tengo esta vista adicional aquí alrededor de la entrada de texto en el botón. 6 00:00:21,970 --> 00:00:27,490 No necesitaríamos eso, pero ahora con esa vista anidada, podemos controlar cómo se alinean estos dos 7 00:00:27,490 --> 00:00:31,440 elementos entre sí, agregando nuevamente la propiedad de estilo aquí 8 00:00:31,660 --> 00:00:38,980 y ahora para el diseño, para posicionar las cosas, React Native usa flexbox, que también podría sepa de la web, en 9 00:00:38,980 --> 00:00:45,050 caso de que no lo haga, adjunto encontrará recursos que lo ayudarán a comenzar con CSS flexbox. 10 00:00:45,220 --> 00:00:49,840 No es necesario conocer flexbox dentro y fuera, pero es útil saber un poco al respecto, 11 00:00:49,840 --> 00:00:56,590 el trabajo de flexbox funciona de tal manera que coloca los elementos dentro de una vista uno al lado del otro o uno encima 12 00:00:56,800 --> 00:01:00,200 del otro, de forma predeterminada uno encima del otro en React Native 13 00:01:00,230 --> 00:01:06,460 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 14 00:01:06,880 --> 00:01:12,610 esto, en esta vista, anulamos el valor predeterminado, que es el predeterminado, por eso no tenemos que configurarlo en la 15 00:01:12,610 --> 00:01:18,430 columna y ahora ya , veremos que el botón en la entrada de texto se sienta uno al lado del otro, 16 00:01:18,430 --> 00:01:19,180 todavía no 17 00:01:19,330 --> 00:01:26,100 se ve tan bien pero están sentados uno al lado del otro. Ahora para que se vea mejor, también podemos 18 00:01:26,130 --> 00:01:27,960 agregar más, por 19 00:01:28,140 --> 00:01:34,300 ejemplo, puede definir cómo se alinean y distribuyen las cosas en su fila o columna. 20 00:01:34,650 --> 00:01:41,700 Por ejemplo, con contenido justificado, puede controlar cómo se distribuyen los elementos a lo largo de su eje principal y 21 00:01:41,700 --> 00:01:45,410 con la fila, el eje principal es de izquierda a 22 00:01:45,480 --> 00:01:50,570 derecha, si eso sería una columna, el eje principal sería de arriba a abajo. 23 00:01:50,630 --> 00:01:57,980 Entonces, ahora podríamos especificar un valor y aquí mi IDE incluso me da autocompletado, lo cual es muy conveniente, 24 00:01:58,130 --> 00:02:05,210 podríamos especificar un valor de espacio entre, por ejemplo. Lo que esto significa es que todo el espacio libre restante está entre 25 00:02:05,210 --> 00:02:07,690 los dos elementos, por lo que ahora no 26 00:02:07,760 --> 00:02:12,560 están sentados directamente uno al lado del otro, sino que hay algo de espacio libre entre ellos, como 27 00:02:12,560 --> 00:02:13,590 se puede ver. 28 00:02:14,590 --> 00:02:18,010 Ahora también podemos alinearlos en su eje transversal, por 29 00:02:18,060 --> 00:02:23,950 lo que el eje principal para la fila de dirección de flexión se dejó de izquierda a 30 00:02:23,950 --> 00:02:31,130 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 31 00:02:31,130 --> 00:02:32,220 sería de izquierda a derecha, 32 00:02:32,270 --> 00:02:38,750 por lo que el eje transversal simplemente es el opuesto del eje principal, por así decirlo. Justifique las posiciones de contenido a lo largo 33 00:02:38,750 --> 00:02:46,910 del eje principal, con elementos de alineación puede controlar cómo se alinean los elementos secundarios de esta vista a lo largo 34 00:02:46,910 --> 00:02:51,670 del eje transversal y allí tiene valores diferentes, como por ejemplo centro. 35 00:02:51,980 --> 00:02:58,250 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 36 00:02:58,250 --> 00:03:05,230 se ve mejor y simplemente está centrado allí en el medio de esta entrada. Bueno, y ahora también podemos aumentar un poco 37 00:03:05,230 --> 00:03:10,150 el ancho de esa entrada yendo a la entrada de texto y allí, en 38 00:03:10,150 --> 00:03:17,050 el estilo, también podemos agregar un ancho de digamos 200, para darle a esto un ancho de 200 píxeles, lo 39 00:03:17,050 --> 00:03:24,170 que significa que Esto ahora es un poco más grande. Alternativamente, por cierto, también podría haber elegido un valor 40 00:03:24,560 --> 00:03:30,830 de porcentaje como 80%, lo que significa que esto toma el 80% del ancho disponible puesto a disposición por 41 00:03:30,890 --> 00:03:38,180 su componente principal, así como por la vista que lo rodea. Y ahora con eso, echamos un vistazo a los primeros fundamentos importantes, 42 00:03:38,450 --> 00:03:44,720 sobre el diseño de React Native y el diseño de cosas, pero en este momento, estamos haciendo todo eso con 43 00:03:44,720 --> 00:03:51,040 ese concepto llamado estilos en línea, lo que significa que estamos configurando los estilos directamente en los elementos y eso no 44 00:03:51,050 --> 00:03:52,250 es lo ideal.