1 00:00:02,110 --> 00:00:07,000 Entonces, en una nueva pantalla de lugar, quiero poder agregar un lugar y para eso, primero 2 00:00:07,030 --> 00:00:12,190 agregaré el componente de entrada de texto que, por supuesto, no tiene nada que ver con las características 3 00:00:12,190 --> 00:00:19,330 nativas del dispositivo, pero simplemente también lo necesitamos porque en allí, ahora podemos agregar una entrada de texto que permita al usuario ingresar el título 4 00:00:19,330 --> 00:00:24,350 y, por lo tanto, también agregaré un componente de texto aquí donde digo título, que debería actuar como 5 00:00:24,370 --> 00:00:25,360 una etiqueta para 6 00:00:25,360 --> 00:00:32,450 esta entrada de texto aquí y, en general, También quiero una vista de desplazamiento aquí para envolver todo mi contenido porque no sé qué dispositivo 7 00:00:32,520 --> 00:00:37,540 va a usar el usuario, pero agregaremos más que solo un título, también agregaremos un selector de imágenes 8 00:00:37,540 --> 00:00:43,120 y un selector de lugar en todo este módulo y, por lo tanto, poder desplazar esta página es realmente importante. 9 00:00:43,180 --> 00:00:48,820 Así que ahora tenemos esa etiqueta de título y la entrada de texto que le pertenece, que por ahora 10 00:00:48,820 --> 00:00:52,450 no hará nada, pero que pronto permitirá al usuario ingresar un título. 11 00:00:52,540 --> 00:00:55,840 También quiero asegurarme de que, por supuesto, este formulario se puede 12 00:00:56,170 --> 00:01:02,500 enviar, así que lo que también quiero hacer es agregar un componente de botón aquí y después de ingresar el texto aquí, tendré mi 13 00:01:02,500 --> 00:01:10,450 botón donde digo guardar lugar para ejemplo, agregue un color aquí y configúrelo en Colores. primaria y para eso, debes asegurarte de que estás 14 00:01:10,540 --> 00:01:15,730 importando los colores constantes aquí y onPress luego enviará este formulario, por 15 00:01:15,820 --> 00:01:19,750 el momento no estoy haciendo nada aquí. 16 00:01:19,750 --> 00:01:25,030 La entrada de texto, por supuesto, también se puede configurar, aunque la configuración más básica está bien aquí, no 17 00:01:25,030 --> 00:01:29,920 necesito cambiar el tipo de teclado, etc., pero algunos estilos serían buenos y eso es realmente cierto 18 00:01:29,920 --> 00:01:31,360 para toda la página. 19 00:01:31,360 --> 00:01:37,330 Entonces, para esta vista aquí, por ejemplo, quiero agregar un estilo de formulario aquí, por lo que un identificador de estilo de 20 00:01:37,330 --> 00:01:41,140 formulario para poder diseñar el formulario general. Para el título 21 00:01:41,140 --> 00:01:50,980 aquí, agregaré un estilo de etiqueta y para la entrada de texto, también quiero agregar mis propios estilos y usaré la entrada 22 00:01:51,100 --> 00:01:55,210 de texto del identificador aquí. Con eso, vamos a la hoja de 23 00:01:55,210 --> 00:02:00,180 estilo y asegurémonos de agregar un poco de estilo aquí. Para el formulario general, agregaré un margen en 24 00:02:00,220 --> 00:02:05,350 todas las direcciones de 30 para que no se asiente directamente en los bordes de la pantalla. 25 00:02:06,160 --> 00:02:07,480 Para la etiqueta, 26 00:02:07,780 --> 00:02:15,640 quiero establecer un tamaño de fuente de digamos 18 y también agregar un margen al final de 15 para que tengamos un poco 27 00:02:15,640 --> 00:02:20,530 de espacio entre la etiqueta y la entrada de texto y en la entrada 28 00:02:20,860 --> 00:02:27,670 de texto en sí, para que sea para poder verlo, agregaré un borde inferior y estableceré su color a este 29 00:02:27,670 --> 00:02:36,460 gris claro aquí con este código hexadecimal de #ccc y un ancho inferior del borde aquí de 1 y luego también tendré un margen en su 30 00:02:36,490 --> 00:02:43,060 parte inferior, así que para el contenido debajo de él, el botón en este momento de 15 y lo 31 00:02:43,060 --> 00:02:48,300 que también agregaré aquí es un poco de relleno vertical, solo cuatro y un poco 32 00:02:48,670 --> 00:02:52,100 de relleno horizontal, solo dos. Si guardo eso, echemos un vistazo. 33 00:02:52,150 --> 00:02:57,310 Si voy a la pantalla de nuevos lugares, esto es lo que tengo y esto no se ve muy 34 00:02:57,400 --> 00:03:03,360 mal, también en Android, esto es algo con lo que podemos trabajar, supongo y esto es algo en lo que podemos construir. 35 00:03:03,460 --> 00:03:05,970 Ahora, por supuesto, esta entrada no está 36 00:03:05,980 --> 00:03:13,390 haciendo nada, por supuesto, quiero capturar lo que ingresó el usuario y mantenerlo simple, aquí no agregaré una validación súper compleja 37 00:03:13,390 --> 00:03:15,770 ni nada de eso, en 38 00:03:15,790 --> 00:03:22,030 su lugar simplemente capturaré el valor y eso es. Por supuesto, puede agregar validación, puede agregar un 39 00:03:22,330 --> 00:03:23,360 reductor como 40 00:03:23,370 --> 00:03:28,680 lo hicimos en el módulo de entrada del usuario donde aprendió cómo puede administrar formularios 41 00:03:28,690 --> 00:03:36,490 más complejos de todas las formas, aquí nuevamente lo mantendré muy simple y, por lo tanto, solo importaré use el enlace de 42 00:03:36,490 --> 00:03:40,660 estado de Reaccionar aquí para que pueda capturar mis valores aquí. 43 00:03:40,660 --> 00:03:49,360 Entonces, aquí tendré mi valor de título y estableceré la función de valor de título y usaré el estado de uso para inicializar esto 44 00:03:49,350 --> 00:03:53,140 en una cadena vacía y luego agregaré una función aquí, 45 00:03:53,230 --> 00:03:59,800 el controlador de cambio de título, que recibe el texto que ingresó el usuario y donde l Luego 46 00:03:59,800 --> 00:04:08,750 estableceré el valor de mi título en ese texto y aquí, por supuesto, podría agregar validación, pero nuevamente para mantener esto simple, no lo 47 00:04:08,750 --> 00:04:09,470 haré. 48 00:04:09,470 --> 00:04:15,380 Es el controlador de cambio de título que ahora debería estar vinculado al accesorio de texto de cambio aquí, en la entrada de 49 00:04:15,380 --> 00:04:16,040 texto, así 50 00:04:16,040 --> 00:04:22,190 que allí apuntaré al controlador de cambio de título y vincularé el valor de esa entrada, por supuesto, a mi valor de título 51 00:04:22,190 --> 00:04:25,070 porque ahí es donde guardo la entrada del usuario y 52 00:04:25,190 --> 00:04:33,050 con eso tenemos una entrada del usuario completamente funcional aquí donde también capturo los valores. Ahora con eso, podemos obtener el 53 00:04:33,050 --> 00:04:35,530 título, también tenemos lugar 54 00:04:35,570 --> 00:04:37,640 para guardar. 55 00:04:37,640 --> 00:04:40,110 Cada vez que presionamos este botón, quiero 56 00:04:40,190 --> 00:04:46,370 guardarlo, así tendré mi controlador de guardar lugar, que es una función que quiero vincular a este botón 57 00:04:46,370 --> 00:04:47,680 de guardar lugar, 58 00:04:47,720 --> 00:04:54,050 así que aquí, en lugar de tener esta función anónima vacía, apuntaré a guardar coloque el controlador en este 59 00:04:54,050 --> 00:04:58,920 botón de guardar lugar y allí, ahora quiero asegurarme de que este lugar se 60 00:04:59,030 --> 00:05:01,540 guarde y para esto, volveré a usar Redux. 61 00:05:01,910 --> 00:05:10,880 Así que instalaré Redux con npm install --save redux y también React Redux y también instalaré Redux Thunk para 62 00:05:10,880 --> 00:05:13,660 que podamos usar eso también. 63 00:05:13,670 --> 00:05:19,170 Por ahora no lo necesito porque no estoy hablando con un servidor, pero más tarde, una vez 64 00:05:19,170 --> 00:05:24,230 que agreguemos las funciones nativas del dispositivo, verá que también tenemos algunas funciones que son 65 00:05:24,230 --> 00:05:29,750 asíncronas y donde podríamos esperar a que se completen antes En realidad, enviamos una acción que es 66 00:05:29,750 --> 00:05:34,470 exactamente donde Redux Thunk puede ayudarnos. Por lo tanto, con estos tres paquetes instalados, ahora podemos configurar Redux.