bienvenido a mi curso definitivo de reacción nativa
Amash. No quiero ser tu instructor en este curso,
aprenderás cómo crear aplicaciones móviles rápidas y hermosas usando reacción nativa.
Supongo que en este curso no sabes nada sobre reaccionar nativa y quieres para aprender
todo desde cero, explicaré cada línea de código correctamente para que aprendas
y comprendas todos los principios subyacentes. Ahora no vas a trabajar en
una aplicación ficticia de tareas pendientes ni en una calculadora, trabajarás en una aplicación real y completa. aplicación
llamada listo, esta aplicación es un mercado para vender estas cosas, ya
no necesitas nada, ya terminaste, aquí está la pantalla frontal de nuestra
aplicación, podemos iniciar sesión o registrarnos, iniciemos sesión con mi cuenta aquí, puedes ver todos
los artículos que la gente está vendiendo, por ejemplo, tienes a este tipo aquí que está
vendiendo su chaqueta roja por $ 100, por supuesto, todos estos son datos ficticios que
he generado.
Ahora podemos tocar un artículo para ver más detalles al respecto. Puedes ver
quién es el vendedor. podemos ver dónde se encuentra el artículo en el mapa. También podemos
enviar un mensaje al vendedor y esto enviará una notificación automática al
dispositivo móvil objetivo. Ahora podemos desplegar esto para cerrarlo. También podemos
desplegar la lista para actualizar. Es como las aplicaciones que usas a diario. Podemos
filtrar la lista y mirar las cámaras que están a la venta. Podemos agregar una nueva
lista. Primero seleccionamos una imagen. Podemos agregar una segunda imagen. Hasta tres imágenes.
Ahora vamos a darle. un título, mi primer artículo, le damos un precio de $ 99,
ahora vamos a asignarlo a una categoría, así que pongámoslo en la categoría de
muebles. Ahora, cuando nos publique en el servidor, verá una
barra de progreso y una hermosa animación al final. final, eche un vistazo,
listo, aquí están los listados que he publicado. También tiene la página de mi cuenta
donde podemos acceder a mis listados y a los mensajes que he recibido.
Ahora podemos
deslizar un elemento hacia la izquierda para eliminarlo al igual que las aplicaciones. que usas a diario,
así que si sigues este curso hasta el final, dominarás React
Native y podrás crear aplicaciones móviles con confianza. ¿Estás
emocionado de crear esta aplicación conmigo y luego saltar y obtener Para comenzar a tomar este curso, no necesita estar
familiarizado con React Native o el desarrollo móvil en general, pero necesita
saber que JavaScript no reacciona porque React Native se basa en React, pero
en lugar de apuntar al navegador, se dirige a plataformas móviles que usted no tiene.
No es necesario
ser un experto en reacción, pero necesita conocer todos los conceptos esenciales, como los
componentes, el estado de los accesorios JSX, etc. Si quieres aprender a
reaccionar, tengo un tutorial de dos horas en mi canal de YouTube, así como un curso completo de 13
horas que enseña. Encontrarás todo, desde lo básico hasta conceptos más avanzados.
Pondré los enlaces a continuación si estás interesado, ¿qué es reaccionar
nativo? ¿Es la herramienta adecuada para ti o no? React Native es un marco
para crear aplicaciones nativas para iOS en Android usa JavaScript, por lo que si conoce
JavaScript, puede usar sus habilidades de JavaScript para crear aplicaciones nativas reales para iOS
y Android.
Estas aplicaciones son verdaderamente nativas, por lo que no son aplicaciones web que parecen
una aplicación móvil, por lo que con React Native no necesita hacerlo. Conozca la programación de iOS o Android,
a menos que desee crear una aplicación realmente compleja y necesite hablar
directamente con la API nativa de esta plataforma, en su mayor parte no
necesita hacerlo, por lo que podemos escribir prácticamente todo el código de su aplicación.
en
JavaScript y compartirlo en iOS y Android, es por eso que muchas empresas
hoy en día prefieren crear sus aplicaciones usando reaccionar nativo porque no
necesitan contratar dos equipos separados de desarrolladores que mantienen dos
bases de código diferentes, una para iOS escrita en Swift o Objective-c y el otro para Android
y Java o Cartland. Ahora uno de los conceptos erróneos más comunes sobre reaccionar nativo
es que no se puede utilizar para crear aplicaciones serias, por ejemplo, tenemos a este
tipo aquí, su nombre es John Smith, es un desarrollador con una tiene muchas
opiniones firmes, él cree que la única manera de construir algo serio es usando
los idiomas nativos en las herramientas, eso no es cierto.
Aquí hay cinco aplicaciones creadas con reacciones nativas Facebook Instagram Pinterest
Skype uber AIDS y muchas, muchas más, si tienes un idea de que desea convertir
en una aplicación real utilizando sus habilidades de JavaScript. React Native es la mejor herramienta para
tener su caja de herramientas. Hay dos formas de crear aplicaciones React Native.
Podemos usar React Native o Expo Expo es un conjunto de herramientas y un
marco.
que se encuentra encima de reaccionar nativo y nos oculta mucha complejidad,
hace que sea increíblemente rápido y fácil crear aplicaciones nativas de reacción si
nunca ha realizado desarrollo móvil antes de la Expo es el camino a seguir, puede
crear y ejecutar su primera aplicación dentro En unos minutos, la otra opción es usar la
CLI nativa de reacción o la interfaz de línea de comandos. Cuando creamos un proyecto con la
CLI nativa de reacción, nuestro proyecto se verá así,
por lo que tenemos estas carpetas Android e iOS. Estos son proyectos nativos de Android e iOS que
también tenemos. nuestro código JavaScript en un sitio que se puede compartir en
estas dos plataformas, por lo que este enfoque es adecuado para personas que tienen alguna
experiencia con la programación de iOS o Android en este curso. Asumo que
no tienes ninguna experiencia previa en desarrollo móvil, por lo que Usaremos
Expo, déjame crear un proyecto con Expo.
No vamos a tener estos subproyectos de Android e
iOS. Solo tenemos código JavaScript, lo que significa que no podemos trabajar
directamente con la API nativa de estas plataformas. Estamos limitados a lo que
ofrece Expo. nosotros en términos de características nativas, honestamente, esto no es un problema para
muchas aplicaciones porque Expo nos brinda muchas características nativas para que podamos crear una
aplicación realmente completa usando solo expo y eso es lo que les mostraré en esto.
Por supuesto, pero si tienes algo de experiencia con el desarrollo móvil y
quieres tener algo de flexibilidad adicional, si quieres personalizar o modificar algunos
componentes nativos, siempre puedes expulsarlos de la exposición y obtener acceso a los
proyectos subyacentes de iOS y Android. Te mostraré cómo. Para hacerlo más adelante en
este curso, a continuación te mostraré cómo configurar tu
entorno de desarrollo. Bien, lo primero que quiero que hagas es asegurarte de que
estás ejecutando la versión 12 del nodo o superior, aquí en la terminal. ventana
ejecutemos node dash V Estoy ejecutando la versión del nodo 12 punto catorce punto uno
asegúrese de estar ejecutando la versión 2 del nodo o superior ahora instalemos exponga CLI
globalmente para que NPM si está en una Mac y no haya configurado los permisos
correctamente tienes que anteponer esto con sudo para que npm install – g expo – CLI tarde un poco, así que voy a
pausar la grabación.
Bien, Expo CLI está instalado,
es posible que recibas algunas advertencias, no te preocupes, no lo hacen. Realmente no importa,
así que con Expo CLI podemos crear y ejecutar fácilmente un proyecto nativo de reacción. Ahora
también debes instalar el cliente experto en tu teléfono. Esta es una aplicación que
debes descargar de la App Store. Está disponible para iOS y Android. Con
esto podemos Ejecute fácilmente nuestra aplicación en un dispositivo físico ahora
como mi editor de código. Voy a usar el código de Visual Studio o el código PS. Puede usar cualquier
editor de código que prefiera, pero es más fácil si descarga el código vs y codifica
conmigo porque durante todo el curso. Te mostraré muchos consejos
y trucos, muchos atajos para escribir código rápidamente. Te encantarán estos consejos
para que puedas descargar vs código desde el código que Visual Studio comunica como escuchar vs
código, usaremos muchos de extensiones, estas extensiones son opcionales
pero facilitan nuestro trabajo, déjame mostrártelo, así que aquí busquemos reaccionar
nativo.
La primera extensión que usaremos son las herramientas nativas de reacción,
construidas por Microsoft y con esto podemos depurar nuestra reacción. aplicaciones nativas
dentro vs código es muy popular la segunda extensión que vamos a usar es
reaccionar barra nativa reaccionar barra Fragmentos de Redux esto nos brinda un montón de
fragmentos de código para que podamos escribir algunos atajos y generar código muy rápido.
Me encanta esta extensión. También uso más bonito para formatear mi código, así que
busquemos más bonito, ahí tienes un formateador de código más bonito hecho por Spen
Peterson. Es una extensión muy popular. Probablemente la tengas tú mismo. También uso el
tema de íconos de material, echemos un vistazo con esta extensión
instalada, obtenemos íconos bonitos. en nuestro proyecto, los archivos en nuestro proyecto
obtendrán íconos como estos dependiendo de su tipo.
Ahora apliquemos una configuración para que en
el momento en que guardemos nuestros cambios, nuestro código se vuelva a formatear, por lo que en la parte superior vamos a
preferencias y luego a la configuración buscamos formato en guarde, así que asegúrese de habilitar
esta opción para que cada vez que presione ctrl + S o comando + S vs code use
más bonito para formatear su código ahora que hemos configurado nuestro entorno de desarrollo,
creemos nuestro primer proyecto de Expo, así que aquí, en la ventana de terminal, escriba
expo y listo, ese es el nombre de la aplicación que vamos a crear. Puede
llamarla como quiera, así que sigamos con esto. Ahora tenemos que elegir un
flujo de trabajo para crear esta aplicación. Podemos usar uno de los flujos de trabajo administrados. o uno
de los flujos de trabajo simples, si usa una exportación de flujo de trabajo administrado, se
encargará de toda la complejidad detrás de escena, por lo que con un flujo de trabajo administrado
no veremos esos proyectos de iOS en Android, solo tenemos un proyecto de JavaScript puro
si use un flujo de trabajo simple, vamos a tener un proyecto nativo de reacción básico,
por lo que tendremos esos proyectos de iOS en Android en este curso.
Voy a usar
esta plantilla en blanco, también tenemos una plantilla con texto mecanografiado, pero
no voy a Úselo en este curso porque quiero agregar complejidad adicional,
así que usemos la plantilla de administración de flujo de trabajo en blanco. Esto tomará un tiempo, así que
pausaré la grabación. Nuestro proyecto está listo, así que
vayamos a esta carpeta y luego abrimos. en vs code ejecuta esta aplicación, déjame darte una
descripción general rápida de lo que tenemos en este proyecto, así que tenemos esta carpeta de activos, aquí es
donde colocamos todas las imágenes, archivos de audio, videos, etc., cualquier tipo de activo que
desees agrupar. nuestra aplicación ahora también tenemos después de J s,
este es un componente nativo de reacción básico, por lo que en la parte superior estamos importando reaccionar,
también estamos importando un par de componentes de reacción nativa, por lo que esta
vista que tenemos aquí es como un div en la web.
world y text se usan para
mostrar texto en la pantalla, por lo que en React Native no tenemos
elementos HTML como el ancla de párrafo div, etc., tenemos que usar los bloques de construcción
o los componentes proporcionados por un React Native. Aquí hay un ejemplo. esta aplicación
es un componente de función, por lo que, de forma predeterminada, reaccionar de forma nativa usa componentes de función
porque son más simples y más livianos.
Puede usar componentes de clase,
pero es mejor usar componentes de función, así que aquí devolvemos una
expresión JSX y tenemos una vista que es como un div, esta vista tiene un estilo que
veremos más adelante y dentro de esta vista tenemos este componente de texto para
mostrar este texto en la pantalla. ¿ Qué es este estilo aquí?
Bueno, estamos haciendo referencia a este objeto. Estilos del contenedor que estamos. creando el
objeto Stars aquí usando el objeto de hoja de estilo, entonces llamamos al
método create y pasamos un objeto, este objeto tiene una propiedad llamada contenedor que
contiene todos los estilos para nuestro contenedor ahora, si miras el nombre de
tus Stars, te resultan familiares, por ejemplo. tenemos un color de fondo, esto es
como un atributo CSS, pero no es CSS, es solo una propiedad simple de JavaScript
cuando compilamos nuestra aplicación, reaccionamos de forma nativa, traducirá estas propiedades
y los componentes que estaban usando a sus widgets nativos, por ejemplo, esta vista
aquí si Si creamos esta aplicación para iOS, esta vista se asignará a la vista de UI,
si la creamos para Android, se asignará a la vista de Android, por lo que con estos
componentes podemos representar nuestra UI de forma abstracta o independiente de la plataforma
cuando comparamos nuestra aplicación.
reaccionar nativo asignará estos componentes a sus
widgets nativos, por eso las aplicaciones que creamos con reaccionar nativo son
aplicaciones nativas reales. Ahora debemos abrir una ventana de terminal para iniciar el
servidor Expo para servir nuestra aplicación, así que en la parte superior vamos a la vista. menú mire el
acceso directo para la ventana de terminal en Mac es control y acento grave, así que abramos
la ventana de terminal aquí escribimos NPM iniciar
ahora esto abre nuestro navegador apuntando a esta dirección el número de puerto puede ser
diferente en su máquina dependiendo de lo que esté ejecutándose, esto es lo que
llamamos paquete Metro, es el paquete JavaScript para reaccionar nativo, por lo que es
responsable de compilar todos nuestros archivos JavaScript en un solo archivo.
Ahora
aquí a la izquierda tenemos algunos comandos que podemos ejecutar nuestra aplicación en un dispositivo Android
o emulador podemos ejecutarlo en un simulador de iOS podemos
ejecutarlo en un navegador web podemos enviar un enlace a nuestra aplicación por correo electrónico para que otras
personas puedan probarla también podemos publicar nuestra aplicación en una exposición para que cualquier persona en el mundo
pueda verla Usar el cliente expo es mucho más rápido y fácil que pasar
por las tiendas de aplicaciones si ha realizado algún tipo de desarrollo móvil antes de
saber que pasar por las tiendas de aplicaciones es muy tedioso, hay tantos pasos que
debe seguir con expo que no tenemos Para preocuparnos por esto, simplemente podemos
publicar nuestra aplicación en la Expo y cualquier persona en el mundo puede verla fácilmente. Por
supuesto, esto es puramente para desarrollo y pruebas, no para producción, pero hablaremos
de eso más adelante en esta sección, por lo que este es el paquete Metro ahora si regrese a
la ventana de la terminal en vs code, puede ver estos comandos y su acceso directo.
Estos son los mismos comandos que vio en el paquete Metro, por ejemplo, podemos
presionar a para ejecutar nuestra aplicación en un emulador de Android o I para ejecutarla en un iOS.
simulador y aquí es donde aparecerán los registros de nuestra aplicación, por lo que si algo sale
mal, este es el primer lugar donde queremos ver todos los errores y los mensajes de registro
aparecerán aquí, por lo que queremos tener esta ventana de terminal abierta en todo momento.
Ahora que el paquete Metro se está ejecutando a continuación, te mostraré cómo ejecutar
nuestra aplicación en un simulador de iOS.
En esta lección, te mostraré cómo
ejecutar nuestra aplicación en un simulador de iOS. Para hacer esto, necesitarás una Mac. Si no tienes
una Mac, no te preocupes, aún puedes ejecutar la aplicación en tu teléfono, ya sea un iPhone
o un teléfono Android. También puedes ejecutar la aplicación en un dispositivo virtual Android que te
mostraré en el En la próxima lección, quiero que instales Xcode.
Puedes
obtenerlo en la App Store, así que abre nuestra App Store y busca Xcode aquí.
Puedes obtener la última versión. Xcode es una aplicación grande, por lo que instalarla llevará
un tiempo, tal vez entre 20 y 30. minutos, dependiendo de
su conexión a Internet, una vez que instale Xcode, ejecútelo y luego vaya a las
preferencias de Xcode en esta ventana, vaya al panel de ubicaciones
y asegúrese de haber instalado las últimas herramientas de línea de comandos.
Ahora podemos
iniciar el simulador de analista, así que cerremos esta ventana. vaya al
simulador de herramientas de desarrollador abierto Xcode, así que aquí está nuestro simulador de iPhone, podemos
moverlo, podemos cambiar su tamaño, podemos cambiar el tipo de este dispositivo yendo al
archivo, abrir dispositivo en iOS, puede ver varios dispositivos iOS, por ejemplo,
podemos iniciar un iPhone.
8 ahora iniciará un segundo simulador, desafortunadamente al
momento de grabar este video, el experto se confunde cuando tienes varios
simuladores de iOS ejecutándose, así que cerraré este iPhone 8. Voy a usar este
iPhone 11. Ahora vamos al paquete Metro. y a través de la aplicación
y el simulador de iOS también podemos escribirlo en código vs
presionando I en la ventana de la terminal, así que esto iniciará nuestro proyecto en el
simulador de iOS la primera vez que verá este mensaje apareciendo abierto y
expo, así que abramos. Entonces este es el cliente experto que
instalas en tu teléfono. Cerremos el mensaje de bienvenida y aquí está el resultado de
nuestra aplicación. Tenemos este texto en el centro de la pantalla. Ahora déjame mostrarte
algo realmente interesante. Quiero poner esto en el lado y abra nuestro proyecto en el
lado izquierdo ahora cambiemos el texto aquí a hola mundo ahora, en el momento en que guarde los
cambios, nuestra aplicación se actualizará, eche un vistazo,
guarde y aquí está el mensaje de hola mundo, esta es una de las características poderosas de
reaccionar nativo Se llama actualización rápida para que podamos ver nuestros cambios tan pronto como guardemos.
No tenemos que esperar a que finalicen las facturas nativas.
Ahora en este simulador del IRS
podemos abrir el menú de desarrollador presionando comando + D. Desafortunadamente,
esto no funciona. mi misión ya no creo que esto sucedió después de que actualicé
mi Xcode, así que descubrí que para que esto funcione tengo que presionar control D primero y
luego el comando D, así que este es el menú de desarrollador del que estaba hablando, esto es parte del
cliente experto, así que aquí estamos. Podemos recargar nuestra aplicación, por lo que en caso de que algo salga mal y
la actualización rápida no funcione, podemos activar manualmente una recarga.
También podemos
copiar el enlace al portapapeles. Podemos ir a casa y aquí podemos ver otros
proyectos de exposición en los que estamos trabajando. En este momento tenemos un solo proyecto y está aquí,
así que volvamos a él para que pueda abrir el menú de desarrollador presionando Ctrl +
D y luego el comando D así, así que a continuación se trata del simulador de iOS que
voy a mostrar. En esta lección, le mostraré cómo ejecutar esta aplicación en un dispositivo virtual Android. Le mostraré cómo
configurar un dispositivo virtual Android para ejecutar sus aplicaciones ahora, mientras que siempre puede ejecutar
sus aplicaciones nativas de reacción en su teléfono durante el desarrollo. Es mucho. Es más fácil
ejecutarlo en un simulador o en un dispositivo virtual porque no tienes que
tocar constantemente tu teléfono. Para configurar un dispositivo virtual Android, primero necesitamos
instalar Android Studio. Puedes obtenerlo en desarrollador.android.com.
Continúe y descargue la última versión de Android Studio.
La primera vez que
ejecute Android Studio, verá un asistente de configuración como este, así que haga clic en Siguiente para
continuar con la instalación estándar porque esto instalará todos los
componentes necesarios. cree un dispositivo virtual Android, así que haga clic en
siguiente. Aquí puede seleccionar un tema claro u oscuro. Realmente no nos importa
esto porque no vamos a desarrollar en Android Studio, así que hagamos clic en siguiente y
ahora mire los componentes que van a descárguelo, tenemos un
emulador de Android, herramientas de compilación de SDK de Android, plataforma de SDK de Android, herramientas de plataforma de SDK de Android,
acelerador emulador Intel x86, así como muchos otros componentes, estos son
los componentes que necesita para crear un dispositivo virtual de Android si estos
componentes no figuran aquí.
No te preocupes, te mostraré cómo
instalarlos más tarde, pero si sigues con esta instalación estándar no deberías tener
ningún problema, así que hagamos clic en finalizar. Esto llevará un tiempo, así que
pausaré la grabación. Android Studio está listo ahora,
vayamos al menú de configuración y seleccione SDK manager. Si sigue la
instalación estándar aquí, debe tener todos los componentes necesarios, por lo que en la
pestaña de plataformas SDK debe tener la última versión estable de Android al momento de
grabar esto. video que tiene menos de diez o cola en las herramientas SDK, debe tener
herramientas de compilación de SDK de Android, así como herramientas de plataforma SDK de Android del emulador de Android
y acelerador de emulador de Intel. Si estos componentes no están seleccionados,
selecciónelos, haga clic en Aceptar y luego Android Studio los instalará. Ahora, si
estás en una Mac o Linux, hay una unidad de pasos adicional a seguir.
Si eres un
usuario de Windows, no tienes que seguir este paso, pero mira el resto de
este video porque hay más pasos que necesitas. para seguir, así que dirígete a Doc's
that Expo en i/o ahora a la izquierda, en administrar el flujo de trabajo,
puedes encontrar todas las instrucciones oficiales para instalar un
dispositivo virtual Android, por lo que casi hemos terminado el primer paso, por lo que instalamos
Android Studio ahora en la parte inferior. del primer paso,
puede encontrar el paso adicional para usuarios de Mac y Linux, por lo que necesita agregar 100 SDK
a su ruta, por lo que debe editar su perfil de bash o bash RC y agregar esta
declaración de exportación, así que copiemos esta declaración de exportación
ahora abra una terminal ventana y use su editor favorito para editar su
perfil de bash, así que uso el código de Visual Studio.
Ahora vamos a nuestro directorio de inicio y abrimos –
debajo del perfil de línea, así que aquí está mi perfil de bash al final del
perfil de bash. Voy a pegar lo que copié. la documentación oficial
de Expo, así que estamos exportando el SDK de Android y
aquí está la ruta al SDK de Android, pero debe reemplazar esta ruta con la ruta
del SDK de Android en su máquina, ¿cómo lo hacemos muy fácil? Regrese a Android Studio,
vayamos a configurar Administrador de SDK aquí podemos encontrar la ruta al SDK de Android, así que
copie la parte posterior a su editor favorito. Reemplacemos la ruta con blanco.
Copie ahora aquí en la documentación de la Expo. Si está en Mac, hay un paso adicional
que debe seguir.
para agregar herramientas de plataforma a una ruta también, así que copie
la segunda declaración de exportación y péguela al final de su perfil de bash. Ahora, una vez
más, necesitamos reemplazar la ruta al SDK de Android, así que eliminemos esto y usemos
lo que tenemos aquí, así que aquí está. la biblioteca de ruta completa
herramientas de la plataforma SDK de Android está bien, guarde los cambios ahora en mi máquina. Estoy usando zs8 o z shell.
esta es la elegante ventana de terminal que tengo aquí para esto. Necesito editar un segundo
archivo que está en el directorio de inicio. z SH RC ahora de regreso al perfil de bash. Voy
a copiar estas dos declaraciones de expertos y pegarlas en Z shrc, así que cópielas
y avance aquí, guarde los cambios ahora, de regreso en la ventana de la terminal, en este
punto deberíamos poder ejecutar una base de datos si recibes un error que dice comando no
encontrado, eso significa que no seguiste uno de estos pasos correctamente. Bien, hemos
terminado con las instrucciones para usuarios de Mac y Linux, por lo que todos deben seguir el resto
de este video para configurar un dispositivo virtual Android.
aquí en Android Studio
vamos a configurar un administrador de video si es la abreviatura de dispositivo virtual Android
en la pantalla hagamos clic en crear dispositivo virtual aquí debemos seleccionar el
hardware que queremos emular tenemos tantas opciones tenemos varios
dispositivos de píxeles tenemos Nexus y así sucesivamente, si no sabes por dónde empezar,
normalmente el último dispositivo de píxeles es un buen lugar para comenzar. Prefiero usar el que
tiene Play Store instalado, así que iré con el píxel tres. Puedes ver
el tamaño, la resolución y densidad de este dispositivo así que hagamos clic en siguiente ahora aquí
debemos seleccionar la imagen o el sistema operativo que queremos instalar en
este dispositivo puede seleccionar cualquiera de las imágenes aquí en la pestaña recomendada
Prefiero usar la última versión estable que a menudo es El segundo elemento aquí, así que
vayamos con esto ahora.
Android Studio está dentro de esta imagen para instalarlo en nuestro
hardware emulado. Tomará un tiempo, así que voy a pausar la
grabación. Bien, hemos terminado con el paso, así que
hagamos clic en A continuación, como aquí, podemos darle un nombre a este dispositivo.
Voy a usar el valor predeterminado que especifica el tipo de hardware y la imagen que
hemos instalado en él. Ahora hagamos clic en finalizar.
Bien, nuestros dispositivos virtuales están listos, podemos ejecutarlo haciendo clic en esto.
botón de reproducción aquí, así que aquí está nuestro dispositivo virtual o emulador, podemos simplemente arrastrar los lados
y cambiar su tamaño, de modo que cuando lo haga más pequeño y lo coloque a
un lado ahora para ejecutar nuestra aplicación en nuestro nuevo dispositivo virtual Android, volvemos al
paquete metro y en Al seleccionar la izquierda ejecutar en un dispositivo o emulador Android, también podemos ir a la ventana de nuestra terminal
y presionar a para ejecutar esta aplicación en nuestro emulador de Android, pero asegúrese de que el
emulador esté funcionando antes de presionar a.
Ahora aquí puede ver a ese
experto. El cliente se instaló en el dispositivo,
por lo que ahora Metro Bundler está creando nuestro paquete de JavaScript, así que aquí está el
cliente experto y, como puede ver, está descargando nuestro paquete de JavaScript y aquí está nuestra aplicación nativa de reacción. Ahora aquí
tenemos Hola mundo porque en la lección anterior cambié este mensaje.
Si te saltaste la lección anterior, déjame mostrarte algo realmente interesante,
así que puse el vehículo en el lado izquierdo y ahora cambiemos este mensaje a hola
reaccionar nativo.
Ahora, en el momento en que guarde este cambio, nuestra aplicación se actualizará
de inmediato. Échale un vistazo, así que guarda. y aquí está hola reaccionar nativo, esta es la
belleza de reaccionar nativo, así que vemos nuestros cambios en el momento en que los guardamos, no tenemos que
esperar a que finalicen las facturas nativas, por lo que esto hace que el desarrollo sea increíblemente
rápido y fácil ahora en este dispositivo virtual que podemos traer. abra el menú de desarrollador
presionando comando + M en Mac o ctrl + M en Windows, así que aquí está el menú de desarrollador.
Podemos recargar manualmente la aplicación en caso de que la recarga automática no funcione. Podemos
copiar el enlace al portapapeles. Podemos ir a casa
aquí. puede ver la lista de proyectos en los que estamos trabajando actualmente, solo tenemos un
proyecto terminado que está alojado y esta dirección Expo
aquí está la dirección IP de mi máquina y aquí está el número de puerto ahora podemos seleccionarlo
y regresar a nuestra aplicación una vez más podemos abrir el menú de desarrollador presionando
comando en M en Mac o ctrl LM en Windows
aquí tenemos algunos otros elementos, estos son su depuración deportiva, hablaremos de
ellos más adelante en esta sección, a continuación voy para mostrarte cómo ejecutar esta aplicación en
un dispositivo físico real, como te dije antes durante el mapa de Duvall, es mucho
más fácil probar tu aplicación y un dispositivo virtual o un simulador porque no
tienes que tocar constantemente tu teléfono, sin embargo, los simuladores sí.
Bueno, los simuladores
no siempre funcionan como un dispositivo real y ciertas funciones no están
disponibles en estos simuladores, por lo que desea probar su aplicación en un dispositivo físico real,
ya sea un iPhone o un teléfono Android, por lo que el primer paso es
instalar Expert en su teléfono, puede obtenerlo en la App Store
una vez que lo instale para ejecutar su aplicación en su teléfono, todo lo que tiene que hacer es ir al
paquete Metro y mirar este código QR, así que apunte su teléfono a este código QR
y abra la cámara.
aplicación, su teléfono recogerá esto y ejecutará su aplicación en
Expo, tan simple como eso, solo asegúrese de que su teléfono esté conectado a la misma
red inalámbrica que su computadora, de lo contrario, esto no funcionará ahora
cuando esté ejecutando su aplicación en una computadora real. dispositivo físico, puede abrir el
menú de desarrollador simplemente agitando su dispositivo, de modo que cuando agite su dispositivo
verá algo como esto, esto es lo que llamamos menú de desarrollador en los próximos videos. Voy a
mostrarle algunos. herramientas y técnicas para depurar sus aplicaciones nativas de reacción,
tenemos algunas herramientas diferentes aquí, puede elegir la herramienta o las herramientas que
prefiera y realmente depende de lo que quiera hacer, por lo que la forma más sencilla de depurar
nuestras aplicaciones nativas de reacción es usar buenas declaraciones de punto muerto de la consola,
así que aquí en el componente de la aplicación podemos hacer un blog constante y decir que los
ejecutores de la aplicación ahora guardan los cambios, abren el terminal integrado, tenemos dos
entradas para la aplicación ejecutada porque tengo dos dispositivos virtuales conectados al
paquete Metro.
Tengo un iOS. simulador y un dispositivo virtual Android y aquí en el
paquete Metro en la parte superior izquierda puedes ver los dispositivos conectados, así que conecté un
iPhone 11 Promax y un dispositivo virtual Android, ahora podemos
hacer clic en cualquiera de estos dispositivos y ver el registro para eso. dispositivo, por lo que la consola ese
registro es la forma más sencilla de depurar o reaccionar aplicaciones nativas; sin embargo, este concepto de
declaraciones de registro puede tener un impacto negativo en el rendimiento de nuestras aplicaciones en
producción, así que úselos solo durante el desarrollo o las pruebas una vez que haya terminado
con la depuración. sesiones asegúrese de eliminarlas antes de crear su
aplicación para producción. A continuación, le mostraré cómo depurar sus aplicaciones
en Chrome. Veamos cómo podemos depurar esta aplicación en Chrome, así que
crearé un error en este componente de la aplicación. Declaremos una variable llamada X y sin
inicializarla llamemos X a 2 cadenas guardemos los cambios.
Obtenemos este cuadro rojo donde podemos encontrar información sobre el error que acaba de
ocurrir, así que aquí está el mensaje de error.
Undefinido no es un objeto que evalúa X
a 2. cadena y aquí puede ver que estamos en nuestro árbol de componentes, este error es
preciso, en este caso ocurrió en el componente de la aplicación. Ahora, para depurar esta aplicación, primero
debemos cerrar la pantalla, así que presionamos el botón Escape, ya no está, ahora debemos
abrirla. en el menú de desarrollador explico cómo hacer esto en las lecciones anteriores
si estás usando un dispositivo real tienes que agitarlo si estás usando un
dispositivo virtual Android tienes que presionar comando + M en Mac o ctrl + M en Windows y si
estás usando un simulador de iOS, debes presionar comando + D en mi máquina, eso
no funciona, así que tengo que presionar ctrl + D y luego comando + D.
Ahora necesitamos
habilitar la depuración remota cuando hacemos esto en JavaScript. El código para
esta aplicación terminará ejecutándose en Chrome, déjame mostrarte,
así que tocamos en depuración remota. Sí, abre una nueva pestaña en Chrome que apunta a
su dirección localhost/debugger – UI, por lo que ahora JavaScript para esta aplicación se
ejecutará de forma remota en Chrome y eso ralentizará nuestra aplicación, así que cuando haya
terminado con su sesión de depuración, asegúrese de detener la depuración remota. Ahora
abramos las herramientas de desarrollo de Chrome aquí en la pestaña de la consola, podrá ver el
mensaje que registramos y el error que ocurrió. lea la propiedad
dos cadenas de indefinido ahora para depurar esta aplicación, vamos a la
pestaña de fuentes aquí, haga clic en este ícono, haga una pausa en las
excepciones y luego seleccione pausar las excepciones no detectadas, permítame habilitar esta
opción si se detecta una excepción en nuestra aplicación, Chrome detendrá el ejecución
y resalte la línea donde ocurrió la excepción, déjeme mostrarle, así que volvamos
a nuestra aplicación, abramos el menú de desarrollador y volvamos a cargar nuestra aplicación.
Ahora podemos ver la línea donde ocurrió la excepción X las dos cadenas, por lo que
Chrome se detuvo en esta excepción ahora.
Les mostraré algunas herramientas que tenemos
aquí para depurar. Podemos hacer clic en cualquier línea para insertar un punto de interrupción y cuando vuelva a
cargar nuestra aplicación, Chrome detendrá la ejecución justo en esa línea para que desde
ese punto podamos ejecutar nuestro código línea por línea. Podemos observar el valor de
varias variables para ver si nuestros cálculos son correctos o no,
así que recarguemos nuestra aplicación una vez más para abrir el menú de desarrollador. También tenemos
un acceso directo para ello en Mac. Podemos presionar Comando + R en un simulador de iOS.
recargar ahora la línea cinco está resaltada y está a
punto de ejecutarse. Aquí tenemos varias herramientas para ejecutar nuestro código, por lo que
podemos pasar por encima de esta línea o podemos ingresar a ella.
Esto es útil si en esta
línea estamos llamando a una función que tenemos. escrito para que podamos ingresar a esa
función y ejecutar el código en esa función línea por línea, también tenemos un paso,
por lo que si ingresa a una función y terminamos de depurar esa función,
podemos salir de esa función ahora, en este caso, consola el blog no es una
función que hayamos escrito, así que no importa si lo pasamos por alto o entramos en
él, así que lo pasaré por alto y, por cierto, miraré este acceso directo aquí en la
información sobre herramientas en Windows, es f10 en Mac. su comando y una comilla simple, por lo que al
depurar siempre use este acceso directo porque es mucho más rápido que hacer
clic constantemente en estos íconos, así que pase por alto ahora que estamos en esta línea y puede
ver que X no está definido, esa es la razón por la que obtuvimos esta excepción.
Ahora aquí también tenemos esta ventana de observación donde podemos observar el valor de varias
variables, así que haga clic en este signo más y escriba X y luego ingrese para que pueda ver que
X no está definido, por lo que esta ventana de observación es realmente útil para ver qué está pasando ahora.
Hemos terminado con nuestra depuración, sabemos por qué obtuvimos esta excepción, por lo que debemos
eliminar este punto de interrupción; de lo contrario, la próxima vez que recarguemos nuestra aplicación, Chrome
pausará la ejecución en esta línea, así que volvamos a nuestro código,
eliminemos estas dos líneas y guardemos los cambios.
Luego vuelva a cargar nuestra aplicación, está bien, ya no está,
así que deberíamos detener la depuración remota, de lo contrario, nuestra aplicación será muy
lenta, así que una vez más abra el menú de desarrollador y detenga la depuración remota,
así es como podemos depurar sus aplicaciones en Chrome ahora aquí también tenemos la
pestaña de red, esto es útil cuando tenemos llamadas API a nuestro back-end. Aún no has llegado
allí, pero volveremos a eso en el futuro. ¿Qué pasa con la pestaña LMS?
Bueno, los elementos que ves aquí no lo son. los elementos eran los componentes de
su aplicación, estos son los elementos de la ventana del depurador, por lo que, a diferencia de una aplicación web,
no podemos seleccionar un elemento y ver sus propiedades, por lo que se trata de
depurar en Chrome, también podemos depurar nuestras aplicaciones nativas de reacción en código vs.
déjame
mostrarte primero, abrimos el menú de desarrollador y habilitamos la depuración remota, por lo que esto
abre esta ventana en Chrome, tenemos que cerrarla, de lo contrario obtendremos un error,
pero en este caso en esta demostración no voy a cerrar esta ventana. porque
quiero mostrarles ese error ahora volvamos a vs code, vayamos al panel de extensiones,
busque reaccionar nativo y asegúrese de haber instalado esta extensión.
Herramientas de reacción nativas con esta extensión, podemos depurar aplicaciones nativas de reacción en vs código, ahora
vayamos a el panel de depuración, lo primero que tenemos que hacer es crear este archivo, iniciar
JSON, aquí es donde almacenamos nuestras configuraciones de depuración. Actualmente no tenemos
este archivo en nuestro proyecto, por lo que vs code sugiere crearlo, así que haga clic en este
enlace ahora desde este menú desplegable. -lista desplegable seleccione reaccionar nativo ahora a veces preguntamos o
no le muestra esta lista desplegable. No estoy seguro de por qué, pero inmediatamente crea
el archivo JSON de lanzamiento del pato.
Si esto le sucede, no se preocupe, simplemente continúe
mirando. averigüe qué hacer en un segundo, así que seleccionamos reaccionar nativo ahora
aquí vemos varias configuraciones para depurar aplicaciones nativas de reacción estas
configuraciones son instaladas por esa extensión herramientas nativas de reacción, por lo que si
no instala esa extensión no verá Estas configuraciones ahora
están seleccionadas de forma predeterminada para depurar Android. Voy a anular la selección de esto y seleccionaré adjuntar al
empaquetador. Honestamente, esta es la única configuración con la que estoy familiarizado, así que
seleccionamos adjuntar al empaquetador y hacemos clic en Aceptar y aquí está el inicio del punto JSON,
así que a veces preguntamos Oh. no le muestra esa lista desplegable, en lugar de eso,
crea inmediatamente este archivo. Ahora aquí tenemos varias
configuraciones de depuración actualmente en nuestra matriz de configuraciones. Tenemos un solo
objeto, una sola configuración y el nombre de esta configuración se adjunta
al empaquetador si no lo hace.
Si no tiene este objeto aquí, siempre puede agregar una
configuración. Puede hacer clic en este botón para agregar configuración o puede
ir al menú Ejecutar y seleccionar Agregar configuración. Ahora en este menú contextual
buscamos reaccionar nativo y esto muestra varias configuraciones para
depurar. y reaccionar aplicaciones nativas, así que aquí lo hemos adjuntado a un empaquetador, también tenemos
depuración de Android, etc., por ejemplo, seleccionemos una segunda configuración como
depurar Android, así que ahora tenemos un segundo objeto, una segunda configuración llamada
depurar Android, y los mismos cambios que hacemos. Ya terminamos con este archivo.
Creo que tienes
curiosidad. Este archivo se encuentra dentro de esta carpeta. Punto vs código. Ahora vayamos a la aplicación.
Sí, voy a declarar una variable X y
establecerla en una, vamos a usar esta. durante nuestra sesión de depuración ahora podemos
insertar un punto de interrupción en esta línea e iniciar una aplicación en modo de depuración y ejecutarla
línea por línea exactamente de la misma manera que depuramos nuestra aplicación en Chrome. Ahora vayamos al
panel de depuración en esta lista desplegable. vea
varias configuraciones de depuración actualmente tenemos dos configuraciones, depure Android
y adjunte el paquete er.
Voy a seleccionar adjuntar el paquete ER y haré clic
en este botón de reproducción. Nuestro depurador se inicia y luego inmediatamente se siente
atascado para ver por qué sucedió esto. Vaya al Ver el menú y luego mirar la consola de depuración,
así que aquí está la flecha
: empaquetador, ¿está seguro de que hay un empaquetador y se está ejecutando en este puerto
8081? Entonces, de forma predeterminada, el código PS intenta conectarse
a este empaquetador, reacciona al empaquetador nativo para obtener el código JavaScript en este puerto.
8081 tenemos que cambiar el deporte a este puerto aquí diecinueve mil uno,
así que volvemos al código vs en la parte superior, vamos al menú de código y luego a la configuración de preferencias
ahora en la pestaña de usuario aquí buscamos reaccionar – nativo de ese puerto de punto del empaquetador, así que
mira aquí es soporte 80 81 tenemos que cambiar esto a diecinueve mil uno
ahora que terminamos con esto, abramos el panel de depuración una vez más e iniciemos
nuestra aplicación en modo de depuración. El depurador falló una vez más, así que
vayamos a ver la consola de depuración aquí.
el segundo error
no pudo depurar otro depurador ya está conectado al empaquetador. Esto
sucedió porque tenemos esta ventana abierta en segundo plano, por lo que a veces
tienes un millón de pestañas o ventanas abiertas y no sabes que tienes esta ventana
abierta en algún lugar, por eso nada funciona. en su máquina, así que asegúrese de encontrar
esta ventana y cerrarla porque puede depurar en Chrome o en código vyas en un
solo momento, no en ambos procesos, así que ahora vamos a depurar en
código vs, lo que significa que nuestro código JavaScript es se ejecutará dentro del código vs,
así que abramos el panel de depuración una vez más e iniciemos nuestra aplicación.
Establecemos una
hermosa conexión, así que aquí está nuestro simulador,
abre el menú de desarrollador y recarga la aplicación
para que el depurador se cargue. Ahora déjame cerrar la depuración. eche un vistazo a la consola, estamos en
apt en Jas y la primera línea donde inserté un punto de interrupción está resaltada, por lo que
ahora podemos ejecutar nuestro código línea por línea. Tenemos las mismas herramientas que teníamos en
Chrome. Podemos pasar por encima de la línea actual. entre si está llamando a una
función que hemos escrito si está dentro de una función, podemos salir de ella, podemos
reiniciar nuestro depurador y podemos desconectarnos de nuestra sesión de depuración, así que
pasemos por alto esta línea y, por cierto, este atajo es f10 ahora aquí en el
lado izquierdo podemos ver el valor de varias variables, por lo que el código
detectó automáticamente las variables dentro del alcance, así que aquí tenemos X, el valor de X
es 1, también tenemos nuestra ventana de observación para que podamos observar varias de forma selectiva.
variables
en caso de que no se detecten aquí para que podamos escribir X y podamos ver el
valor de X para que ahora podamos ejecutar nuestro código línea por línea y ver qué
sucede cuando hayamos terminado, siempre debemos detener la sesión de depuración porque nuestro El
código JavaScript se ejecuta de forma remota dentro del código vs, por lo que nos desconectamos aquí,
luego vamos a nuestra aplicación, abrimos el menú de desarrollador y detenemos la depuración remota.
Ahora obtenemos este error. El tiempo de ejecución no está listo para la depuración, no te preocupes por
esto, solo necesitamos recargar. nuestra aplicación y aquí puede encontrar este acceso directo para
recargar en Mac su comando + R, por lo que ahora nuestra aplicación se ejecuta como antes
y la sesión de depuración finaliza. Hasta ahora hemos estado sirviendo nuestra aplicación desde
esta dirección, puerto de host local diecinueve mil dos. y eso significa que si
apagamos nuestra computadora o si dejamos de exponer CLI, no podremos abrir nuestra
aplicación con el cliente experto. Aquí es donde la publicación viene al rescate
para que podamos publicar nuestra aplicación en la Expo y luego nuestra aplicación tener una dirección pública y
permanente que cualquiera puede usar para abrirlo con un cliente experto, así
como podemos publicar paquetes NPM en el directorio NPM, podemos publicar nuestro hab en la Expo
y será visible para cualquier persona en el mundo, esto es mucho más fácil que
Revisar las tiendas de aplicaciones Si ha realizado algún tipo de desarrollo de aplicaciones antes,
probablemente sepa que revisar las tiendas de aplicaciones es muy tedioso.
Hay ciertos
pasos que debe seguir con la exportación. No tenemos que preocuparnos por eso,
simplemente publicamos nuestra aplicación. a la Expo y cualquier persona en el mundo puede abrir nuestra aplicación y
probarla con un cliente experto, por supuesto, esto es puramente para desarrollo y
pruebas, no para producción, cuando quieres poner nuestra aplicación en producción, tenemos que pasar por las
tiendas de aplicaciones, ese es el tema para el futuro. Entonces, en este video,
le mostraré cómo publicar su aplicación en Expo. Ahora podemos publicar usando el paquete Metro
aquí para que podamos hacer clic en publicar o volver a publicar el proyecto.
Alternativamente, podemos abrir una nueva ventana de terminal y escribir Expo publicar de cualquier manera.
Para volver a esta terminal, lo sabemos porque Expo le hará algunas
preguntas, déjeme mostrárselas, así que en esta demostración no ejecutaré la publicación de Expo aquí.
En
lugar de eso, usaré la publicación. Salga aquí, así que haga clic en Expo. preguntando el
nombre de nuestra aplicación, esto se carga después de JSON, por lo que si mira después de JSON,
puede ver varias configuraciones sobre nuestra aplicación, aquí está el nombre de nuestra aplicación, aquí hay una
URL para ella, esto será parte de la URL de nuestras aplicaciones en la Expo. Lo veremos en un
segundo, así que volviendo al paquete Metro, opcionalmente podemos especificar la URL de origen de github,
así como una descripción, podemos optimizar nuestros activos para que se compriman
y minimicen de forma predeterminada. Esto está habilitado ahora que se verá la URL de nuestra aplicación.
como este experto en IO en el signo, después de esto tendremos nuestro nombre de usuario que
crearemos en este video y luego lo terminaremos, así que esta es nuestra
suerte de URL. Ahora hagamos clic en publicar proyecto para volver a nuestro
ventana de terminal en vs code aquí es donde está ejecutando X + CLI, por lo que exportar le pregunta cómo
le gustaría autenticarse.
Podemos crear una nueva cuenta Expo o iniciar sesión con una
cuenta existente, así que creemos un nuevo recuento de exportación.
Tenemos que ingresar nuestro correo electrónico, así que voy a programar con Maj en
gmail.com para mi nombre de usuario. Voy a escribir programación con Marsh, démosme la
contraseña y confirmémoslo ahora mismo. Expo está construyendo nuestros
paquetes de iOS y JavaScript de regreso a Metro. Bunner, nuestra aplicación
se publicó correctamente en su dirección. Hagamos clic en ella, así que aquí está nuestra aplicación.
Actualmente, nuestra aplicación no tiene un ícono, es por eso que tenemos este cuadro vacío.
Volveremos y solucionaremos este problema en el futuro.
Ahora aquí tenemos esto. Código QR para que cualquiera pueda
escanear este código con su teléfono y abrir nuestra aplicación con el cliente de exportación. Tan simple como eso,
no tenemos que pasar por las tiendas de aplicaciones. Ahora nuestra aplicación actualmente no
tiene ninguna descripción, así que volvamos al paquete Metro. Continúa y publica
una vez más y esta vez dale una descripción a nuestra aplicación. Voy a decir un
mercado para vender estas cosas que ya no necesitas.
Ahora publiquémoslo
una vez más. De vuelta en vs coque, abramos el
JSON. En la parte inferior pueden ver nuestra nueva descripción para que nuestra aplicación se vuelva a publicar.
Abrámosla una vez más y aquí está la descripción actualizada.
El curso completo se divide en dos partes: temas básicos y avanzados, pero
cada parte dura entre cinco y seis horas, por lo que el curso completo dura más de diez
horas e incluye todo el código fuente que escribimos en este curso. Cada
sección lo tiene antes y después del código fuente. código para que puedas codificar fácilmente
conmigo y además obtendrás muchos ejercicios y soluciones paso a paso y un
certificado de finalización que puedes agregar a tu currículum si estás interesado.
Pongo el enlace a continuación que estoy ofreciendo. un descuento para los primeros cien estudiantes,
así que si está interesado, inscríbase ahora antes de que sea demasiado tarde,
continuemos con la siguiente lección en esta sección, veremos algunos
de los componentes principales y las API en React Native.
hablando de ver
texto imagen botón alerta táctil y demás, hay más componentes en reaccionar
nativo de los que podemos cubrir en esta sección o en este curso, vamos a dirigir el curso que
vas a aprender los que usarás la mayor parte del tiempo ahora Si tiene
curiosidad, puede encontrar la lista completa de estos componentes principales y API en el
sitio web nativo de React, así que diríjase a reaccionar punto dev nativo y luego vaya a API. Aquí
a la izquierda podemos ver todos los componentes principales que podemos usar para construir.
interfaces de usuario, estos componentes son multiplataforma, por lo que cuando compilamos nuestra
aplicación se asignarán a su equivalente negativo, por lo que si usamos un
botón aquí en Android, se verá como un botón estándar de Android y en
iOS se verá como un botón estándar de iOS. También podemos personalizar la
apariencia de estos botones usando los estilos que aprenderá en la siguiente sección, por lo que aquí
están todos los componentes multiplataforma.
También tendrá un montón de componentes
específicos para Android e iOS y también tenemos un montón de API.
estas API nos dan acceso a funciones nativas, no hay widgets de interfaz de usuario, por
ejemplo, podemos usar el teclado para controlar el teclado virtual o podemos usar
hojas de estilos para crear un montón de estilos nuevamente. Estas API son nuestra plataforma cruzada,
también tenemos un montón de AP. específico para Android e iOS nuevamente estudiaremos la mayoría de
los componentes esenciales en API, pero no tenemos tiempo para analizar cada
componente, por lo que una vez que aprenda los conceptos básicos, podrá aprender los otros
componentes por su cuenta, así que a continuación vamos a Hablé sobre vistas, así que antes
les dije que en React Native no tenemos elementos HTML como el párrafo div span,
etc., por lo que tenemos que construir nuestra interfaz de usuario utilizando los componentes integrados en
React Native View, que es el componente más básico y fundamental.
para crear interfaces de usuario
es como un div, por lo que es un componente contenedor que podemos usar para agrupar
o diseñar elementos secundarios. De esta manera, tenemos aquí un montón de estilos.
Hablaremos sobre estilos en detalle en la siguiente sección, pero por ahora. permítanme
explicar brevemente cuáles son estos estilos, por lo que tenemos flex configurado en 1, esto significa que esta vista
es flexible y crecerá tanto horizontal como verticalmente para llenar el
espacio libre, en este caso crece y toma toda la pantalla, ahora el
color de fondo de esta vista es blanca, cambiémosla a azul Dodger, así que aquí
podemos usar colores con nombre, también podemos usar colores RGB exactamente de la misma manera con
colores específicos en aplicaciones web.
Ahora guarde los cambios. Mira,
esta vista está llenando todo el espacio. Ahora una cosa que quiero. a lo que debes prestar
atención es a esta muesca o al borde en los nuevos iPhones. A veces quieres
asegurarte de que esta muesca no cubra tu contenido, por ejemplo, volvamos a nuestros
Estilos. Eliminemos estas dos propiedades. Alineemos elementos y justifiquemos el contenido con
estos.
Podemos coloque un componente en el centro de esta vista, esa es la razón por la
cual nuestro texto aparece en el medio de la pantalla. Ahora
hablaremos sobre diseños y alineación de componentes en la siguiente sección. Por ahora,
eliminemos estas dos propiedades. Guarde los cambios. Mire. nuestro texto está
aquí, es demasiado pequeño, déjame hacer que el simulador se vea más grande para que parte del
texto quede cubierto por el nudo. Aquí es donde podemos usar un tipo especial de vista
llamada área de visión segura, por lo que en la parte superior importamos la vista del área segura. desde reaccionar
nativo ahora podemos reemplazar esta vista con un área de vista segura,
así que con esta vista seleccionada presione comando + D en Mac o ctrl + D en Windows ahora
ambas vistas están seleccionadas tenemos dos quilates, esto se llama edición de cursor múltiple
para que podamos reemplazar ambos al mismo tiempo, así que escriba vista de área segura
ahora presione Escape para cancelar la edición con varios cursores, guarde los cambios, eche un
vistazo, nuestro texto ya no está detrás de esta muesca,
por lo que la vista de área segura agrega un poco de relleno en la parte superior para asegurarse.
que nuestro contenido
está dentro del área segura, entonces todo esto es sobre vistas por ahora, a continuación vamos a
hablar sobre el componente de texto. El segundo componente más fundamental en
reaccionar nativo es el texto y lo usamos para mostrar texto, por lo que aquí no podemos colocarlo.
texto en cualquier lugar dentro de JSX, como lo hacemos en las aplicaciones web, siempre debemos
envolver nuestro texto con el componente de texto. Ahora este componente de texto tiene algunos
accesorios interesantes. Veamos la documentación de este componente, así que aquí
en el sitio web nativo de reacción en la sección API. Mire la documentación
del componente de texto, así que aquí tenemos un montón de accesorios. Voy a hablar de los
más importantes. El primero es el número de líneas. Cuando
configuramos esto, si nuestro texto es más largo, se truncará. Déjame mostrarte. Así que de vuelta en el
código vs, cambiemos esto a un texto realmente largo.
Ahora quiero hacerlo
aún más largo y ver qué sucede. Ahora nuestro texto está ajustado, tenemos dos
líneas, pero si configura el número de líneas en una, nuestro texto. se trunca, eche
un vistazo, por lo que establecemos el número de líneas en una. Ahora diga, eche un vistazo, por lo que tenemos un
punto, un punto y un punto al final de la primera línea, muy útil. También podemos hacer que este texto
actúe como un enlace usando el evento o accesorio unpress.
así que aquí configuramos presionar configuramos
esto como una función, podemos escribir una función en línea aquí como esta, podemos
pasar una función de error, la constante de registro que dice clic en texto,
pero esto es útil para funciones muy pequeñas, frases ingeniosas si tiene una justa
cantidad de lógica, no arrojamos toda esa lógica aquí en medio de nuestro JSX,
por lo que debemos implementarla en una función separada, de modo que antes de nuestra declaración de retorno
podamos definir una función por convención, anteponemos el nombre de la función con un identificador,
por lo que queremos manejar lo sin precedentes llamamos a esta función manejar presionar ahora
lo configuramos en una función de error y aquí es donde hacemos que nuestra consola bloquee el texto
presionado bien, ahora dijimos presionar para manejar presionar guardar los cambios, eche un
vistazo, así que toco esto ahora si miras la ventana de la terminal y
ves nuestro mensaje de bloqueo, así que hablamos sobre los dos accesorios esenciales para el
componente de texto.
Ahora, mientras creas aplicaciones, acostúmbrate a leer esta
documentación para cada componente que encuentres, te ayudará a
comprender mejor las capacidades. y las limitaciones de ese componente a continuación vamos
a hablar de imágenes ahora hablemos de renderizar imágenes primero
restauremos nuestra aplicación a su estado original así que cambiemos el color de fondo a
blanco ahora para poner nuestro contenido en el centro de la pantalla que tenemos para establecer dos
propiedades, justificar el contenido, configuramos esto en Centrar y alinear elementos, también debemos configurar
esto en Centro. Bien, ahora todo lo que coloquemos dentro de
este contenedor, que es nuestra área segura para usted, estará en el centro de esta pantalla,
así. Ahora, para renderizar una imagen, primero importamos el componente de imagen de
React Native. Con este componente podemos mostrar tanto las
imágenes locales que incluimos con nuestra aplicación como las imágenes de red que
descargamos de Internet, por lo que actualmente en nuestra carpeta de activos tenemos dos imágenes.
El
ícono y el chapoteo que se usan en nuestra aplicación se están cargando, así que mostremos el ícono
justo debajo del texto, así que aquí escribimos imagen ahora porque no vamos a poner
nada entre las etiquetas de imagen, podemos usar la sintaxis de cierre automático que
hace nuestro limpiador de código ahora aquí debemos configurar la propiedad fuente para cargar nuestro
ícono, usamos la función require y especificamos la ruta a nuestra imagen para que nuestro
componente de aplicación esté aquí, debemos ir a la carpeta de activos y cargar el ícono PNG,
así que aquí escribimos período que representa la carpeta actual, luego vamos a activos
y cargamos el ícono PNG, de modo que cuando usemos la función require reaccionar, el
empaquetador nativo incluirá este archivo en nuestro paquete, por lo que aumentará el tamaño
de nuestra aplicación, por lo que deberíamos usar imágenes estáticas si realmente tiene que enviarse
con nuestra aplicación como el ícono o la pantalla de inicio, de lo contrario deberíamos descargar
imágenes de Internet, así que ahora guarde los cambios aquí está nuestra imagen hermosa.
¿
Qué crees que devuelve esta función requerida? No devuelve una imagen o una
cadena. devuelve un número que es una referencia a nuestra imagen, déjame mostrarte,
así que antes de nuestra declaración de devolución, hagamos un registro de la consola e imprimamos el
icono de barra diagonal de recursos requeridos, ese PNG ahora busca en la terminal, así que es la referencia a
nuestra imagen, está bien, ahora vamos. elimine esta línea,
así es como podemos renderizar imágenes locales o iniciales, pero ¿qué pasa con las
imágenes de red? Bueno, vayamos a elegir algunas fotos muertas. Este es un generador de imágenes aleatorio.
Aquí hay un ejemplo. Mire esta URL cada vez que accedamos a esta
URL. obtenemos una imagen aleatoria con estas dimensiones de 200 por 300, así que copiemos esto
ahora de nuevo al código vs para imágenes de red en lugar de la función requerida, tenemos que
pasar un objeto aquí, ahora este objeto tendrá una propiedad llamada URI que
configuramos como una cadena y Aquí es donde pegamos la URL que copiamos para guardar los
cambios en nuestro simulador.
Nuestra imagen no es visible porque React Native
no conoce sus dimensiones, por lo que tenemos que especificar manualmente las dimensiones de las
imágenes de red para las imágenes locales que no conocemos. Tengo que hacer esto porque la
función require lee los metadatos sobre nuestras imágenes, así que volvamos a nuestro
código y al objeto que pasamos a la
propiedad fuente, configuramos dos propiedades adicionales con 200 y altura en 300, guardamos los
cambios, así que aquí está nuestro componente de imagen. y aquí está el resultado
hermoso ahora aquí en la documentación oficial puede ver varios accesorios
para el componente de imagen, hablemos de algunos accesorios útiles aquí tenemos un radio de desenfoque,
esto aplica un efecto de desenfoque a nuestra imagen,
así que aquí podemos establecer el radio, digamos
10 ahora mire, nuestra imagen se ve borrosa. También tenemos la fuente del indicador de carga.
Esto es similar al accesorio de fuente, por lo que podemos darle una imagen local usando la
función requerida o podemos pasar el URI de una imagen de red.
Se mostrará la imagen que pasemos
aquí. Mientras se descarga la imagen real, tenemos
otro accesorio llamado duración falsa, como puede ver en esta tabla, solo es
compatible con Android, por lo que Android carga esta imagen con un efecto de desvanecimiento y, de
forma predeterminada, este efecto de desvanecimiento demora 300 milisegundos. Déjame mostrarte aquí está mi
Dispositivo virtual Android, podemos recargar la aplicación presionando R dos veces. Ahora mira el
efecto Fed. ¿Viste que podemos cambiar esta duración para hacerla más
pronunciada? Entonces aquí podemos configurar la duración del desvanecimiento en digamos 1 segundo.
Ahora
recargamos la aplicación y aquí está nuestro hermoso efecto de desvanecimiento, por lo que esto solo funciona en
Android, no tiene ningún efecto en iOS. Otro accesorio útil es el modo de cambio de tamaño que se usa
si las dimensiones de nuestra imagen son diferentes de las dimensiones que especificamos,
por lo que aquí tenemos varios modos de cambio de tamaño que contienen la portada. estirar, repetir, etc.,
estos son los mismos modos de cambio de tamaño que tenemos en las aplicaciones web, también tenemos un
montón de eventos como descargar al cargar y descargar inicio, etc., con estos podemos
aprovechar ciertos momentos en los que se carga una imagen en la etapa anterior. lección, agregamos esta
imagen a nuestra aplicación, ahora llevemos esta aplicación al siguiente nivel y permitamos que el usuario
toque esta imagen con nuestro componente de texto. Lo logramos manejando
el derecho sin precedentes, pero el componente de imagen no tiene este accesorio o
evento. aquí es donde podemos usar componentes táctiles para que podamos hacer que cualquier cosa se pueda
tocar aquí están los componentes táctiles en reaccionar nativo tenemos
resaltado táctil opacidad táctil táctil sin retroalimentación el
componente táctil que usemos dependerá del tipo de retroalimentación que queramos darle a nuestro Los usuarios me
dejan mostrarles, así que volvamos a nuestro código, importemos elementos táctiles sin comentarios
y tenga en cuenta que no estoy escribiendo el nombre completo de este componente.
Estoy
usando atajos, así que escribo un poco como tou
WF y luego presiono. Ingresar esto es mucho más rápido que escribir el nombre completo de
un componente. Bien, ahora para hacer que esta imagen sea táctil, tenemos que envolverla dentro de un
componente táctil sin comentarios, así que una vez más usaré un atajo para
tocar sin comentarios. Presione Entrar, ahora vamos a movernos. esta imagen dentro de lo que se
puede tocar sin comentarios, así que mantengo presionada la tecla Alt y luego presiono la
flecha hacia arriba con esto, podemos mover código como este. Bien,
ahora este toque sin comentarios tiene un evento llamado unpress. También tiene un
evento llamado al presionar prolongadamente.
Esto es útil.
Quiero permitir que el usuario toque y mantenga presionado un componente, así que aquí vamos a manejar
lo sin precedentes. Aquí podemos pasar una función. Hagamos un registro de consulta y digamos
imagen tocada. Ahora guardemos los cambios. Cuando toco esta imagen, no pasa nada
porque estamos. Usar touchable sin retroalimentación no nos da ninguna
retroalimentación visual, pero si miras nuestro terminal podemos ver nuestro mensaje. Ahora reemplacemos
esto con un tipo diferente de touchable, así que en la parte superior importemos
opacidad táctil. Ahora reemplacemos esto con opacidad táctil. entonces, opacidad táctil
que también reemplazará esta etiqueta, eche un vistazo, así que déjeme tocar esta imagen, su
opacidad se reduce para que podamos ver el fondo. Es por eso que esta etiqueta táctil se
llama opacidad táctil durante una fracción de segundo, reduce la opacidad de
lo que estamos haciendo que sea táctil, está bien, ahora veamos el resaltado táctil, así que
importamos en el resaltado táctil superior y luego lo usamos aquí
ahora usando comando + D como les dije antes, podemos seleccionar ambas instancias y
reemplazarlas de una sola vez, resaltado táctil, guarde el cambios,
eche un vistazo, así que cuando tocamos esta imagen, su
fondo se oscurece por una fracción de segundo, este es el efecto de
resaltado táctil, por lo que estos son los tres componentes táctiles multiplataforma que
tenemos en React Native, también tenemos un toque táctil que es específico para Android,
se llama comentarios nativos táctiles, no es compatible con iOS, por lo que cuando lo usamos
recibimos una advertencia, déjame mostrártelo, así que importemos comentarios nativos táctiles
ahora usémoslos aquí comentarios nativos táctiles
guarda los cambios en iOS, obtenemos este cuadro rojo La retroalimentación nativa táctil
no es compatible con esta plataforma, por lo que más adelante en esta sección le mostraré
cómo puede detectar la plataforma en la que se ejecuta esta aplicación, de modo que si se está ejecutando
en iOS, tal vez podamos usar la opacidad táctil, si se está ejecutando en Android,
podemos usar comentarios nativos táctiles ahora, probemos este táctil en un
dispositivo virtual Android, así que abriré mi dispositivo virtual Android cuando toque
esta imagen, no pasa nada porque este táctil realmente no funciona con
imágenes, funciona con vistas que tienen un fondo.
color, déjame mostrarte, así que volvamos
a nuestro código en la parte superior, importemos el componente de vista,
ahora vamos a reemplazar esta imagen con una vista, le
daremos algunos estilos a esta vista, así que configuramos este accesorio de tiempo para un objeto con
algunas propiedades. con digamos 200 de altura, usaré 70 y color de fondo,
configuremos esto en azul Dodger, guardemos los cambios, eche un
vistazo, este es el efecto de retroalimentación nativo que
tenemos en Android, así que todo se trata de tocar, a continuación vamos a hablemos de
botones ahora hablemos del
componente del botón así que limpié el código aquí solo tenemos una vista de área segura sin
texto ni imagen ningún componente táctil aquí queremos agregar un botón a nuestra vista
para poder importarlo en arriba y luego agréguelo aquí, pero déjeme mostrarle un
acceso directo aquí, podemos escribir el botón ahora, escuchando la apariencia de intellisense, tenemos
importación automática, por lo que podemos hacer que vs code importe esto automáticamente para nosotros, así que aquí
presionamos enter y nuestro botón se importa aquí.
hermoso
ahora con los botones podemos usar la sintaxis de cierre automático porque no ponemos
nada entre ellos, así que aquí configuramos el título – digamos hacer clic en mí y
manejamos el sin precedentes bastante sencillo, tocamos el botón de registro
ahora guardamos los cambios, así que aquí está nuestro botón en un iPhone y
aquí está nuestro botón en un teléfono Android, por lo que cada plataforma tiene una forma diferente de
presentar este componente de botón porque, como les dije antes, este
componente de botón que estamos usando aquí se asigna a su apariencia nativa equivalente de los
botones de Android. así de forma predeterminada ahora podemos cambiar el color de
este botón, por ejemplo, podemos establecer el color en nuestra pulgada, guardar los cambios
ahora nuestro botón tiene un fondo naranja y en iPhone tiene un texto naranja,
también podemos crear un botón personalizado que tenga una apariencia única. Te mostraré cómo
hacerlo en la siguiente sección. Cuando hablemos de estilo, a continuación
hablaremos de alertas. Hagamos que esta aplicación sea más interesante
en lugar de imprimir algo en la consola.
Mostremos una alerta estándar.
cuadro, así que voy a eliminar el blog de la consola y usaré la función de alerta para que la
función de alerta que tenemos en los navegadores también funcione aquí, así que
aquí podemos mostrar un mensaje como el botón presionado Guardar. Ahora eche un vistazo
en iOS, obtenemos esta alerta estándar de iOS. cuadro y en Android obtenemos un
tipo diferente de alerta nuevamente, esto se debe a que la alerta que mostramos se asigna a su
equivalente nativo ahora déjame usar la función de alerta, obtenemos un cuadro el título de
este cuadro es alerta y aquí tenemos un solo botón llamado está bien, si esto
no funciona para ti, siempre puedes personalizarlo, puedes cambiar el título,
puedes cambiar los botones aquí, déjame mostrarte, así que en la parte superior importamos la alerta,
este no es un componente que tenga una representación visual.
una API,
por lo que es un objeto con un par de métodos, déjame mostrarte, así que pondré
esto en una nueva línea ahora, en lugar de alerta, escribirás punto de alerta, mira aquí,
tenemos dos métodos, alerta para mostrar un mensaje y un mensaje. para hacer una pregunta
y obtener una respuesta, usemos el método de alerta, este método tiene algunos
parámetros, el primero es el título de nuestro cuadro de alerta, configúrelo en mi título,
el segundo parámetro es nuestro mensaje, voy a configurar esto mi mensaje, el
tercer parámetro es la matriz de botones, así que voy a pasar una matriz aquí en
esta matriz agregamos un objeto, ahora presione Ctrl + espacio, puede ver las propiedades
de este objeto para que cada botón pueda tener un texto.
un estilo y también
plantea un precedente, así que configuremos el texto del primer botón en sí, ahora
agregamos un segundo botón y configuramos su texto en no, guardemos los cambios, así que esto es lo que
ahora tenemos que echar un vistazo ahora que tenemos una alerta personalizada. el título ha cambiado y
ahora tenemos dos botones aquí, ¿cómo sabemos en qué botón se hizo clic? Es
muy fácil, solo tenemos que manejar el evento de presionar estos dos botones, así que
aquí podemos decir que al presionar podemos configurar esto como una función para consola ese registro de sí y
aquí podemos configurar al presionar una función diferente y aquí podemos registrar un
mensaje diferente en la consola, eche un vistazo
sí, ahora de vuelta en la terminal aquí está nuestro mensaje hermoso ahora veamos el
método de utilería, así que Voy a eliminar esto a través de líneas
aquí llamamos aprendido que indica que este método también toma un título, así que aquí está el
título de nuestro cuadro.
También le damos un mensaje.
Ahora el tercer parámetro es una devolución de llamada o botones para que podamos pasar una función de devolución de llamada
que toma. un parámetro de tipo cadena, este es el texto que el usuario
ingresa en el cuadro para que podamos imprimirlo en la consola de manera bastante
sencilla, así que guarde los cambios ahora, entrenemos en iOS,
así que aquí tenemos este cuadro de entrada donde podemos escribir algo, así que Di hola
mundo ahora, si presionamos Aceptar, se llamará a nuestra función de devolución de llamada, por lo que recibiremos nuestro
mensaje en la consola. Una cosa que debes saber es que
esta API solo funciona en iOS al momento de grabar este video, por lo que en Android
cuando toco en este botón no pasa nada, con suerte esto cambiará en
el futuro. Otra API útil que debes conocer es esta API de hoja de buceo que ya
has visto antes.
Con esto podemos definir estadísticas, pero déjame aclarar algunas
cosas sobre las estrellas en una aplicación nativa de reacción. En primer lugar, como dije antes, estos que
tenemos aquí no son CSS, sus nombres están inspirados en CSS, pero
no son CSS, son solo propiedades de JavaScript normales, por lo que cuando construyamos
nuestra aplicación, reaccionará de forma nativa, asignará los componentes independientes de la plataforma a su
nativo. equivalente y luego les aplicará estas propiedades, está bien, eso
significa que este objeto que estamos pasando aquí es esencialmente un objeto JavaScript simple,
por lo que en lugar de hacer referencia a este objeto y aplicar estilos a ese contenedor, podemos pasar
un objeto en línea aquí y establecer el color de fondo en digamos naranja ahora
mira, tenemos esta barra naranja en la parte superior porque estamos reproduciendo un solo estilo,
solo estamos configurando el color de fondo.
Está bien, también podemos definir este objeto en
otro lugar, por ejemplo, puedo cortar esto desde aquí,
definamos una constante llamada contenedor. estilo y decirle a este objeto ahora podemos hacer
referencia a este objeto aquí estilo contenedor nuestra aplicación todavía funciona ahora
anteriormente estábamos usando estilos, los estilos contenedor son el objeto que
estamos definiendo aquí, así que cuando llamamos a la estrategia que crea, pasamos un objeto
este objeto que pasamos aquí es el mismo objeto que obtenemos como resultado,
por lo que nuestro objeto de Astana tiene una propiedad llamada
contenedor, que es un objeto en sí mismo.
Esta es la razón por la que podemos hacer referencia a
estilos de ese contenedor aquí, así que cualquier cosa que pasemos a crear método
lo obtenemos como resultado ahora, podría preguntarse, pero ¿ cuál es el propósito de este método? ¿Por qué no
podemos simplemente usar un objeto JavaScript simple? ¿Por qué tenemos que llamar a la hoja de estilo
que crea? Hay dos razones, la primera razón es que esto El método
valida las propiedades que usamos aquí, por lo que garantiza que no
escribimos mal una propiedad accidentalmente, por lo que si escribió mal esta propiedad, digamos que
agregamos una e al final, mira lo que sucede, obtenemos este color de fondo de cuadro rojo con
una E no.
una propiedad de estilo válida, esta validación no ocurre si usamos un
objeto JavaScript simple directamente, así que permítanme revertir esto ahora, pasemos un
objeto en línea y establezcamos su fondo, escribamos mal en otra cosa,
mire, no obtenemos ningún error, excepto nuestro la aplicación tampoco tiene el aspecto correcto, por lo que
este es un beneficio de usar la hoja de estilo que crea, me permite eliminar esto, por lo que
este método valida las propiedades que pasamos
aquí. El segundo beneficio es que el equipo nativo de reacción ha estado trabajando. sobre la
implementación de algún tipo de optimizaciones detrás de escena, hasta donde yo sé, estas
optimizaciones no están disponibles en el momento de grabar esto, pero estarán
disponibles en el futuro, por lo que es una práctica recomendada usar la
API de estatutos para definir estadísticas, así que esto es todo.
acerca de esta API de hoja de estilo, ahora aquí
también puede combinar múltiples objetos de estilo, de modo que en lugar de pasar un solo objeto,
podemos pasar una matriz de objetos, de modo que en esta matriz primero tenemos estilos de ese
contenedor y luego podemos agregar un segundo objeto como este objeto que definido
aquí ahora eche un vistazo, el resultado es la combinación de estos
dos objetos de estilo, algo similar a cómo podemos aplicar múltiples clases CSS a un
elemento HTML, pero aquí los resultados son más predecibles, por lo que el objeto de la
derecha sobre ochos las propiedades de el objeto de la izquierda, en este caso, el
estilo de contenedor define una propiedad única que es el color de fondo, por lo que se
sobrescribe el color de fondo que definimos anteriormente para que los resultados
sean más predecibles.
Ahora otra pregunta que podría tener es si tenemos que
poner estos estilos. en el mismo archivo realmente no puedes extraer esto desde aquí,
ponerlo en un archivo separado y luego importarlo en este archivo, eso está totalmente
bien, pero es muy convencional definir su tamaño debajo del componente
porque muy a menudo necesitas trabajar con ambas estructuras. de su
componente y también comienza en la misma sesión, si coloca el tamaño en un
archivo separado, tiene que ir y venir constantemente entre dos archivos.
Personalmente, aunque lo que más me gusta es escribir código limpio y separar
preocupaciones, prefiero tener esos estilos debajo de mis componentes me ha funcionado mejor,
pero si no te gusta, está totalmente bien, puedes separar tu
estado en la siguiente sección. Voy a hablar sobre las estrellas en detalle
por ahora, eso es todo lo que necesitas.
Conozca las estrellas, hay formas de detectar la
plataforma en la que se ejecuta nuestra aplicación y personalizar algunos estilos o comportamientos.
Aquí hay un ejemplo. Mire nuestro objeto de estado. Eliminemos estas dos propiedades
para que nuestro botón ya no esté en el centro de la pantalla. Mire,
está aquí en la parte superior, pero mire nuestro dispositivo virtual Android, nuestro botón está
debajo de la barra de estado, por lo que es seguro su componente de vista que usamos anteriormente.
Solo funciona para iOS, por lo que garantiza que nuestro contenido no esté cubierto por esta
muesca.
en iPhone no tiene ningún efecto en Android al momento de grabar este
video, por lo que en este caso debemos agregar manualmente algo de relleno en la parte superior para
presionar este botón hacia abajo para que ya no esté detrás de la barra de estado, aquí es donde
usamos el módulo de plataforma. entonces, en la parte superior importamos el módulo de plataforma desde reaccionar
nativo, ahora aquí podemos agregar un tercer estilo de relleno superior, queremos configurar esto
dinámicamente si la plataforma actual es Android, configuraremos esto en,
digamos, 20, de lo contrario queremos configurar a cero, así que aquí escribimos plataforma.
Ahora este
objeto tiene algunas propiedades. El sistema operativo devuelve el sistema operativo, que puede ser
Android iOS, etc. También podemos obtener la versión de nuestra plataforma. Podemos
verificar si se trata de un iPad. un televisor, etc.,
leamos esta propiedad, podemos compararla ahora aquí presionamos Ctrl + espacio,
podemos ver varios valores que se aceptan, por lo que tenemos Android iOS Mac iOS
web y Windows, por lo que si es Android, desea configurar el relleno. arriba a 20,
de lo contrario, diremos 2-0, digamos eche un vistazo ahora, nuestro botón está debajo de la
barra de estado, pero espere 20, bueno, esto fue solo para una demostración, la forma correcta de hacerlo
es calcular la altura de la barra de estado. y utilícelo como valor para
este estilo, así que en la parte superior importaremos la API de la barra de estado. Ahora
reemplazaremos 20 con la altura actual del punto de la barra de estado. Esta es la forma correcta de agregar
relleno en la parte superior debido a la altura de la barra de estado.
puede ser diferente de
un teléfono Android a otro, así que guarde los cambios ahora, nuestro botón está justo debajo de la
barra de estado. Hola chicos, aquí Marsh. Solo quería
informarles que este tutorial son las primeras dos horas de mi curso nativo de reacción definitiva,
el curso completo. está dividido en dos partes, temas básicos y avanzados,
pero cada parte dura entre cinco y seis horas, por lo que el curso completo dura
más de diez horas.
Incluye todo el código fuente. Reescribiendo este curso, cada
sección tiene antes y después del código fuente para que pueda fácilmente. codifique
conmigo y además obtendrá muchos ejercicios y soluciones paso a paso y un
certificado de finalización que puede utilizar en su currículum si está interesado.
Pongo el enlace a continuación. Estoy ofreciendo un descuento para los primeros cien. estudiantes,
así que si están interesados en el rol ahora, antes de que sea demasiado tarde,
continuemos con la siguiente lección de esta sección. Aprenderán cómo
crear diseños en React Native y aquí es donde comienza la diversión
porque construiremos el primeras dos pantallas de nuestra aplicación, así que hablaremos
sobre las dimensiones, la orientación del dispositivo, la caja flexible, así como el posicionamiento absoluto y relativo,
así que preste mucha atención a las lecciones y tome nota porque
usará estos materiales como parte de los ejercicios en el final de esta sección,
así que estoy muy entusiasmado con esta sección.
Espero que tú también lo estés. Ahora saltemos y
comencemos, hablemos sobre las dimensiones de los
componentes en la pantalla, así que importemos el componente de vista desde reaccionar nativo ahora
en nuestra forma más segura. vista agreguemos una vista le damos un estilo establezcamos el
color de fondo en azul Dodger. Le daré a esto un ancho de 150 y una
altura de 70. Ahora estos números que tenemos aquí son píxeles independientes de la densidad
o caídas del tamaño real.
es igual a píxeles independientes de la densidad multiplicado por el
factor de escala del dispositivo, por ejemplo, el iPhone 4 puede mostrar 320 por 480 puntos. Estos
puntos son unidades abstractas, no son píxeles. Ahora el factor de habilidad del iPhone 4
es 2 o 2x, lo que significa que cada punto contiene 2 píxeles.
la resolución de pantalla del iPhone 4 es igual a 640 por 960 píxeles
ahora, si desde nuestra vista es de 150 píxeles independientes de la densidad o cae, su
ancho real en un iPhone 4 será igual a 150 por 2, que son 300 píxeles, que es
aproximadamente la mitad del ancho de la pantalla. En este momento, en contraste, el iPhone 11 pro max
puede mostrar 414 por 896 puntos con un factor de escala de 3. Aquí está la
resolución de pantalla del iPhone 11 pro max. Ahora, ¿cuál es el ancho de nuestra vista en este iPhone?
Es 150 por 3 igual a 450 píxeles, así que nuevamente es aproximadamente alrededor de la mitad de la
pantalla y aproximadamente no exactamente, de hecho, nuestra vista se ve un poco más pequeña en
un iPhone 11 pro max, pero no se preocupe por memorizar ninguno de estos números,
no importa lo que importa es que al expresar el tamaño de nuestros componentes
en píxeles independientes de la densidad, podemos sentirnos tranquilos porque ahora se ven casi del
mismo tamaño en diferentes dispositivos si desea asegurarse de que este ancho
sea exactamente la mitad del ancho de la pantalla, que
con un valor porcentual aquí reemplazamos 150 por 50.
%
asegúrese de poner esto entre comillas porque este es un valor de cadena, ahora guarde, así que
aquí está nuestra vista: ocupa exactamente la mitad de la pantalla. Ahora, en algunas situaciones,
desea ajustar el tamaño de un componente de acuerdo con el tamaño de la
pantalla en esas. En algunos casos podemos usar la
API de dimensiones, así que en la parte superior importamos dimensiones de React Native. Ahora
bloqueemos las dimensiones que llegan aquí. Debemos pasar
una cadena que puede ser ventana o pantalla. La pantalla devuelve el tamaño de
toda la pantalla, mientras que la ventana devuelve el tamaño de la ventana de la aplicación visible
en iOS, estas dimensiones son iguales, solo son diferentes en Android, por lo que el
tamaño de la ventana es un poco más pequeño que el tamaño de la pantalla, así que pasaré la pantalla
aquí y ahora guardaré en la terminal para que aquí pueda ver el
ancho y la altura de este iPhone y el factor de escala, por lo que cada punto
de este iPhone tiene 3 píxeles, así es como podemos obtener las dimensiones del
dispositivo usando la API de dimensiones.
Ahora el problema en esta API es que no
responde a La orientación cambia, por lo que si el usuario gira el dispositivo, estos números
no se actualizan. Hablaremos sobre cómo manejar eso en la próxima AESA. Hay ocasiones en las que queremos detectar la
orientación de nuestra pantalla y cambiar el tamaño de nuestros componentes en consecuencia,
por ejemplo, establezcamos el ancho de esta vista al 100% y su altura al 30%, así que
imagina que este es un reproductor multimedia en modo vertical, quieres tener este
reproductor de video en la parte superior y en modo horizontal queremos que esto ocupe
toda la pantalla ahora mismo, la altura de este imaginario. El reproductor de video siempre está al
30% de la altura de la pantalla. Aquí es donde debemos detectar la orientación
de nuestra pantalla y cambiar el tamaño de este componente en consecuencia y, por cierto, para rotar
este simulador de iOS, mantenemos presionada la tecla Comando y usamos la izquierda o la derecha.
flechas como esta, está bien, y para Android tenemos esta barra de herramientas.
Ahora mire el
acceso directo en Mac, su comando + izquierda en Windows, probablemente sea Ctrl + izquierda.
No estoy del todo seguro, así que para admitir diferentes orientaciones,
primero vamos a la aplicación en JSON de forma predeterminada. La orientación de nuestra aplicación está
configurada en vertical, por lo que solo admite el modo vertical. Podemos configurar esto en
horizontal para admitir solo el modo horizontal, pero esto no es muy común.
También podemos configurar esto como predeterminado para admitir ambos modos, así que guardemos los cambios ahora. Para
detectar la orientación de la pantalla, usaremos esta biblioteca llamada ganchos desarrollada por la
comunidad nativa de reacción, por lo que en esta página puede ver que tenemos varios ganchos.
Los ganchos
son funciones que brindan capacidades adicionales a los componentes funcionales, por
ejemplo, podemos agregar estado a un componente de función. ves uno de los
ganchos incorporados en reaccionar si no estás familiarizado con los ganchos te recomiendo que
veas la última sección de mi curso de reacción. Cubrí los ganchos en detalle en esa
sección, así que aquí tenemos varios ganchos o varias funciones. estos ganchos por
convención comienzan con uso, por ejemplo, hemos usado Back Handler para trabajar con el
botón Atrás en Android, hemos usado el carrete de la cámara, hemos usado dimensiones, usamos la
orientación del dispositivo, etc., así que primero instalemos esta biblioteca aquí en la
ventana del terminal en reaccionar. – nativo – comunidad / ganchos, está bien, esto está instalado ahora
volvamos a después de la primera importación especial de Jas, use las dimensiones de la
comunidad nativa de reacción y barra los ganchos con este gancho podemos obtener las
dimensiones correctas de la pantalla, ya sea que estemos en modo vertical o en el
modo horizontal, este gancho siempre regresa a las dimensiones actualizadas.
Esta es una de las
limitaciones de la API de dimensiones en React Native, por lo que esta es la
forma preferida de obtener las dimensiones de la pantalla si admite múltiples orientaciones, así que
hagamos una consola que registre la declaración. y llame a las dimensiones de uso, diga ahora aquí
puede ver que el ancho de nuestra pantalla es 414. Ahora, si giro este dispositivo en
modo horizontal, obtenemos esto nuevo con 896, por lo que cada vez que giramos nuestro dispositivo, nuestro
componente se recupera y aquí recalculamos el actualizado. dimensiones ahora
también tenemos otro gancho para detectar la orientación de la pantalla, use la
orientación del dispositivo, así que llamémoslo aquí, así que recarguemos la aplicación en modo vertical, está bien, entonces obtenemos un objeto, este objeto tiene
dos propiedades, el paisaje es falso y el retrato es verdadero ahora si giro.
En este
simulador obtenemos un objeto de anguila, ahora el paisaje es
verdadero y se representa como falso, por lo que para hacer que este reproductor de video imaginario ocupe
toda la pantalla en modo horizontal, podemos escribir un código como este,
primero llamamos a esta función y luego almacenamos el resultado en este objeto o
Podemos usar la desestructuración de objetos aquí y elegir la propiedad de paisaje de ese
objeto. Ahora podemos calcular la altura dinámicamente, así que si estás en el
modo de paisaje, estableceremos la altura al 100 %; de lo contrario,
la diremos al 30 %. Echemos un vistazo, así que recarguemos la aplicación en modo horizontal. Nuestro
reproductor de video ocupa toda la pantalla. Tenemos bordes blancos. Esto se debe a que
lo colocamos dentro de un área de visión segura. Tal vez para un reproductor de video esto no sea
algo que queramos. ¿Queremos asegurarnos de que el reproductor de video ocupe
toda la pantalla? Pero no nos preocupemos por eso en esta lección. Si giramos esto
también hacia la derecha, la altura de nuestro reproductor de video será el
30% de la altura de nuestra pantalla, por lo que usaremos los ganchos en esto.
biblioteca, ahora podemos obtener las
dimensiones y la orientación de nuestro dispositivo para la aplicación que vamos a
crear en este curso, no vamos a admitir el modo horizontal, así que
volveré a después de JSON y configuraré el orientación de regreso a vertical ahora hablemos de banderas para un flexbox
con flex, podemos crear fácilmente diseños complejos que funcionan de manera consistente en
diferentes tamaños de pantalla, tenemos el mismo concepto en CSS, pero flexbox en reaccionar
nativo es un poco diferente, así que asegúrese de mirar el En las próximas lecciones, incluso
si está familiarizado con Flexbox en CSS, eliminé todo el código que hemos
escrito hasta ahora. Solo estamos importando el componente de vista de React Native ahora en
nuestro componente de aplicación. Devolveremos una vista y le daremos a esta vista un
Un par de estadísticas, así que configuraré el color de fondo en esquivar o azul y
flexionar en uno.
Cuando configuramos Flex en uno, esta vista crece
para ocupar el espacio libre disponible, así que guardar nuestra vista ocupa toda la pantalla. ¿
Qué pasa si configuras Flex en 0.5 ahora nuestra vista ocupa la mitad de la pantalla, entonces con
Flex generalmente configuramos una vista como un contenedor y luego alineamos los niños dentro de
ese contenedor, así que imaginemos que esta vista es nuestro contenedor, así que cambiemos
su color de fondo a blanco y establezcamos flex en 1. entonces ocupa toda la pantalla
ahora dentro de esta vista, vamos a agregar otra vista aquí, podemos usar la
sintaxis de cierre automático porque no vamos a poner nada dentro de esta vista, ahora
vamos a darle a esta vista un par de estilos, así que Estableceremos el color de fondo en
azul Dodger y lo flexionaremos a uno, veamos qué obtenemos
una vez más, obtenemos una pantalla azul porque nuestra vista principal o de contenedor ocupa
toda la pantalla y dentro de este contenedor tenemos esta otra vista, la
vista azul, que está creciendo.
para tomar el espacio libre disponible para que se sienta como un
contenedor, es por eso que toda la pantalla se ve azul ahora con esta vista seleccione
eso, mantengamos presionadas las teclas Mayús y Alt y luego presionemos la flecha hacia abajo para esto,
podemos duplicar codificación versus código, así que dupliquemos este. Más tiempo ahora tenemos
tres vistas, la primera vista es azul Dodger, la segunda vista, hagámosla dorada
y la tercera vista, hagámosla tomate, que es una especie de rojo, así que esto es lo que
obtenemos, ahora nuestra pantalla está dividida en tres segmentos en cada vista.
está tomando 1/3
de su contenedor o 1/3 de la pantalla. ¿ Qué pasa si configuramos la propiedad Flex de
esta vista azul en 2? Ahora la vista azul es dos veces más grande que las
otras vistas. Con esta configuración, esencialmente estamos dividiendo el espacio en cuatro
segmentos por qué cuatro bueno, tenemos dos más uno más uno, por lo que tenemos cuatro segmentos,
dos de cuatro segmentos se asignan a la primera vista de la vista azul, por lo que esta
vista ocupa la mitad de la pantalla o la mitad de su contenedor y estos otras
vistas, cada una ocupa un cuarto de la pantalla, así que estos son los conceptos básicos de flex.
En las próximas lecciones estudiaremos otras propiedades de flex.
Ahora vamos a darle a estos visores un tamaño fijo,
así que en esta vista azul voy a elimine la propiedad Flex, establezcamos el ancho en
100 y el alto en 100, ahora va a repetir,
así que cambiemos la segunda vista y la tercera vista, esto es lo que obtenemos: nuestras vistas están dispuestas
verticalmente en una columna porque eso hace más En las aplicaciones móviles,
normalmente mantenemos nuestros teléfonos en modo vertical, por eso, de forma predeterminada, reaccionar de forma
nativa alinea verticalmente los elementos en un contenedor.
Si ha trabajado con
flexbox en CSS, probablemente sepa que, de forma predeterminada, los elementos se disponen horizontalmente,
por lo que este es uno de las diferencias que tenemos en reaccionar nativo ahora para diseñar esto
horizontalmente vamos a nuestro contenedor, así que aquí está nuestro contenedor, configuramos la
propiedad Dirección flexible en fila, esto es lo que obtenemos, también tenemos reverso real,
por lo que los elementos se distribuyen de derecha a izquierda
y nosotros también tiene columna inversa, así que esto es lo que obtenemos ahora en cualquier momento, si se
pregunta qué valores son aceptables aquí, simplemente elimine esto, presione Ctrl +
espacio, así que aquí está la lista de columnas de valores, que es la columna de valores predeterminada,
fila inversa y fila inversa, ahora configuremos esto.
De regreso a la fila con esta configuración
decimos que nuestro eje principal o primario es el eje horizontal y el eje transversal es
el eje vertical. Esta es una propiedad importante de la flexión. Volveremos
a ella una y otra vez a continuación. hablaremos sobre alinear elementos en esta lección, vamos a hablar sobre
alinear elementos en un contenedor, por lo que actualmente nuestros elementos o nuestras vistas
aparecen en la esquina superior izquierda de la pantalla. ¿Qué sucede si desea empujar esto hacia
la derecha o colocarlos? En el centro de la pantalla vamos a nuestro contenedor y
configuramos la propiedad de contenido justificado en uno de estos valores, así que configúrelo en el
centro. Esto es lo que obtenemos, así que con esta propiedad podemos alinear elementos a lo largo del eje
principal o primario, ¿cuál es nuestro eje principal? El eje aquí es el eje horizontal
porque antes configuramos la dirección Flex en fila, por lo que ahora nuestro eje principal es el eje
horizontal.
Ahora, ¿qué pasa si cambiamos esto a columna?
Ahora nuestros elementos aparecen en el centro del eje vertical porque el
eje vertical ahora es nuestro. Eje primario o principal, esto vuelve a cambiar a Roma
y mira los otros valores, así que tenemos flex y ahora nuestros elementos aparecen al
final del eje horizontal. También tenemos inicio flexible, que es el
valor predeterminado y tenemos tres propiedades para distribuir el espacio. tenemos espacio alrededor,
por lo que con esta propiedad el espacio entre cada dos elementos es igual, así que mire el
espacio aquí, es igual, pero el espacio alrededor del primer y último elemento y los
bordes de la pantalla son diferentes, por lo que aquí tenemos menos espacio si cambia.
esto para
espaciar de manera uniforme ahora el espacio se distribuye uniformemente
entre los elementos y también tenemos espacio entre ellos.
Con esta configuración, el primer y el último elemento se empujan hacia los bordes de la
pantalla y el espacio restante se distribuye entre los otros elementos, así que
cambiemos esto de nuevo. Para Centrar ahora tenemos otra propiedad llamada
elementos alineados y con esto podemos alinear elementos a través del eje secundario, entonces, cuál
es nuestro eje secundario aquí es el eje vertical, así que si configuramos esto en
Centrar ahora nuestros elementos aparecen en el centro de esta pantalla. Veamos los
otros valores que tiene como referencia, el impacto de esto a menos que cambiemos la
altura de una de estas vistas, así que cambiemos la altura de la primera vista a
300 y la segunda vista a 200. Ahora estos espectadores tienen la misma línea de base.
Bien, veamos. en otro valor flex y
esto se explica por sí mismo, por lo que nuestros elementos aparecen al final del
eje secundario.
¿Qué más tenemos aquí?
Flex start ahora los elementos aparecen al inicio del
eje vertical y finalmente tenemos estiramiento, que es el valor predeterminado ahora
no vemos el impacto de esta propiedad a menos que eliminemos la altura de una de
estas vistas, así que voy a comentar esto para ver qué pasó. La vista azul se
estiró para llenar todo el eje vertical, por lo que este es el valor predeterminado. si
comentamos los elementos alineados obtenemos exactamente el mismo resultado, así que recuperémoslo
y cambiémoslo a Centro y recuperemos también la propiedad de altura para
justificar el contenido, alineamos los elementos a lo largo del eje principal y con alinear elementos
los alineamos a lo largo del eje secundario ahora, la primera vez que aprendí sobre estas
propiedades estaba un poco confundido.
Me preguntaba por qué los nombres no son
consistentes cada vez que quería alinear algo. No estaba seguro de qué propiedad
tenía que usar honestamente, es un poco extraño, lo sé. pero te acostumbrarás a medida que
avancemos en el curso, usarás estas propiedades una y otra vez, por lo que
sería algo natural para ti. ¿Qué pasa si quieres cambiar la alineación de
uno de estos elementos? Digamos que queremos coloque la vista azul aquí, así que vamos a
esta vista y configuramos el auto alineado para comenzar flexible, así que mire estas dos propiedades,
tenemos elementos alineados que aplicamos al contenedor y tenemos auto alineado que
aplicamos a un elemento individual.
Ahora esto es lo que lo conseguimos, todo esto se trata de
alinear las piernas, vamos a hablar de envolver elementos, hablemos de envolver elementos, así que
iré a la última vista, esta vista aquí, dupliquemos esto,
cambiemos el color de fondo de la nueva vista a gris. Así que aquí está nuestra nueva vista y
tenemos un poco de espacio adicional aquí. Entonces, ¿ qué crees que sucederá si agregamos
una vista adicional aquí? Averigüemos, dupliquemos esto una vez más
y cambiemos el color de fondo de la nueva vista a verde amarillo. ¿Ves lo que
pasó? La vista azul se redujo para que la vista verde pueda caber en la pantalla, por lo que este
es el comportamiento predeterminado si nuestros elementos se desbordan en el acceso principal, uno o
más elementos se reducen para que otros elementos puedan caber en la pantalla, podemos cambiar. este
comportamiento al habilitar el ajuste, así que vamos a nuestro contenedor,
aquí hay un contenedor, aplicamos un nuevo estilo llamado ajuste flexible, el valor predeterminado es
nowrap, dijimos esto para ajustar, pero cuando guarde los cambios, la alineación de estos
elementos se arruinará, eche un vistazo.
Vea lo que pasó, entonces tenemos un ajuste
porque la vista verde aparece en la segunda línea y la vista azul ya no está
reducida, pero ¿qué pasó con nuestra alineación vertical? Queríamos que todos estos
elementos estuvieran verticalmente en el centro de la pantalla, aquí es donde Mucha gente
se confunde, así que déjame aclararte que cuando habilitamos el ajuste de la propiedad align autos se
comporta de manera un poco diferente, por lo que si tienes varias líneas, la propiedad align autos
determina la alineación de los elementos dentro de cada línea. Déjame mostrarte
un buen ejemplo. Voy a cambiar la altura de la primera vista, la
vista azul a 300, para ver qué sucede dentro de cada línea.
Nuestros elementos están centrados verticalmente. Ahora tenemos un solo elemento en la
segunda línea, pero si tuviera varios elementos con diferentes alturas, todos estos
elementos. también estaría centrado verticalmente, por lo que una propiedad de elementos de línea determina la
alineación de los elementos a lo largo del eje secundario con una línea H. Ahora, si desea
colocar todos estos elementos juntos en el centro de la pantalla o en el centro
del eje vertical, usamos un propiedad diferente
se llama contenido alineado, por lo que queremos alinear todo el contenido como un todo,
dijimos esto para Centrar ahora todos estos elementos aparecen en el centro del
eje vertical o secundario, por lo que esta es la diferencia entre elementos de línea
y contenido alineado los elementos de línea determinan la alineación de los elementos dentro de
cada línea y el contenido alineado determina la alineación de todo el contenido.
Ese
contenido de línea solo funciona si tenemos ajuste, si no tiene ajuste,
no tiene ningún efecto, por lo que se trata de ajustar, así que tenemos cubrimos todas las
propiedades esenciales de flex, pero hay otras tres propiedades que debes
comprender; es posible que no las uses tanto, pero es bueno conocerlas en caso de que
las veas en el código de otra persona, así que aquí está nuestra vista azul, aquí podemos aplicar una
propiedad llamada base flexible y con esto podemos establecer el tamaño de un
elemento a lo largo del eje principal, por lo que nuestro eje principal aquí es el eje horizontal, por lo que
si configuramos esta propiedad en 100, esto es equivalente a establecer el ancho en
100, así que si comento esta propiedad y guardamos los cambios, obtenemos el
mismo resultado.
Nuestro eje principal era el eje vertical. La configuración de la base Flex
sería equivalente a establecer la propiedad de altura para que la base Flex pueda asignarse al
ancho o alto. Ahora tenemos otra propiedad flex grow
si dijimos esto a uno, en el momento en que guarde los cambios, verá que la vista azul
crece para llenar el espacio disponible, eche un vistazo aquí, de hecho, está vendiendo flex
grow es exactamente lo mismo que configurar la propiedad Flex ahora si digo que
no estamos haciendo los cambios. Veremos el mismo resultado porque no sé si hay un
problema con un simulador o las herramientas, así que verifiquemos este aspecto de guardado, no
obtenemos el mismo resultado, pero si actualiza manualmente usando el
menú del desarrollador, vemos lo mismo. El resultado es aplicar la
propiedad Flex grow. Bueno, ahora tenemos otra propiedad llamada Flex Shrink.
Honestamente, no es algo que se use con tanta frecuencia, pero déjame explicarte cómo funciona.
Es esencialmente lo opuesto a Flex Grow, así que para simplificar las cosas,
eliminemos estas dos propiedades y establezcamos. el ancho a 400 ahora nuestra vista azul ocupa
mucho espacio, por lo que la vista naranja no se ajusta a la pantalla que tenemos
desbordada.
En este caso, podemos establecer la contracción de Flex en 1 y con esto decimos
que si tienes este elemento desbordado. se puede encoger para que otros elementos puedan
caber en la pantalla, eche un vistazo, guarde, ahí lo tiene. Le dije que flex
es una abreviatura de flex grow y flex range, por lo que si decía flex a un
número negativo, esto es exactamente lo mismo que configurar Flex range. Guardo los cambios,
no obtenemos el mismo resultado porque hay un problema aquí, por lo que debe
actualizar manualmente. Ahora obtenemos el mismo resultado al configurar
la propiedad de contracción de Flex, por lo que se trata de bases flexibles, crecimiento flexible y rango flexible. En esta lección vamos a hablar sobre el
posicionamiento absoluto y relativo en React Native, por lo que tenemos nuestro contenedor
con tres elementos como antes. ¿Qué sucede si desea mover esta
vista dorada sin cambiar el diseño a su alrededor? Es muy fácil. aquí está nuestra
vista dorada, podemos establecer la parte superior en 20 ahora, cuando guarde los cambios,
esta vista dorada se moverá 20 píxeles independientes desde la parte superior.
Aquí
también podemos establecer un valor negativo para que nuestra vista dorada se mueva a 20 píxeles desde
la parte superior. es exactamente lo mismo que configurar la propiedad inferior, por lo que si dije
inferior a 20, eso significa que desea mover esta vista dorada 20 píxeles desde la parte inferior,
también tenemos izquierda a derecha, así que muevamos esto 20 píxeles desde la izquierda o 20
píxeles desde la parte inferior. Bien, con estas propiedades podemos colocar
un componente en relación con su posición actual sin afectar el diseño a
su alrededor, por lo que en todos estos ejemplos las vistas azul y roja han estado exactamente
donde se supone que deben estar y no se movieron.
sucede porque en reaccionar nativo todos los componentes de forma predeterminada tienen sus
posiciones establecidas en relativa, así es como funciona el posicionamiento relativo en CSS
y, en contraste con el posicionamiento relativo, ahora tenemos posicionamiento absoluto, si
guardo los cambios, esta vista dorada se ubicaría en
relación con su padre, que es este contenedor que ocupa toda la pantalla
y estas otras vistas se moverán como resultado de este posicionamiento, déjame
mostrarte antes de guardar los cambios, establezcamos la parte superior en 20 y la izquierda también en 20 para que
podamos ver con claridad, así que guarda.
Mire, nuestra vista dorada está ubicada a 20 píxeles desde la
izquierda y la parte superior de su principal, que es el contenedor que ocupa toda la pantalla
y, como resultado de esta ubicación, estas otras vistas se movieron para que
no estén en su posición original. Déjame mostrarte una. Más tiempo, así que voy
a cambiar la posición nuevamente a la
vista relativa con posicionamiento relativo, estas dos vistas no se movieron, permanecieron en su
posición original. Si usamos el posicionamiento absoluto para esta vista dorada, se
ubicará en relación con su padre y estas otras vistas. se reposicionarán, se movieron
bien, así que para recapitular en reaccionar nativo, todos los componentes de forma
predeterminada tienen su posición establecida en relativa, lo que significa que podemos moverlos en
relación con su posición actual sin cambiar el diseño alrededor de ellos,
si cambiamos la posición a absoluta, podemos mueva un componente en relación con su
padre y el diseño a su alrededor se verá afectado.
Esto se trata de posicionamiento absoluto y
relativo en reaccionar nativo. Ahora es el momento de un ejercicio,
así que quiero que implemente dos pantallas de nuestra aplicación, la pantalla de bienvenida y la
ver pantalla de imagen para la pantalla de bienvenida tenemos este logotipo y esta
imagen de fondo, puede descargarlos debajo de este video ahora en esta sección nuestro enfoque es
exclusivamente en diseñar componentes en la pantalla, por lo que no nos preocupamos en
diseñar, por ejemplo, nuestro texto aquí es muy pequeño y está cerca del logotipo,
no queremos preocuparnos por estos detalles, hablaremos sobre el estilo en la
siguiente sección, así que regresaremos y solucionaremos esos problemas ahora que
son cuadros rojos y verdes. marcadores de posición para los botones de inicio de sesión y registro que
crearemos en la siguiente sección, ahora para la pantalla de visualización de imágenes nuevamente
tenemos dos marcadores de posición para los íconos de cerrar y eliminar que agregaremos en la
siguiente sección, así que continúe e implemente estos.
dos pantallas, esto te tomará
unos 15 minutos de tu tiempo una vez que hayas terminado, regresa, mira mi
solución, lo primero que quiero hacer es crear una nueva carpeta
aquí en la aplicación de llamada raíz. Voy a poner todas el código fuente de nuestra aplicación
dentro de esta carpeta, esta es una buena práctica a seguir porque con esto
podemos separar el código de nuestra aplicación del código que genera automáticamente
nuestras herramientas, digamos que mañana sucede algo loco con este
proyecto, podemos crear un nuevo nativo de reacción.
proyecto y simplemente copie el
código de su aplicación en ese proyecto. Bien, aquí está nuestra carpeta de aplicaciones. Movamos la
carpeta de activos dentro de esta carpeta. Ahora tenemos que ir después de JSON y
actualizar la ruta a estas dos imágenes para que la aplicación recorte los activos y ahorre una vez más.
asegúrese de que todo esté funcionando correctamente, así que en nuestra carpeta de aplicaciones
agreguemos una nueva carpeta llamada pantallas. Me
gusta agregar todos nuestros componentes de pantalla dentro de esta carpeta. Esta es una convención
que siguen muchos desarrolladores nativos de reacción, usted no tiene que seguir.
Si
no le gusta, en la carpeta de pantallas agreguemos un nuevo
archivo llamado pantalla de bienvenida. Mire la convención de nomenclatura que estoy usando para nombrar este
archivo, así que para estos componentes me gusta usar la palabra pantalla en el archivo y los
componentes. nombre ahora aquí queremos implementar un
componente de función anteriormente en el curso. Le dije que instalara esta extensión reaccionar
nativo reaccionar fragmentos de Redux con esta extensión podemos escribir código rápidamente, así que
a lo largo del curso usaré los atajos que vienen con esto
extensión, siempre puede obtener información sobre este acceso directo a continuación o en la
página de GitHub de este proyecto, así que aquí hay un ejemplo.
Escribimos nuestro SF que es la
abreviatura de reaccionar función sin estado. Ahora tenemos la plantilla básica para un
componente de función con la edición de cursor múltiple habilitada. así que aquí podemos cambiar el nombre de
este componente si lo desea. Una vez que hayamos terminado, presionamos el botón Escape para
deshabilitar la edición del cursor múltiple. Ahora primero queremos agregar un componente de fondo de imagen
aquí, así que eliminemos el elemento div. Escribimos fondo de imagen aquí.
Importación automática, así que importemos esto. Ahora necesitamos configurar la fuente de esta
imagen para que la fuente sea igual. Aquí llamamos a la función Requerir. Actualmente estamos
en la carpeta de pantallas, así que subamos un nivel, ahora vamos a los activos y cargamos el
punto de fondo jpg, está bien. guarde los cambios, debemos darle un estilo a este componente,
así que después de este componente escribiré r
n SS que es la abreviatura de reaccionar hoja de estilo nativa para que genere rápidamente
esta hoja de estilo de código que crea, almacenamos el resultado en este objeto Estilos
y desafortunadamente esto no se importa en la parte superior, por lo que tenemos que importar manualmente
la hoja de estilo.
Bien, en este objeto tendremos un montón de pares clave-valor,
así que agreguemos un nuevo par clave-valor que se llama fondo, aquí es donde
agregaremos. todos los estilos para nuestro componente de fondo de imagen, así que
configuraré flex en 1 para que este fondo de imagen ocupe toda la pantalla. Bien, ahora aquí vendemos nuestro estilo a los estilos que
guardan el fondo. Vayamos a nuestro componente de aplicación y rendericemos nuestra pantalla de bienvenida.
Voy a eliminar todo el código aquí, ya no lo necesitamos, así que escribimos
pantalla de bienvenida y el código vyas se importa automáticamente en la parte superior.
Veamos qué obtenemos, así que aquí está nuestra imagen de fondo. Ahora
agreguemos nuestros botones, así que aquí adentro. A este componente vamos a agregar una vista, le
daremos un estilo, así que configuraremos esto en estilos para el
botón de inicio de sesión.
Ahora vamos a crearlo aquí. Como puedes ver, ya no escribiré en
nueve puestos. Me gusta separarlos. entonces, el botón de inicio de sesión, digamos que está
al 100% y su altura a 70 píxeles, el color de fondo debería ser ahora
déjame ver mi hoja de trucos, así que será F c5 c6 5 guarda los cambios,
podemos encontrar vista variable porque lo hicimos. No lo importamos en la parte superior, así que agreguémoslo
a esta lista. Digamos que nuestro botón está actualmente en la parte superior. Queremos colocarlo
debajo aquí. ¿Cómo lo hacemos? Bueno, antes hablamos sobre la
dirección flexible, por lo que, de forma predeterminada, la dirección flexible está configurada. para llamarlo para que nuestro acceso principal
sea esta línea vertical. Les dije que usando contenido justificado podemos alinear
elementos a lo largo del acceso principal, así que vamos a los estilos de nuestro contenedor, que es
esta imagen de fondo.
Aquí configuramos el contenido justificado para flexionar y el valor predeterminado.
el valor es inicio flexible, esa es la razón por la cual nuestro botón aparece aquí en la parte superior,
así que dijimos esto para flexionar y guardar los cambios
ahora nuestro botón está aquí hermoso, dupliquemos esto para agregar el segundo botón.
Voy a cambiarle el nombre a este botón para registrarlo ahora. dupliquemos estos estilos y
cambiemos el nombre para registrar el botón. Voy a usar el mismo ancho y alto, pero cambiaré
el color de fondo a 4e c-d-c por ahora, quizás estés pensando que estoy escribiendo demasiado
rápido, pero en este punto ya deberías haber hecho tu ejercicio,
no deberías codificar conmigo, así que no quiero hacer perder el tiempo a mucha gente
escribiendo muy lentamente.
Bueno, guarda los cambios. Aquí está nuestro segundo
botón. Hermoso. Ahora necesitamos agregar el logotipo en la parte superior, pero aquí hay un problema. Si
tenía el logotipo porque dijimos justificar el contenido para flexionar y nuestro logotipo
terminará aquí, entonces, ¿cómo lo colocamos en la parte superior? Aquí es donde podemos usar el
posicionamiento absoluto para poder colocar el logotipo en relación con su padre, que es este.
imagen de fondo así que veamos aquí la imagen ahora déjame mostrarte algo
en este caso la importación automática no funcionó este elemento con este ícono azul así que si
miras en el lado derecho no tenemos importación automática a veces esto sucede en
el menú contextual eso aparece aquí, así que mira, tenemos dos instancias de imagen, la
segunda donde el ícono naranja tiene importación automática, así que asegúrate de seleccionar
esa para que ahora puedas ver que la imagen se importa en la parte superior, así que aquí estoy usando la
sintaxis de cierre automático porque No vamos a poner nada dentro de esta imagen ahora
configuremos su fuente una vez más usamos una función requerida vamos a la
carpeta de activos y cargamos el logotipo – punto rojo PNG probemos el resultado hasta este punto nuestro
logotipo es demasiado grande, así que vamos a darle un par de estrellas, configuramos el estilo para los estilos de
ese logotipo ahora aquí y, por cierto, tenga en cuenta que estoy ordenando
estas claves, de modo que si tiene el logotipo del botón de inicio de sesión en segundo plano, etc., esto hace que
sea más fácil mantener sus aplicaciones, así que establezca el tamaño de este logotipo en
100 por 100, por lo que el ancho es 100 y la altura es 100.
También guarde, está
bien, esto es bueno, nuestro logotipo está abajo, ahora debemos usar posicionamiento absoluto,
así que estableceré la posición en absoluto y pondremos esto 50. píxeles desde la
parte superior de la pantalla, así que esto es lo que obtenemos. Podemos empujarlo un poco hacia abajo,
digamos 70, eso es mejor, pero ¿cómo lo colocamos en el centro? Bueno, Ernie, hablamos sobre el
acceso primario y secundario en flexión, por lo que nuestro eje principal es la línea vertical
y el eje secundario es la línea horizontal usando qué propiedad se pueden alinear
elementos a lo largo del eje secundario usando alinear elementos para que vaya a nuestro contenedor
aquí dijimos alinear elementos al centro y con
esto podemos alinear elementos a lo largo del eje secundario eje, eche un vistazo ahora, la imagen
está justo en el medio de la pantalla, hermosa,
así que finalmente necesitamos agregar nuestro eslogan debajo de este logotipo, así que agreguemos un componente de texto para que tengamos
este ícono naranja aquí para que podamos importar automáticamente cuál era nuestro
eslogan.
celda, lo que no necesitas dice que nuestro texto aparece aquí, así que lo que debemos
hacer es colocar el texto y el logotipo dentro de un contenedor y aplico
posicionamiento absoluto en ese contenedor, está bien, entonces agreguemos una nueva vista aquí y luego vamos
a mueva los componentes de imagen y texto dentro de esta vista, así que con estas líneas
seleccionadas mantendré presionada la tecla Alt y luego presionaré la flecha hacia arriba con esto
podemos mover el código, así que ahora apliquemos un estilo aquí, podemos decir estilos en el
contenedor del logotipo. como quieras llamarlo ahora vamos a crear esto, así que aquí está el logotipo. Ahora
creamos un contenedor local. Esto es muy simple. Solo quiero mover
estas dos propiedades dentro de este objeto. Veamos qué sucede
para que nuestro texto esté en la posición correcta pero nuestro logotipo no. exactamente en el medio de
la pantalla esto sucedió porque una vez que agregamos este nuevo contenedor, la alineación
de este contenedor se restablece al inicio flexible de forma predeterminada, por lo que en este contenedor una vez
más necesitamos configurar la alineación de elementos al centro para que podamos alinear los elementos a lo largo
del secundario o el eje horizontal, eche un vistazo y aquí está el resultado final.
En la siguiente sección, aplicaremos un montón de estilos para hacer que esta pantalla sea
bonita.
Ahora, si desea mi código fuente, puede obtenerlo del archivo zip que le
proporcioné. Al comienzo del curso, en la primera sección, ese archivo zip
contiene todo el código fuente que escribiremos a lo largo de este curso, por lo que
cada sección tiene una carpeta de inicio y de finalización donde puede encontrar un
código fuente relevante ahora mismo. la carpeta de pantallas
agreguemos un nuevo archivo llamado ver imagen pantalla que Jay tiene aquí vamos a
crear un componente de función. Estoy contento con el nombre ahora en este componente
primero queremos agregar una imagen, así que configuremos su fuente para que requiera vamos a
la carpeta de activos y cargamos el jpg de la silla.
Ahora probemos nuestra aplicación hasta
este punto, así que vamos después de j/s y renderizamos la pantalla de visualización de la imagen. Ok, veamos
qué obtenemos para obtener este tipo de pantalla blanquecina porque esta imagen Lo que he
proporcionado es muy grande y no cabe en la pantalla, por lo que necesitamos aplicar un
montón de estrellas. Aquí configuramos el estilo primero, debemos crear un estilo para el objeto,
así que escribimos nuestro NSS. Bien, ahora importemos la hoja de estilo en el arriba,
entonces en este objeto vamos a encontrar un montón de soportes para nuestra imagen. Voy a
establecer el ancho en 100% y el alto en 100% también
y finalmente agreguemos estilo a los estilos de esa imagen, veamos qué obtenemos.
Así que aquí está nuestra imagen, pero si prestas mucha atención, los lados de la imagen están
cortados, déjame mostrártelo.
Aquí en el proyecto, echemos
un vistazo. Acabo de compartir ese jpg. ¿ Ves que los lados de esta canasta están
cortados aquí? debido al modo de cambio de tamaño, para resolver este problema en nuestra imagen y configurar el modo de cambio de tamaño para que
contenga ahora nuestra imagen encaja perfectamente en la pantalla, pero tenemos este
fondo blanco, por lo que tenemos que cambiarlo, así que envolvamos esto dentro de la vista que
va a sea nuestro contenedor, así que veamos, importémoslo
ahora, le damos un montón de estilos, de modo que estilo sea igual a estilos, el contenedor
ahora definamos la postura, es un contenedor una vez más. Estoy tratando de ordenarlos
alfabéticamente, esto hace que sea más fácil mantener nuestra aplicación
también si Verás, eslint instant hace esto automáticamente por ti, pero en
este curso no estoy usando es lane porque sigue quejándose y
crea una mala experiencia para ti, así que tengo que ordenarlos manualmente para que este
contenedor establezca su color de fondo.
a negro y también me gusta configurar
Flex en uno para asegurarme de que esta vista ocupe toda la pantalla, así que esto es lo que
queda hermoso. Ahora agreguemos los marcadores de posición para la ropa y eliminemos los
botones, así que volvamos a nuestro contenedor, agreguemos otra vista. estilo,
digamos estilos que cierran el ícono, ahora definimos los estilos, el ícono de cierre viene
antes del contenedor, así que establezcamos su ancho en 15 y la altura en 15 también. Voy a
establecer el color de fondo en FC 5 C 6 5 ahora si guardamos los cambios en nuestro El botón
aparece aquí para resolver este problema, usaremos posicionamiento absoluto, queremos
poner esto exactamente aquí, así que configuramos la posición en absoluto, así que ahora podemos
posicionar este componente en relación con su padre, que es el contenedor, así que
digamos que queremos posicionar. Esto está a 40 píxeles de la parte superior y a 30 píxeles de la izquierda,
por lo que aparece aquí. Estoy contento con esto, así que sigamos adelante ahora, agreguemos nuestro
segundo marcador de posición, así que seleccionaré esto.
Mantenga presionada la tecla Mayús alt y hacia abajo para
duplicar este código ahora. cambiemos el nombre de esto para eliminar el ícono y luego, cuando encuentre un estilista, elimine el
ícono ahora para ahorrar tiempo. Voy a copiar
estos estilos de combustible. Sé que copiar el código es malo, pero arreglarán esto en el
futuro, así que por ahora no lo haga. Preocúpate por eso, así que cambiemos el color de fondo a
4e CD C. Por ahora queremos que esto esté a 30 píxeles desde la derecha de la pantalla.
Mira, esto es lo que obtenemos, así que estoy feliz por ahora a medida que avanzamos en el
curso. Vamos a mejorar nuestro código, lo vamos a refactorizar, lo haremos
más profesional. Bien, un problema que veo en nuestra
implementación actual es la duplicación de estos códigos de color.
Hemos repetido esto
en algunos lugares, así que lo que podemos hacer ahora es para extraer estos códigos de color, colóquelos en
un archivo separado como colores de Jas y con esto tenemos todos los colores que
utiliza nuestra aplicación en un solo lugar, así que si mañana decidimos cambiar el nombre de
esta aplicación y usar diferentes colores, hay un solo archivo que tenemos que modificarlo, así que en
nuestro proyecto dentro de la carpeta de la aplicación agreguemos una nueva carpeta llamada config aquí
agregamos un nuevo archivo llamado color CAS ahora en este archivo voy a exportar un
objeto predeterminado con estas propiedades, podemos definir nuestro color primario para que Vamos a
configurar esto en F c5 c6 5 y nuestro color secundario en 4e CD C por ahora guardamos los
cambios, volvemos a nuestra pantalla de visualización de imágenes en la parte superior, importamos colores desde la
barra de colores de configuración y tenga en cuenta que estoy separando la importación.
declaración de mi
código de la declaración de importación de nuestras bibliotecas de terceros nuevamente, esta es una
convención que mucha gente sigue para que su código sea limpio y fácil
de mantener, por eso importamos colores, este es un objeto que exportamos aquí, está
bien, así que podemos reemplazarlo. Estos valores codificados
con colores primarios y colores secundarios guardan los cambios, así que
eche un vistazo, obtenemos el mismo resultado que antes, pero el código de nuestra aplicación es más fácil
de mantener ahora que tenemos un solo lugar donde podemos definir nuestra paleta de colores,
algunas personas.
argumentan que incluso el negro o el blanco no deberían estar codificados,
deberían ser parte de la paleta, por lo que en nuestra paleta de colores podemos definir una nueva
propiedad negro y establecerla en cero cero cero porque mañana, si decidimos
cambiar el nombre de esta aplicación, podríamos usar un color oscuro diferente en lugar de
negro puro, por lo que es una buena práctica incluirlo aquí, así que guarde ahora podemos reemplazar este
valor codificado con colores que son negros, eso es bueno, ahora tenemos otro
problema aquí, la duplicación de estas propiedades, por lo que nuestros íconos Los íconos
aquí tienen un ancho y alto de 50, por lo que quizás se pregunte si podemos
definir estas propiedades en un solo lugar y reutilizarlas en dos lugares.
Ciertamente podemos, pero nos desharemos de esta vista en el futuro.
Voy a usar
un ícono real, así que por ahora no estoy muy preocupado por esto, esto es solo una
solución temporal. Hola chicos, ma chère, así que, como les dije
antes, este tutorial son las primeras dos horas de mi curso nativo de reacción definitiva,
el curso completo está dividido. en dos partes, temas básicos y avanzados, pero
cada parte dura entre cinco y seis horas, por lo que el curso completo dura más de diez
horas e incluye todo el código fuente. Reescribiendo este curso, cada sección
tiene un antes y un después del código fuente para que pueda codificar fácilmente. conmigo además
obtendrás muchos ejercicios y soluciones paso a paso y un certificado
de finalización que puedes agregar a tu currículum si estás interesado.
Pongo el
enlace a continuación. Estoy ofreciendo un descuento a los primeros 100 estudiantes. así que si estás
interesado inscríbete ahora antes de que sea demasiado tarde
gracias y espero verte en el curso.