Así que ya echamos un vistazo a un conjunto sólido de conceptos básicos que necesita para construir aplicaciones React Native, para trabajar
con estos bloques de construcción centrales, aunque
por supuesto muchas de las cosas aún no están claras, realmente no
hemos tenido una mirada más cercana a estilo y diseño, etc., pero una cosa que
definitivamente deberíamos hacer ahora también es explorar cómo puedes construir tus propios componentes porque hasta ahora, siempre hemos
trabajado en la aplicación. js y ciertamente no
creará aplicaciones más grandes en un solo archivo, ese
archivo se volvería súper grande después de
todo y si tiene un componente personalizado que planea repetir, en este momento tendríamos que copiar y
pegar nuestro código.
Así que creemos nuevos componentes y, por lo tanto, aquí en el proyecto, agregaré una nueva carpeta llamada componentes, el
nombre depende de usted, pero como planeo almacenar algunos componentes allí, el nombre tiene sentido para mí
y allí, yo desea crear un componente para el elemento de la lista y también uno para nuestra área de entrada.
Así que creemos dos archivos nuevos allí y tendré una convención de nomenclatura
para los archivos donde empiezo con mayúsculas y tendré mi GoalItem. js, es un archivo Javascript, por supuesto,
y mi GoalInput. archivo js. Ahora ambos mantendrán el componente React normal, así
que comencemos con el elemento objetivo y, por lo tanto, importe React desde React, tal como debe hacerlo en un proyecto React for web.
Luego, aquí, crearé mi componente funcional, elemento de objetivo que obtiene accesorios y que luego
debe devolver algunos jsx aquí, y exportaré esto como predeterminado, así.
Ahora el jsx que quiero renderizar tiene que usar componentes React Native u otros componentes personalizados que luego a su
vez usan componentes React Native y aquí iré
con este contenido que tenía aquí. Así que lo cortaré de la aplicación. js y devuélvelo aquí.
Ahora para usar esto aquí, tenemos que importar la vista y el texto, por
lo que estos dos componentes, desde React Native.
Así que importaremos la vista y el texto de React-Native aquí.
Además, estoy configurando algunos estilos y quiero usar la hoja de estilos,
así que también importaré esto aquí y luego configuraré mis estilos constantes, que podrías nombrar de manera diferente, por supuesto, con la creación de la
hoja de estilos y volveré a la aplicación. js y toma el estilo de mi elemento de lista aquí, córtalo desde allí y ve al elemento
de objetivo y agrégalo aquí a este objeto que paso a la hoja de estilo. crear.
Ahora, esto debería funcionar, pero, por supuesto, lo que estoy mostrando aquí ya no estará en los datos del elemento, en lugar de
eso, esperemos que simplemente obtengamos esto como accesorios, por lo que cualquiera de los accesorios apoya a los niños para que se pueda pasar entre la etiqueta
de apertura y cierre de nuestro componente personalizado o quizás accesorios. título, lo que quieras, un nombre de
utilería de tu elección entonces. Ahora podemos usar nuestro componente personalizado,
el elemento objetivo volviendo a la aplicación. js y aquí agregaré importar al elemento objetivo con una G mayúscula,
para que React reconozca esto como un componente personalizado de. / components / GoalItem, puede omitir el. js y ahora podemos usar el elemento
de objetivo aquí abajo en el elemento de representación como un componente personalizado, en este caso un componente de cierre automático porque como estoy
usando el título de accesorios y no los accesorios, no espero nada entre la
apertura y el cierre Etiquetas de mi componente personalizado. Sin embargo, espero un accesorio de título, así que configuremos esto aquí
con título y luego aquí, podemos apuntar a los datos del elemento, luego obtener acceso al elemento que es
un objeto donde tenemos una clave de valor y con eso, aún deberíamos ver lo mismo que antes si ingresamos algunos objetivos aquí, aprenda todo sobre rn, sí,
eso se ve bien, ahora con nuestro componente personalizado. Ahora, esta es una buena práctica para que también coloque la entrada
de texto y el botón o esta vista completa aquí realmente en nuestro componente de entrada de objetivos y, por supuesto, para
eso, también deberá conectar la comunicación entre la aplicación. El archivo js y el componente de entrada del objetivo
se informarán cuando los usuarios presionen este botón en el componente de entrada del objetivo y luego agreguen datos aquí en la
aplicación. archivo js.
Es también cómo lo haría en un proyecto React for web, por lo que si tiene experiencia con eso,
no debería ser un problema, de lo contrario lo haremos juntos en la próxima conferencia, pero si sabe cómo hacerlo, definitivamente intente
primero por tu cuenta ahora.