Entonces, en una nueva pantalla de lugar, quiero poder agregar un lugar y para eso, primero
agregaré el componente de entrada de texto que, por supuesto, no tiene nada que ver con las características
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
y, por lo tanto, también agregaré un componente de texto aquí donde digo título, que debería actuar como
una etiqueta para
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
va a usar el usuario, pero agregaremos más que solo un título, también agregaremos un selector de imágenes
y un selector de lugar en todo este módulo y, por lo tanto, poder desplazar esta página es realmente importante.
Así que ahora tenemos esa etiqueta de título y la entrada de texto que le pertenece, que por ahora
no hará nada, pero que pronto permitirá al usuario ingresar un título.
También quiero asegurarme de que, por supuesto, este formulario se puede
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
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
importando los colores constantes aquí y onPress luego enviará este formulario, por
el momento no estoy haciendo nada aquí.
La entrada de texto, por supuesto, también se puede configurar, aunque la configuración más básica está bien aquí, no
necesito cambiar el tipo de teclado, etc., pero algunos estilos serían buenos y eso es realmente cierto
para toda la página.
Entonces, para esta vista aquí, por ejemplo, quiero agregar un estilo de formulario aquí, por lo que un identificador de estilo de
formulario para poder diseñar el formulario general. Para el título
aquí, agregaré un estilo de etiqueta y para la entrada de texto, también quiero agregar mis propios estilos y usaré la entrada
de texto del identificador aquí. Con eso, vamos a la hoja de
estilo y asegurémonos de agregar un poco de estilo aquí. Para el formulario general, agregaré un margen en
todas las direcciones de 30 para que no se asiente directamente en los bordes de la pantalla.
Para la etiqueta,
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
de espacio entre la etiqueta y la entrada de texto y en la entrada
de texto en sí, para que sea para poder verlo, agregaré un borde inferior y estableceré su color a este
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
parte inferior, así que para el contenido debajo de él, el botón en este momento de 15 y lo
que también agregaré aquí es un poco de relleno vertical, solo cuatro y un poco
de relleno horizontal, solo dos. Si guardo eso, echemos un vistazo.
Si voy a la pantalla de nuevos lugares, esto es lo que tengo y esto no se ve muy
mal, también en Android, esto es algo con lo que podemos trabajar, supongo y esto es algo en lo que podemos construir.
Ahora, por supuesto, esta entrada no está
haciendo nada, por supuesto, quiero capturar lo que ingresó el usuario y mantenerlo simple, aquí no agregaré una validación súper compleja
ni nada de eso, en
su lugar simplemente capturaré el valor y eso es. Por supuesto, puede agregar validación, puede agregar un
reductor como
lo hicimos en el módulo de entrada del usuario donde aprendió cómo puede administrar formularios
más complejos de todas las formas, aquí nuevamente lo mantendré muy simple y, por lo tanto, solo importaré use el enlace de
estado de Reaccionar aquí para que pueda capturar mis valores aquí.
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
en una cadena vacía y luego agregaré una función aquí,
el controlador de cambio de título, que recibe el texto que ingresó el usuario y donde l Luego
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
haré.
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
texto, así
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
porque ahí es donde guardo la entrada del usuario y
con eso tenemos una entrada del usuario completamente funcional aquí donde también capturo los valores. Ahora con eso, podemos obtener el
título, también tenemos lugar
para guardar.
Cada vez que presionamos este botón, quiero
guardarlo, así tendré mi controlador de guardar lugar, que es una función que quiero vincular a este botón
de guardar lugar,
así que aquí, en lugar de tener esta función anónima vacía, apuntaré a guardar coloque el controlador en este
botón de guardar lugar y allí, ahora quiero asegurarme de que este lugar se
guarde y para esto, volveré a usar Redux.
Así que instalaré Redux con npm install --save redux y también React Redux y también instalaré Redux Thunk para
que podamos usar eso también.
Por ahora no lo necesito porque no estoy hablando con un servidor, pero más tarde, una vez
que agreguemos las funciones nativas del dispositivo, verá que también tenemos algunas funciones que son
asíncronas y donde podríamos esperar a que se completen antes En realidad, enviamos una acción que es
exactamente donde Redux Thunk puede ayudarnos. Por lo tanto, con estos tres paquetes instalados, ahora podemos configurar Redux.