¿Tuviste éxito?
Hagámoslo juntos.
Creemos un nuevo componente aquí en la entrada de objetivo importando React from React y luego
aquí, nombraré esta entrada de
objetivo y me gusta esta sintaxis constante aquí, podría usar la entrada de objetivo de función
para crear su componente funcional, eso estaría bien también. Luego aquí, exportaré la entrada de objetivo predeterminada y ahora aquí, tenemos que
devolver algo y ese algo está al final de esta
vista con la entrada de texto y el botón.
Así que permítanme tomar esa vista completa, devolverla aquí entre paréntesis para que esté escrita en varias líneas y bien formateada y, por supuesto, ahora tenemos
que volver a importar cosas de React Native porque estamos usando un par de componentes de React Native , estamos usando el
componente de vista, estamos usando el componente de entrada de texto, estamos usando el componente de botón
y también quiero usar el componente de hoja de estilo para configurar mi
objeto de hoja de estilo.
Entonces, para eso, agreguemos estilos aquí con Stylesheet. crear, pasar un objeto a esa hoja de estilo. cree el método y, por
supuesto, tome los estilos de la aplicación. js, ese sería el contenedor de entrada y la entrada,
por lo tanto, corte ambos para que solo quede la pantalla aquí y vuelva a ingresar el objetivo, agregaré
ambos aquí a mi hoja de estilo para que esto vuelva a funcionar. Lo que no funcionará en este momento es que
cuando tocamos el botón, agregamos esto porque aquí, no estamos teniendo el estado en la entrada de objetivos y cuando toco el botón, en realidad
quiero hacer algo en la aplicación. js.
Entonces, antes que nada, necesitamos dividir el estado. El objetivo ingresado no debe administrarse en la aplicación. js, pero debe administrarse en
la entrada del objetivo porque allí es donde tenemos la entrada de texto
al final, que es donde el usuario ingresa el objetivo. Así que agreguemos la importación useState aquí en la entrada del objetivo y luego
agreguemos nuestra lógica de administración de estado aquí con el objetivo ingresado y establezcamos el objetivo ingresado que obtenemos de useState que inicializamos con una cadena vacía, agreguémoslo
aquí a la entrada del objetivo y desde la aplicación. js, también tomaré el controlador de entrada de objetivo,
lo cortaré desde allí y lo agregaré a la entrada de objetivo aquí,
por lo que esta función en una función que conectamos a onChangeText y ahora con eso, recuperar la entrada del
usuario debería funcionar nuevamente.
Ahora para el botón, cuando presionamos esto, quiero activar una función en la aplicación. js, quiero activar el controlador para agregar objetivos y esa función debería
permanecer aquí porque necesito administrar la lista aquí porque la aplicación. El archivo js es el único componente
que tendrá acceso a la entrada de objetivos y a la FlatList donde sacamos los objetivos y,
hablando de eso, ya podemos importar entradas de objetivos allí en la aplicación. js desde la entrada de objetivo de componentes y
agregue la entrada de objetivo como un componente aquí arriba de FlatList, pero nuevamente, ahora tenemos que poder averiguar cuándo
se presiona un botón en este componente y en React, lo
hace pasando la función que el niño El componente debería ejecutarse eventualmente como un accesorio para el
componente hijo.
Así que aquí, podríamos agregar onAddGoal, ese nombre depende totalmente de usted, es un
accesorio que usted
define y esto apunta a agregar controlador de objetivos.
Esto por sí solo no hará nada, pero onAddGoal ahora se recibirá como un accesorio dentro de la entrada del objetivo y
apuntará a una función, lo que significa que podemos ejecutarla como una función allí.
Entonces, en la entrada de objetivos, allí en la prensa,
simplemente puedo señalar el accesorio. onAddGoal, ¿verdad?
Porque onAddGoal es ese nombre de utilería que estoy configurando aquí en la aplicación. archivo js, que se recibe dentro de la
entrada de objetivo en el objeto de accesorios que estamos obteniendo en cada componente funcional y puntos onAddGoal en
una función, por lo que podemos pasarlo a
onPress para que onPress o React Native sepan que debería llamar a esta función cuando presionamos
el botón,
así es como se hace esto en React Native.
Aún así, tendríamos un problema porque al agregar el controlador de objetivos, me refiero al objetivo ingresado y que anteriormente se administró aquí pero ya
no lo es, logramos el objetivo ingresado, que
es la entrada de texto ingresada por el usuario en el objetivo entrada ahora y no en la
aplicación. js.
Por lo tanto, agregar un controlador de objetivos ahora debería recibir un argumento que es el título del objetivo o lo
que
quieras nombrar, este nombre depende de ti y eso es lo que almacenamos como valor aquí.
Ahora tenemos que asegurarnos de reenviar este argumento cuando el objetivo de agregar se ejecuta en la entrada del objetivo.
Entonces, eso sucede aquí en una prensa y allí apuntamos a esto para configurar también un argumento
que eventualmente debería pasar, obtenemos dos opciones,
la opción uno es que configuremos una función de flecha anónima aquí.
Ahora esta función de flecha se ejecutará eventualmente y, por lo tanto, ahora podemos agregar
paréntesis aquí porque ahora
no se ejecutará cuando se procese primero, en cambio, esta función de flecha se registrará como
una función que se
ejecutará para onPress y ahora aquí en onAddGoal, podemos reenviar el objetivo ingresado, por ejemplo, que funcionaría o, alternativamente, no
usamos este enfoque de función de flecha anónima y, por lo tanto, no podemos
agregar paréntesis aquí, pero luego podemos usar otra función de Javascript, en funciones a las que podemos llamar bind to preconfigurar
algunos argumentos que eventualmente deberían pasarse cuando se ejecuta esta función.
El primer argumento es siempre a qué debe referirse esta palabra clave.
Esto no nos importa aquí, por lo que podemos escribir esto, pero el segundo argumento aquí o todos
los demás argumentos a partir de entonces serán en realidad los argumentos recibidos por esta función cuando se llama y
se activa al presionar un botón.
Estos son ahora los argumentos que se reenvían a la función onAddGoal, que al final es solo nuestra
función de agregar controlador de objetivos y allí, necesitamos el título del objetivo,
por lo que debemos
reenviar esto, por lo tanto, aquí, ahora puedo configurar objetivo como argumento de reenvío y esa es
la sintaxis normal de Javascript de vainilla aquí.
Y ahora con esto, se está procesando, se ve bien
y si entro
en Learn React Native, todavía obtengo resultados aquí. Para que todo funcione, pero ahora dividimos
esta aplicación en múltiples componentes, que es lo que normalmente haces en React apps y React
Native, tal como lo haces en React para aplicaciones web porque mantiene tus componentes más ágiles, más enfocados
y tu código más organizado y más fácil de entender