bienvenido a mi último curso nativo de reacción
Amash no quiero ser tu instructor en este curso vas a
aprender cómo crear aplicaciones móviles rápidas y hermosas usando reaccionar nativo
asumo que en este curso no sabes nada sobre reaccionar nativo 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 o una calculadora, vas a trabajar en aplicación
llamada hecho con ella esta aplicación es un mercado para vender estas cosas
no necesita más nada con lo que haya terminado aquí está la pantalla frontal de nuestra
aplicación podemos iniciar sesión o registrarnos inicie sesión con mi cuenta aquí puede ver todo
el artículos que la gente está vendiendo, por ejemplo, tiene 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, puede ver
quién es el vendedor podemos ver dónde está el artículo ubicado en el mapa, también podemos
enviar un mensaje al vendedor y este enviará una notificación automática al
dispositivo móvil de destino.
Ahora podemos bajarlo para cerrarlo. También podemos
desplegar la lista para actualizarla al igual que las aplicaciones que usa. a diario podemos
filtrar la lista y ver 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 tiene un precio de $ 99
ahora asignémoslo a una categoría así que pongámoslo en la categoría de
muebles ahora cuando nos publique en el servidor verás una
barra de progreso y una hermosa animación al final mira ahí tienes
y hecho aquí están los listados que publiqué también tiene la página de mi cuenta
donde podemos acceder a mis listados y los mensajes que he recibido ahora podemos
deslizar un elemento hacia la izquierda para eliminarlo al igual que las aplicaciones que usa a diario
para si sigues hasta el final de este curso, dominarás la reacción natural
ive y podrá crear aplicaciones móviles con confianza, ¿está
emocionado de crear esta aplicación conmigo, luego salte y comience a tomar este curso?
para
saber que JavaScript no reacciona porque react native se basa en react, pero
en lugar de apuntar al navegador, apunta a plataformas móviles, no necesita
ser un experto en react, pero necesita conocer todos los conceptos esenciales, como
los componentes JSX props state y Entonces, 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 te enseña 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 usted o no?
OS
y Android, estas aplicaciones son realmente nativas, por lo que no son aplicaciones web que parecen
una aplicación móvil, por lo que con React Native no necesita saber 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 hacer eso, por lo que podemos escribir casi todo el código de su aplicación en
JavaScript y compartirlo en iOS y Android, es por eso que muchas empresas
en estos días prefieren construir sus aplicaciones usan React Native porque no
necesitan contratar dos equipos separados de desarrolladores que mantienen dos
bases de código diferentes, una para iOS escrita en Swift u Objective-C y la otra para Android
y Java o Cartland, ahora uno de los conceptos erróneos comunes sobre React.
nativo
es que no puede usarlo para crear aplicaciones serias, por ejemplo, tenemos a este
tipo aquí, su nombre es John Smith, es un desarrollador con muchas
opiniones sólidas, cree que la única forma de crear algo serio es usando
el na lenguajes tivos en las herramientas, bueno, eso no es cierto,
aquí hay cinco aplicaciones creadas con react native Facebook Instagram Pinterest
Skype uber AIDS y muchas, muchas más, así que si tiene una idea que desea convertir
en una aplicación real usando sus habilidades de JavaScript, react native es el La mejor herramienta para
tener su caja de herramientas. Hay dos formas de crear aplicaciones nativas de Reacción.
Podemos usar Reacción nativa simple o Expo. Expo es un conjunto de herramientas y un
marco que se encuentra encima de Reacción nativa y nos oculta mucha complejidad. Lo
hace. increíblemente rápido y fácil de crear aplicaciones nativas de reacción si
nunca ha realizado desarrollo móvil antes Expo es el camino a seguir, puede
crear y ejecutar su primera aplicación 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,
también tenemos nuestro código JavaScript en un sitio que se puede compartir entre
estas dos plataformas orms, por lo que este enfoque es adecuado para personas que tienen algo de
experiencia con la programación de iOS o Android.
En este curso, asumo que
no tiene 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.
problema para
muchas aplicaciones porque Expo nos brinda muchas funciones nativas para que podamos crear una
aplicación realmente completa usando solo Expo y eso es lo que le mostraré en este
curso, pero si tiene algo de experiencia con el desarrollo móvil y
quiere tener algo de flexibilidad extra si quiere personalizar o ajustar algunos
componentes nativos, siempre puede expulsarlos de la exposición y obtener acceso a los
proyectos subyacentes de ios y android, le mostraré cómo hacerlo más adelante en
este curso, así que a continuación voy a sh Ahora sabe cómo configurar su
entorno de desarrollo, lo primero que quiero que haga es asegurarse de que
está ejecutando la versión de nodo 12 o superior, así que aquí en la ventana de la terminal
ejecutemos el guión de nodo V Estoy ejecutando la versión de nodo 12 punto catorce punto uno
asegúrese de que está ejecutando la versión de nodo 2 o superior ahora instalemos la CLI de exposición
globalmente, de modo que NPM si está en una Mac y no ha configurado los permisos
correctamente, debe prefijar esto con sudo para que npm install – g expo – La CLI va a tardar un rato, así que voy a
pausar la grabación.
Está bien. La Expo CLI está instalada. Es
posible que recibas algunas advertencias. un proyecto nativo de reacción ahora
también debe instalar un cliente experto en su teléfono esta es una aplicación que
debe descargar de la App Store está disponible tanto para iOS como para Android con
esto podemos ejecutar 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 de PS Puedes usar cualquier
editor de código que prefieras, pero es más fácil si descargas vs code y codificas
conmigo porque a lo largo del curso te mostraré muchos consejos
y trucos, muchos atajos para escribir código rápido. Me encantarán estos consejos
para que pueda descargar el código vs desde el código que Visual Studio comunica como escuchar el
código vs.
Vamos a usar un montón de extensiones. Estas extensiones son opcionales,
pero hacen que nuestro trabajo sea más fácil.
native la primera extensión que vamos a usar es herramientas nativas de reacción
creadas por Microsoft y con esto podemos depurar nuestras aplicaciones nativas de reacción
dentro del código vs es muy popular la segunda extensión que vamos a usar es la barra de
reacción nativa la barra de reacción Fragmentos de Redux Esto nos da 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 prettier para formatear mi código, así que
busquemos más bonito.
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.
Aplique 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
las preferencias y luego a la configuración, busque el formato al guardar, así que asegúrese de habilitar
esta opción para que en cualquier momento presione ctrl + S o comando + S vs código usará
más bonito para formatear su código ahora que hemos configurado nuestro entorno de desarrollo,
creemos nuestro primer proyecto Expo, así que aquí en la ventana de la terminal escribamos
expo y listo, ese es el nombre de la aplicación que vamos a construir.
llámelo como quiera, así que vamos con esto ahora tenemos que elegir un
flujo de trabajo para construir 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 de administración se
encargará toda la complejidad detrás de la 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 usa un flujo de trabajo simple, tendremos un proyecto nativo de reacción básica,
así que lo haremos tengo esos proyectos de iOS en Android en este curso.
Voy
a ir con esta plantilla en blanco. También tenemos una plantilla con mecanografiado, pero
no la usaré en este curso porque quiero aportar una complejidad adicional,
así que usemos el flujo de trabajo de administración en blanco. plantilla ahora esto tomará un tiempo, así que
voy a pausar la grabación, nuestro proyecto está listo, así que
vayamos a esta carpeta y luego ábrala en código vs, ejecute esta aplicación, déjeme darle una
descripción general rápida de lo que tenemos en esto proyecto, por lo que tenemos esta carpeta de activos, aquí es
donde colocamos todas las imágenes, archivos de audio, videos, etc., cualquier tipo de activo que
desee agrupar con nuestra aplicación. Ahora también tenemos después de J s.
arriba estamos importando reaccionar
también estamos importando un un par de componentes de react native, por lo que esta
vista que tenemos aquí es como un div en el mundo web y el texto se usa para
mostrar texto en la pantalla, por lo que en react native no tenemos
elementos HTML como ancla de párrafo div, etc.
tiene que usar los bloques de construcción
o los componentes proporcionados por un nativo de reacción. Este es un ejemplo. Esta aplicación
es un componente de función, por lo que, de manera predeterminada, reacciona nativo usa componentes de función
porque son más simples, son más livianos, puede usar componentes de clase
pero es es mejor usar componentes de función, así que aquí estamos devolviendo una
expresión JSX, tenemos una vista que es como un div, esta vista tiene cierto estilo, lo
veremos más adelante y dentro de esta vista tenemos este componente de texto para
mostrar este texto en el pantalla ahora, ¿ qué es este estilo aquí?
Bueno, estamos haciendo referencia a este objeto Da estilo al contenedor.
Estamos creando el
objeto Estrellas aquí usando el objeto de hoja de estilo, por lo que llamamos al
método de creación y pasamos un objeto. Este objeto tiene una propiedad llamada. contenedor que
contiene todos los estilos para nuestro contenedor ahora, si observa el nombre de
sus Estrellas, se ven familiares, por ejemplo, tenemos un color de fondo, esto es
como un atributo CSS, pero no es CSS, es solo una propiedad de JavaScript
cuando compilamos nuestro la aplicación reacciona de forma nativa, traducirá estas propiedades
y los componentes que estaban usando en sus widgets nativos, por ejemplo, esta vista
aquí si creamos esta aplicación para iOS, esta vista se asignará a la vista de la interfaz de usuario
si la creamos para Android se asignará a La vista de Android, por lo que con estos
componentes podemos representar nuestra interfaz de usuario de una manera abstracta o independiente de la plataforma
cuando comparamos nuestra aplicación, React Native va a asignar estos componentes a sus
widgets nativos, por eso las aplicaciones que creamos con React Native son
aplicaciones nativas reales.
ahora deberíamos abrir una ventana de terminal para iniciar el
servidor Expo para servir nuestra aplicación, así que en la parte superior vamos al menú de vista mira el
acceso directo para la ventana de terminal en Mac es control y marca de retroceso así que abramos sube
la ventana de la terminal aquí escribimos NPM start
now 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é ejecutando así que esto es lo que
llamamos Metro bundler es el paquete de 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 podemos ejecutar nuestra aplicación en un dispositivo Android
o emulador podemos ejecutarla en un simulador de iOS podemos
ejecutarla en un navegador web puede enviar un enlace a nuestra aplicación con un correo electrónico para que otras
personas puedan probarla también podemos publicar nuestra aplicación en expo para que cualquier persona en el mundo
pueda ver nuestra aplicación usando el cliente expo esto es mucho más rápido y más fácil que pasar
por las tiendas de aplicaciones si ya lo ha hecho cualquier 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 no tenemos que preocuparnos por esto, simplemente podemos
publicar nuestra aplicación en Expo y cualquier persona en el mundo puede fácilmente vea nuestra aplicación, por
supuesto, esto es puramente para desarrollo y prueba, no para producción, pero hable
de eso más adelante en esta sección, así que este es Metro bundler ahora, si regresa a
la ventana de terminal en vs code, puede ver estos comandos y su atajo,
estos son los mismos comandos que vio en Metro Bundler, por ejemplo, podemos
presionar a para ejecutar nuestra aplicación en un emulador de Android o I para ejecutarla en un
simulador de iOS y aquí es donde aparecerán los registros de nuestra aplicación, por lo que si algo sale
mal, esto es el primer lugar en el que queremos ver todos los errores y mensajes de registro
aparecerá aquí, por lo que queremos tener esta ventana de terminal abierta en todo momento,
ahora que Metro Bundler se está ejecutando.
A continuación, le mostraré cómo ejecutar
nuestra aplicación. en un simulador de iOS en esta lección, le mostraré cómo
ejecutar nuestra aplicación en un simulador de iOS para hacer esto, necesitará una Mac si no tiene
una Mac, no se preocupe, aún puede ejecutar la aplicación en su teléfono, ya sea un iPhone
o un teléfono Android, también puede ejecutar la aplicación en un A dispositivo virtual Android que
le mostraré en la siguiente lección ahora quiero que instale Xcode, puede
obtenerlo de la App Store, así que abra nuestra App Store y busque Xcode aquí,
puede obtener la última versión Xcode es un gran aplicación, por lo que instalarla tomará
un tiempo, tal vez de 20 a 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 la última línea de comandos.
herramientas ahora podemos
iniciar el simulador de analista, así que cerremos esta ventana, vayamos al
simulador de herramienta de desarrollador abierto de Xcode, así que aquí está nuestro simulador de iPhone, podemos
moverlo, podemos cambiar su tamaño, podemos cambiar el tipo de este dispositivo yendo
a archivo dispositivo abierto en iOS puede ver varios dispositivos iOS, por ejemplo,
podemos iniciar un iPhone 8, ahora iniciará un segundo simulador, lamentablemente, en
el momento de grabar este video, el experto se confunde cuando tiene varios
simuladores de iOS en ejecución, así que voy a cerrar Mira este iPhone 8. Voy a usar este
iPhone 11. Ahora vamos a Metro Bundler 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 comenzará nuestro proyecto en iOS.
simulador la primera vez que verás este mensaje apareciendo abierto y
expuesto, así que abrámoslo para que este sea 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 genial Quiero poner esto a un lado y abrir 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á toma mire
guardar y aquí está el mensaje de hola mundo esta es una de las características poderosas de
reaccionar nativo llamada actualización rápida para que podamos ver nuestros cambios tan pronto como guardamos
no tenemos que esperar a que las facturas nativas terminen ahora en este simulador del IRS
podemos abrir el menú del desarrollador presionando com mand + D ahora, desafortunadamente,
esto ya no funciona en mi misión.
Creo que esto sucedió después de que actualicé
mi Xcode, así que descubrí que hacer que esto funcione. Tengo que presionar control D primero y
luego comando D, así que este es el menú de desarrollador del que estaba hablando. sobre esto es parte del
cliente experto, así que aquí podemos recargar nuestra aplicación, así 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, así que aquí podemos vea 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ú del desarrollador presionando ctrl +
D y luego comando en D así, así que esto es todo sobre el simulador de iOS a continuación, le
mostraré cómo ejecutar esta aplicación en un dispositivo virtual Android en esta lección, le mostraré cómo
configurar un dispositivo virtual Android para ejecutar sus aplicaciones ahora mientras siempre puede ejecutar
su reacción aplicaciones nativas en su teléfono durante el desarrollo es mucho más fácil o
ejecútelo en un simulador o un dispositivo virtual porque no tiene que
tocar constantemente su teléfono, así que para configurar un dispositivo virtual Android primero necesitamos
instalar Android Studio, puede obtenerlo de developer.android.com slash studio,
así que vaya adelante 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, vaya con la instalación estándar porque instalará todos los
componentes necesarios que necesita para crear un dispositivo virtual de 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 el estudio de Android, así que hagamos clic en siguiente,
ahora mire los componentes que obtendrá descargado tenemos el
emulador de Android Herramientas de creación de SDK de Android Plataforma de SDK de Android Herramientas de la plataforma de SDK de Android
Acelerador de emulador Intel x86, así como un montón de otros componentes, estos son
los componentes que necesita para crear un dispositivo virtual de Android si Estos
componentes no se enumeran aquí, no se preocupe, le mostraré cómo instalarlos
más tarde, pero si opta por esta instalación estándar, no debería tener
ningún problema, así que hagamos clic en Finalizar, esto llevará un tiempo, así que Voy
a hacer una pausa en la grabación.
El estudio de Android ya está listo.
Vayamos al menú de configuración y seleccionemos SDK Manager. Si sigue la
instalación estándar aquí, debería tener todos los componentes necesarios, por lo que en la
pestaña de plataformas SDK debería tener la última versión estable. de Android en el momento de
grabar este video que tiene menos de diez o está en cola con las herramientas SDK, debe tener las
herramientas de compilación SDK de Android, así como las herramientas de la plataforma SDK de Android del emulador de Android
y el acelerador del emulador Intel si estos componentes no están seleccionados,
selecciónelos, haga clic en Aceptar y luego Android Studio los instalará por usted ahora si
está en una Mac o Linux, hay una unidad de pasos adicional a seguir si es un
usuario de Windows, no tiene que seguir este paso, pero mire el resto de
este video porque hay más pasos que debe seguir, así que diríjase a Doc's
that Expo en i/o ahora a la izquierda en administrar flujo de trabajo
puede encontrar todas las instrucciones oficiales para instalar un
dispositivo virtual Android, así que casi hemos terminado el primer paso entonces 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 debe agregar 100 SDK
a su ruta, por lo que debe editar su perfil bash o bash RC y agregar esta
declaración de exportación para copiemos esta declaración de exportación
ahora abra una ventana de terminal 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 –
perfil de línea debajo, así que aquí está mi perfil de bash al final del
perfil de bash Voy a pegar lo que copié de 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 obtenemos? fácil de vuelta al estudio de Android
vamos a configurar SDK manager aquí podemos encontrar la ruta a Android SDK así que
copie ahí está la parte de atrás de su editor favorito reemplacemos la ruta con blanco
copie ahora aquí en la documentación de Expo si está en Mac hay una paso adicional que debe
seguir, también debe agregar herramientas de plataforma a una ruta, 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, debemos reemplazar la ruta a Android SDK, así que eliminemos esto y use
lo que tenemos aquí, así que aquí está la biblioteca de rutas completa, las
herramientas de la plataforma Android SDK, 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í. Necesito editar un segundo
archivo. eso está en el directorio de inicio que es z SH RC ahora de vuelta al perfil de bash Voy
a copiar estas dos declaraciones de expertos y pegarlas en Z shrc así que copie
y pase aquí guarde los cambios ahora de vuelta en la ventana de terminal en este
punto debería poder ejecutar una base de datos si y recibe un error que dice que no se
encontró el comando, eso significa que no siguió uno de estos pasos correctamente, de acuerdo, hemos
terminado con las instrucciones para los usuarios de Mac y Linux, por lo que todos deben seguir el resto
de este video para configurar un dispositivo virtual Android para aquí en el estudio de Android
vamos a configurar un administrador de video si es la abreviatura de dispositivo virtual de 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 sabe por dónde empezar,
por lo general, 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, puede ver
la resolución del tamaño 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 es a menudo el segundo elemento aquí, así que
vamos con este ahora, el estudio de Android está dentro de esta imagen para instalar en nuestro
hardware emulado, tomará un tiempo, así que voy a pausar la
grabación, está 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,
todo bien. Nuestros dispositivos virtuales están listos. Podemos ejecutarlo haciendo clic en este
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 de Android, volvamos a
Metro Bundler y en la izquierda seleccione ejecutar en un dispositivo Android o emulador también podemos ir a nuestra ventana de 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 cliente fue instalado en el dispositivo
s o ahora metro bundler está construyendo 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 omite la lección anterior déjame mostrarte algo realmente genial,
así que puse el vehículo en el lado izquierdo y ahora cambiemos este mensaje a hello
react native ahora, en el momento en que guarde este cambio, nuestra aplicación se actualizará
inmediatamente, échale un vistazo, así que guarda y aquí está hello react native this es la
belleza de reaccionar nativo, por lo que vemos nuestros cambios en el momento en que los guardamos, no tenemos que
esperar a que finalicen las facturas nativas, por lo que hace que el desarrollo sea increíblemente
rápido y fácil, ahora en este dispositivo virtual podemos abrir el menú del desarrollador
presionando comando + M en Mac o ctrl + M en Windows así que aquí está el menú del 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 s vea la lista de proyectos en los que estamos trabajando actualmente, solo tenemos un
único proyecto que se realiza con él, 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 volver a nuestro la aplicación una vez más puede abrir el menú del desarrollador presionando
comando en M en Mac o ctrl LM en Windows
aquí tenemos algunos otros elementos estos son sus deportes de depuración hablaremos de
ellos más adelante en esta sección cómo ejecutar esta aplicación en
un dispositivo físico real, como le dije antes durante el mapa de Duvall, es mucho
más fácil probar su aplicación y un dispositivo virtual o un simulador porque no
tiene que tocar constantemente su teléfono; sin embargo, los simuladores son buenos simuladores
no siempre funcionan como un dispositivo real, además, 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 experto en su teléfono puedes conseguir esto desde la tienda de aplicaciones
una vez que instale esto para ejecutar su aplicación en su teléfono, todo lo que tiene que hacer es ir
a Metro bundler y mirar este código QR, así que apunte su teléfono a este código QR
y abra la aplicación de cámara que su teléfono elegirá 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 un dispositivo físico real que 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 el menú de desarrollador en los próximos videos,
le mostraré algunas herramientas y técnicas para depurar su 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 las buenas declaraciones de punto muerto de la consola anterior,
así que aquí en aplicación co mponent podemos hacer un blog constante y decir que los
ejecutores de la aplicación ahora guardan los cambios abren la terminal integrada tenemos dos
entradas para la aplicación ejecutada porque tengo dos dispositivos virtuales conectados al
paquete Metro tengo un simulador iOS y un dispositivo virtual Android y aquí en Metro
bundler en la parte superior izquierda puede 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 de ese dispositivo, así que consolar ese
registro es la forma más sencilla para depurar o reaccionar aplicaciones nativas; sin embargo, este concepto,
las declaraciones de registro pueden tener un impacto negativo en el rendimiento de nuestras aplicaciones en
producción, así que utilícelas solo durante el desarrollo o las pruebas una vez que haya terminado
con sus sesiones de depuración, asegúrese de eliminarlas antes de construir 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 voy a
crear un error en este componente de la aplicación, declaremos un 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 indefinido no es un objeto que evalúa X
a 2 cadenas y aquí puede ver que estamos en nuestro árbol de componentes.
Este error es
correcto. 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 de escape. Ahora desaparece. Necesitamos
abrir el menú del desarrollador. Explico cómo hacer esto en las lecciones anteriores.
Si está usando un dispositivo real, debe agitarlo. Si está usando un
dispositivo virtual Android, debe presionar comando + M en Mac o ctrl + M en Windows y si está
usando un simulador de iOS, debe presionar comando + D en mi máquina que
no funciona, así que debo presionar ctrl + D y luego comando + D, ahora debemos
habilitar la depuración remota cuando hagamos esto, el código JavaScript para
esto la aplicación terminará ejecutándose en Chrome, déjame mostrarte
para que podamos toque en depurar control remoto sí, se abre una nueva pestaña en Chrome que apunta a
su dirección localhost / depurador – IU, por lo que ahora el 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, puede ver el
mensaje que registramos, así como el error que ocurrió, no se puede leer la propiedad
dos cadenas de undefined ahora para depurar esta aplicación vamos a las
fuentes pestaña aquí haga clic en este icono pausar las
excepciones y luego seleccione pausar excepciones no detectadas déjame habilitar esta
opción si se detecta una excepción en nuestra aplicación Chrome detendrá la ejecución
y resaltará la línea donde ocurrió la excepción déjame mostrarte así que de
vuelta a nuestra aplicación, abramos el menú del 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 déjame mostrarte algunas herramientas que
tenemos para la depuración, 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 ver el valor de
varias variables para ver si nuestros cálculos son correctos o no,
volvamos a cargar nuestra aplicación una vez más, abra el menú del desarrollador, también tenemos
un acceso directo en Mac, podemos presionar comando + R en un simulador de iOS, así que
vuelva a cargar ahora, la línea cinco está resaltada y se trata
de para ser ejecutado 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 hemos escrito para poder ingresar a esa
función y ejecute el código en esa función línea por línea, también tenemos paso a
paso, por lo que si ingresa a una función y hemos terminado de depurar esa función,
podemos salir de esa función ahora, en este caso, consola, el blog no es una
función que hemos escrito así que no importa si w Paso por encima de él o paso por
él, así que voy a pasar por encima de él y, por cierto, mire este acceso directo aquí en la
información sobre herramientas en Windows, es f10 en Mac, su comando y una comilla simple, así que cuando
depure, use siempre 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 ver el valor de varios
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 que
hemos terminado con nuestra depuración, sabemos por qué obtuvimos esta excepción, así que debería
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,
elimine estas dos líneas, guarde los cambios y luego vuelva a cargar
nuestra aplicación.
la aplicación va a sea realmente
lento, así que una vez más abra el menú del 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 que no tiene Todavía no llegué
allí, pero volveremos a eso en el futuro. Ahora, ¿qué pasa con la pestaña LMS?
Bueno, los elementos que ves aquí no son los elementos que eran los componentes de
tu aplicación. Estos son los elementos de la ventana del depurador, a diferencia de un 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 el código vs, déjame
mostrarte primero, abrimos el menú del desarrollador y habilitamos la depuración remota, así que esto
abre esto 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 mostrarle ese error ahora, de vuelta al código vs, vayamos al panel de extensiones
busque reaccionar nativo y asegúrese de tener insta llenó esta extensión reaccionar
herramientas nativas con esta extensión podemos depurar reaccionar aplicaciones nativas en código vs ahora
vayamos al panel de depuración lo primero que tenemos que crear este archivo inicie
JSON aquí es donde almacenamos nuestras configuraciones de depuración actualmente no tenemos
este archivo en nuestro proyecto, por lo que el código vs sugiere crearlo, así que haga clic en este
enlace ahora de esta lista desplegable, seleccione reaccionar nativo ahora, a veces preguntamos o
no le muestra esta lista desplegable, no estoy seguro de por qué, pero crea inmediatamente
el archivo JSON de Launch Duck si esto le sucede a usted, no se preocupe, simplemente continúe
observando, descubrirá qué hacer en un segundo, así que seleccionamos reaccionar nativo ahora
aquí vemos varias configuraciones para depurar aplicaciones nativas reaccionar estas
configuraciones están instaladas por esa extensión reaccionan las herramientas nativas, por lo que si
no instala esa extensión, no verá estas configuraciones ahora, de forma
predeterminada, se selecciona la depuración de Android.
Voy a anular la selección de esto y seleccionar adjuntar al
empaquetador. Estoy familiarizado con la configuración, así que
seleccionamos adjuntar al empaquetador y hacemos clic en Aceptar y aquí está el lanzamiento del punto JSON,
por lo que a veces preguntamos Oh, no le muestra esa lista desplegable, sino que
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 tiene este objeto aquí siempre puede agregar una
configuración puede hacer clic en este botón agregar configuración o puede ir
a el 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í nos hemos adjuntado a un empaquetador, también tenemos
depuración de Android, etc., por ejemplo, seleccionemos una segunda configuración como
depuración de Android, por lo que ahora tenemos un segundo objeto, una segunda configuración llamada
depuración de Android, los mismos cambios que hemos hecho con este archivo.
ile está ubicado dentro de esta carpeta punto vs código ahora vamos a la aplicación
que sí, voy a declarar una variable X y
establecerla en una que usaremos durante nuestra sesión de depuración ahora podemos
insertar un punto de interrupción en esta línea e inicie una aplicación en modo de depuración y
ejecútela 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 podemos ver
varias configuraciones de depuración actualmente tenemos dos configuraciones de depurar Android
y adjuntar el paquete er Voy a seleccionar adjuntar el paquete ER y hacer 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 menú Ver y luego mire 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, por lo que, de forma predeterminada, el código PS intenta conectarse
a este empaquetador reaccionar empaquetador nativo para obtener el código JavaScript en este puerto
8081 tenemos que cambiar el deporte a este puerto aquí diecinueve mil un d one,
así que volvemos al código vs en la parte superior, vamos al menú de código, luego a la configuración de preferencias
ahora en la pestaña de usuario aquí, investigue para reaccionar: nativo ese puerto de puntos del empaquetador, así que
mire aquí es soporte 80 81, tenemos que cambiar esto a diecinueve mil uno
Ahora que hemos terminado 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í está el segundo error.
sucedió porque tenemos esta ventana abierta en segundo plano, por lo que a veces
tiene un millón de pestañas o ventanas abiertas, no sabe que tiene 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 el código vyas en un
solo momento, no en ambos procesos, por lo que ahora vamos a depurar en el
código vs, lo que significa que nuestro código JavaScript se ejecutará dentro del código vs,
así que abramos la depuración.
panel una vez más e inicie nuestra aplicación bien, establecemos una conexión
hermosa, así que aquí está nuestro simulador,
abra el menú del desarrollador y vuelva a cargar la aplicación
para que el depurador se cargue ahora, déjeme cerrar la consola de depuración, eche un vistazo, estamos en
apt en Jas y el primero la línea donde inserté un punto de interrupción está resaltada, así 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, podemos pasar a ella si está llamando a una
función que tenemos 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 encima de esta línea y, por cierto, este acceso directo es f10 ahora aquí en el
lado izquierdo podemos ver el valor de varias variables, por lo que el código vs
detectó automáticamente las variables en el alcance, por lo que aquí tenemos X, el valor de X
es 1, también tenemos nuestra ventana de observación, por lo que podemos observar selectivamente varias variables
en caso de que no se detecten aquí para que podamos escribir X y podemos s ee el
valor de X, así que ahora podemos ejecutar nuestro código línea por línea y ver qué está
pasando cuando hayamos terminado, siempre debemos detener la sesión de depuración porque nuestro
código JavaScript se ejecuta de forma remota dentro del código vs, así que nos desconectamos aquí y
luego vamos a nuestro La aplicación abre el menú del desarrollador y detiene la depuración remota.
Ahora recibimos este error.
El tiempo de ejecución no está listo para la
depuración. así que ahora nuestra aplicación se está ejecutando como antes
y la sesión de depuración finalizó. Hasta ahora, hemos estado sirviendo nuestra aplicación desde
esta dirección del puerto de host local diecinueve mil dos y eso significa que si
apagamos nuestra computadora o si dejas de exponer CLI, ganamos no poder abrir nuestra
aplicación con un cliente experto, aquí es donde la publicación viene al rescate
para que podamos publicar nuestra aplicación en Expo y luego nuestra aplicación tendrá una dirección pública y
permanente que cualquiera puede usar para abrirla con un cliente experto al igual que
cómo podemos publicar paquetes de NPM en el directorio de NPM podemos publicar nuestro hab en Expo
y será visible para cualquier persona en el mundo esto es mucho más fácil que pasar por las
tiendas de aplicaciones si ha realizado algún tipo de desarrollo de aplicaciones antes de
saberlo las tiendas de aplicaciones son muy tediosas, hay ciertos
pasos que debe seguir con la exportación, no tenemos que preocuparnos por eso,
simplemente publicamos nuestra aplicación en 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
prueba, no para producción cuando desea poner nuestra aplicación en producción, tenemos que pasar por las
tiendas de aplicaciones, ese es el tema para el futuro, así que este video
le mostraré cómo publicar su aplicación en Expo ahora podemos publique usando Metro bundler
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,
debe volver a esta terminal, lo sabemos porque Expo le hará algunas
preguntas.
te mostraré que en esta demostración no voy a ejecutar la publicación de Expo aquí,
sino que voy a usar la publicación. JSON
puede ver varias configuraciones sobre nuestra aplicación aquí está el nombre de nuestra aplicación aquí hay un
slug de URL para esto será parte de la URL de nuestras aplicaciones en Expo lo verá en un
segundo así que de vuelta al paquete de Metro podemos especificar opcionalmente la fuente de github URL,
así como una descripción, podemos optimizar nuestros activos para que se compriman
y minimicen de manera predeterminada, esto está habilitado ahora, la URL de nuestra aplicación se verá
como este experto en IO en el letrero después de esto, tendremos nuestro nombre de usuario que
vamos a crear en este video y luego lo hemos terminado, así que esta es nuestra
suerte de URL, ahora hagamos clic en publicar proyecto para volver a nuestra
ventana de terminal en código vs aquí es donde está ejecutando X + CLI, así que exportar es preguntando cómo
le gustaría autenticarse, podemos crear una nueva cuenta Expo o iniciar sesión con una
cuenta existente, así que vamos a crear un nuevo conteo de exportaciones,
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 confirmemos todo en este momento, la Expo está creando nuestros
paquetes de iOS y JavaScript de regreso a Metro Bunner, nuestra aplicación
se publicó con éxito 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.
Regresaré y arreglaré esto en el futuro ahora aquí tenemos este 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 a Metro bundler, haga clic en y publique
una vez más y esta vez dé una descripción a nuestra aplicación.
Voy a decir un
mercado para vender estas cosas que ya no necesita, ahora publiquemos.
una vez más ahora de vuelta en vs coke vamos a abrir suba el
JSON en la parte inferior, puede 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. último curso nativo de reacción
el curso completo se divide en dos partes: conceptos básicos y temas 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 que escribimos en este curso, cada
sección lo tiene antes y después del código fuente para que pueda programar fácilmente junto conmigo,
además obtendrá muchos ejercicios y soluciones paso a paso y un
certificado de finalización que puede agregar a su currículum si está interesado.
Dejo el enlace a continuación.
Estoy ofreciendo un descuento a los primeros cien estudiantes,
así que si está interesado, inscríbase ahora antes de que sea demasiado tarde.
Ahora, continuemos con la siguiente lección en esta sección. Vamos a ver algunos
de los componentes principales y API en re. act native hablaremos sobre ver
texto imagen botón alerta táctil y así sucesivamente hay más componentes en react
native de los que podemos cubrir en esta sección o en este curso vamos a enrutar el curso
vas a aprender los que vas a aprender use 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 reacción, así que diríjase a react native dot dev 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 lo hará.
parece 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, así que aquí
están todos los componentes multiplataforma, también tendrá un montón de componentes
específicos para Android e iOS y nosotros también h tenga 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 la
hoja de estilo para crear un montón de estilos nuevamente, esta API es nuestra plataforma cruzada que
también tenemos un montón de AP es específico para Android e iOS nuevamente estudiará la mayoría de
los componentes esenciales en la API, pero no tenemos tiempo para ver cada
componente, por lo que una vez que aprenda los fundamentos, puede aprender los otros
componentes por su cuenta, así que a continuación vamos a hablar sobre las vistas, así que antes
les dije que en React Native no tenemos elementos HTML como el párrafo div span,
etc., así que tenemos que construir nuestra interfaz de usuario usando los componentes integrados en
React Native View es el El componente más básico y fundamental para crear interfaces de usuario
es como un div, por lo que es un componente de contenedor que podemos usar para agrupar
o diseñar elementos secundarios, por lo que aquí tenemos un montón de estilos.
Ahora
hablaremos sobre estilos en detalle en el siguiente sección pero para no Permítanme
explicar brevemente cuáles son estos estilos, por lo que tenemos flex establecido en 1, lo que significa que esta vista
es flexible y crecerá tanto horizontal como verticalmente para llenar el
espacio libre, en este caso, crece y ocupa toda la pantalla, ahora el
color de fondo. de esta vista es blanco, cambiemos esto 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, mire,
esta vista está llenando todo el espacio ahora una cosa I quiero que preste
atención a esta muesca o al borde en los nuevos iPhones, a veces quiere
asegurarse de que esta muesca no cubra su contenido, por ejemplo, de vuelta a nuestros
Estilos, eliminemos estas dos propiedades, alinee los elementos y justifique el contenido con
estos. puede poner un componente en el centro de esta vista, esa es la razón por la
que nuestro texto aparece en el medio de la pantalla. Ahora
hablaremos sobre diseños y componentes de alineación en la siguiente sección.
Por ahora,
eliminemos estos dos pr operaciones guarde los cambios ahora mire nuestro texto está
aquí es demasiado pequeño déjeme hacer que el simulador se vea más grande para que parte del
texto esté cubierto por el nudo aquí es donde podemos usar un tipo especial de vista
llamado área segura de vista así que en el arriba importamos la vista del área segura de reaccionar
nativo ahora podemos reemplazar esta vista con el á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 multi
edición del cursor para que podamos reemplazar ambos al mismo tiempo, así que escriba la vista de área segura
ahora presione escape para cancelar la edición de múltiples cursores, de acuerdo, 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 asegurarnos de que nuestro contenido
esté dentro del área segura, así que esto se trata de vistas por ahora, a continuación,
hablaremos sobre el componente de texto, el segundo componente más fundamental en
reaccionar nativo es el texto y lo usamos para mostrar texto así que aquí no podemos coloque
el 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 veamos la documentación
para el componente de texto, así que aquí tenemos un montón de accesorios.
Voy a hablar sobre los
más importantes. El primero es el número de líneas cuando
establecemos esto. Si nuestro texto es más largo, se truncará. Déjeme. mostrémoslo de vuelta en el
código vs. Cambiemos esto a un texto realmente muy largo. Ahora quiero hacerlo
aún más largo y ver qué sucede. Ahora nuestro texto está envuelto. Tenemos dos
líneas, pero si establece el número de líneas en uno, nuestro texto.
se truncará, eche
un vistazo, así que establecemos el número de líneas en uno ahora, diga, eche un vistazo, así que tenemos un
punto, punto, punto al final de la primera línea, muy útil, también podemos hacer que este texto
actúe como un enlace usando la propiedad de despresionar o evento así que aquí nos ponemos en prensa nos vemos t
esto a 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 diciendo clic de texto
pero esto es útil para funciones muy pequeñas de una sola línea si tiene una buena
cantidad de lógica no la tenemos arroje toda esa lógica aquí en el medio de nuestro JSX,
por lo que deberíamos implementarla en una función separada, de modo que antes de nuestra declaración de retorno
podamos definir una función por convención, prefijamos el nombre de la función con el identificador,
por lo que queremos manejar el sin precedentes llamamos a esta función maneje presione ahora
lo configuramos en una función de error y aquí es donde hacemos que nuestra consola bloquee el texto
presionado bien ahora dijimos en presione para manejar presione guarde los cambios eche un
vistazo, así que toco esto ahora si mira la ventana de la terminal
vea nuestro mensaje de bloqueo, por lo que hablamos sobre los dos accesorios esenciales para el
componente de texto ahora que está creando aplicaciones, acostúmbrese a leer esta
documentación para cada componente que encuentre, lo ayuda a
comprender mejor las capacidades y limitaciones ns 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 tenemos que establecer dos
propiedades justificar el contenido establecemos esto en el Centro y alinear elementos también debemos establecer
esto en el Centro, está bien, ahora cualquier cosa que coloquemos dentro de
este contenedor que es nuestra área segura estará en el centro de esta pantalla
así, está bien ahora para renderizar una imagen, primero importamos el componente de imagen de
reaccionar nativo con este componente podemos mostrar tanto las
imágenes locales que incluimos con nuestra aplicación como las imágenes de red que
descargamos a través de Internet, por lo que actualmente en nuestra carpeta de activos tenemos dos
íconos de imágenes y splash que se usa en nuestra aplicación se está cargando, así que mostremos el icono
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 eso
hace que nuestro código sea más limpio ahora aquí, debemos configurar el accesorio fuente para cargar nuestro
ícono, usamos la función require y especificamos la ruta a nuestra imagen, por lo que nuestro
componente de la aplicación está aquí, debemos ir a la carpeta de activos y cargar el ícono PNG,
así que aquí escribimos el punto que representa la carpeta actual, luego vamos a los activos
y cargamos el icono que PNG, de modo que cuando usemos la función require, 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 tienen 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. Ahora, ¿
qué cree 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 oblicua de los activos requeridos que PNG ahora mira en la terminal, así que es la referencia a
nuestra imagen, está bien, ahora eliminemos esta línea,
así es como podemos representar imágenes locales o de inicio, pero ¿qué pasa con las imágenes de red?
Vamos a elegir algunas fotos muertas.
Este es un generador de imágenes aleatorio.
Aquí hay un ejemplo. Mira esta URL cada vez. presionamos esta
URL, obtendremos 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
establecemos en una cadena y aquí es donde pegamos la URL que copiamos, así que guarde los
cambios en nuestro simulador, nuestra imagen no está visible porque React Native
no conoce sus dimensiones, por lo que tenemos que especificar manualmente las dimensiones para las
imágenes de red. para las imágenes locales, no tuvimos que hacer esto porque la
función require lee los metadatos de nuestras imágenes, está bien, así que volvamos a nuestro
código y al objeto que pasamos a la
fuente fuente, establecemos dos propiedades adicionales con 200 y altura a 3 00 guarda los
cambios así que aquí está nuestro componente de imagen y aquí está el resultado
hermoso ahora aquí en la documentación oficial puedes 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
entonces aquí podemos configurar el radio para, digamos,
10, ahora mire que nuestra imagen se ve borrosa, también tenemos una fuente de indicador de carga,
esto es similar a la fuente de apoyo, por lo que podemos darle una imagen local usando la
función requerida o podemos pasar el URI de una red image La imagen que pasamos
aquí se mostrará mientras se descarga la imagen real.
Tenemos
otro accesorio llamado duración falsa.
toma 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 hacerlo más
pronunciado ed, aquí podemos establecer la duración del desvanecimiento, digamos 1 segundo, ahora
volvamos a cargar la aplicación y aquí está nuestro hermoso efecto de desvanecimiento, así que esto solo funciona en
Android, no tiene efecto en iOS, otro accesorio útil es el modo de cambio de tamaño que se usa
si las dimensiones de nuestro la imagen es diferente de las dimensiones que especificamos,
por lo que aquí tenemos varios modos de cambio de tamaño, tenemos una cubierta que contiene estiramiento, repetición, 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 descarga en carga y descarga, inicio y así que con estos podemos
aprovechar ciertos momentos cuando se está cargando una imagen en la lección anterior 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 Logre esto manejando
el derecho sin precedentes, pero el componente de la imagen no tiene este accesorio o
evento. Aquí es donde podemos usar los componentes táctiles para que podamos hacer que cualquier cosa se pueda
tocar.
Aquí están los componentes táctiles en reaccionar nativo.
chable resaltar táctil opacidad táctil sin comentarios el
componente táctil que usamos dependerá del tipo de comentarios que queremos dar a nuestros usuarios
déjame mostrarte así que de vuelta a nuestro código importemos táctil sin comentarios
y tenga en cuenta que no estoy escribiendo el completo nombre de este componente Estoy
usando accesos directos, así que estoy escribiendo un poco como tou
WF y luego presiono Enter. dentro de un
componente táctil sin retroalimentación, así que una vez más voy a usar un atajo para
tocar sin retroalimentación, presione Entrar ahora, muevamos esta imagen dentro de un componente
táctil sin retroalimentación, así que mantengo presionada la tecla Alt y luego presiono la flecha hacia arriba
con esto, podemos mover el código como esto está bien,
ahora este táctil sin comentarios tiene un evento llamado no presionar, 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í manejemos
el imprevisto abolladura aquí podemos pasar una función hagamos un registro de consulta y digamos
imagen tocada ahora guarde los cambios cuando toco esta imagen no pasa nada
porque estamos usando táctil 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 táctil así que en la parte superior importemos la
opacidad táctil ahora reemplacemos esto con la opacidad táctil entonces la opacidad táctil
que también reemplazará esta etiqueta échale un vistazo así que déjame tocar esto imagen su
opacidad se reduce para que podamos ver el fondo es por eso que este toque se
llama opacidad táctil por una fracción de segundo reduce la opacidad de
lo que estamos haciendo táctil bien ahora veamos el resaltado táctil así que
importamos en la parte superior táctil resalte y luego úselo aquí
ahora usando comando + D como le dije antes, podemos seleccionar ambas instancias y
reemplazarlas de una sola vez resaltado táctil guardar los cambios
echar un vistazo así que cuando toquemos esto imagen, su
fondo se oscurece durante 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 reaccionar nativo, también tenemos un componente táctil que es específico para Android,
se llama respuesta táctil nativa, no lo es es compatible con iOS, por lo que cuando lo usamos
recibimos una advertencia, déjeme mostrarle, así que importemos comentarios nativos táctiles
ahora, usémoslo aquí comentarios nativos táctiles,
guarde los cambios en iOS, obtenemos este recuadro rojo
Más adelante en esta sección, le mostraré
cómo puede detectar la plataforma en la que se ejecuta esta aplicación, por lo que si se ejecuta
en iOS, tal vez podamos usar la opacidad táctil.
Si se ejecuta en Android,
podemos usar comentarios nativos táctiles.
Dispositivo virtual de Android, así que voy a mostrar mi dispositivo virtual de Android cuando toque
esta imagen, no pasa nada porque este toque realmente no funciona con
imágenes, funciona con vistas. en tener un color de fondo, 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,
démosle a esta vista algunos estilos para establecer esta vez como accesorio un objeto con
algunas propiedades con, digamos, 200 de altura, voy a usar 70 y el 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, por lo que se trata de tocar a continuación.
ahora vamos a hablar sobre los
botones, hablemos sobre el
componente del botón, así que he limpiado el código aquí, solo tenemos una vista de área segura, sin
texto, sin imagen, sin componente táctil aquí, queremos agregar un botón a nuestra vista
para que podamos impórtelo en la parte superior y luego agréguelo aquí, pero déjeme mostrarle un
atajo aquí, podemos escribir el botón ahora escuchando el aspecto de intellisense, tenemos
importación automática, por lo que podemos tener código vs automáticamente importar esto para nosotros, así que aquí
presionamos enter y nuestro el botón se importa aquí hermoso
ahora con botones que puede usar la sintaxis de cierre automático porque no ponemos
nada entre ellos, así que aquí establecemos el título, digamos que haga clic en mí y
manejamos el botón sin precedentes, bastante sencillo, toquemos el botón de inicio de sesión y
guardemos 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 equivalente nativo, los
botones de Android se ven 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 el iPhone tiene un texto naranja,
también podemos crear un botón personalizado que tiene una apariencia única Le mostraré cómo
hacerlo en la siguiente sección cuando hablemos de estilo. A continuación,
hablaremos sobre las alertas. Hagamos que esta aplicación sea más interesante
en lugar de imprimir algo en la consola. Mostremos una cerveza estándar. rt
box, 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 botón pulsado guardar ahora eche un vistazo
en iOS obtenemos este iOS estándar cuadro de alerta 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 ok si esto
no funciona para usted siempre puede personalizarlo puede cambiar el título
puede cambiar los botones aquí déjeme mostrarle así que en la parte superior importamos alerta
este no es un componente que tiene una representación visual esto es en una API
por lo que es un objeto con un par de métodos déjame mostrarte así que voy a poner
esto en una nueva línea ahora en lugar de alerta vas a escribir alerta punto mira aquí
tenemos dos métodos alerta para mostrar un mensaje y aviso para hacer una pregunta
y obtener una respuesta, así que Usamos el método de alerta.
Este método tiene algunos
parámetros. El primero es el título de nuestro cuadro de alerta. Configurémoslo en mi título.
El segundo parámetro es nuestro mensaje. Voy a configurar esto en 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, por lo que cada botón puede tener un texto, puede tener un estilo y también
plantea lo sin precedentes. así que configuremos el texto del primer botón en sí, ahora
agregamos un segundo botón y configuramos su texto para que no guarde los cambios, así que esto es lo que
tenemos ahora, eche un vistazo ahora tenemos una alerta personalizada, el título ha cambiado y
tenemos dos botones aquí ahora, ¿cómo sabemos en qué botón se hizo clic? Eso es
muy fácil, solo tenemos que manejar el evento de despresionar de estos dos botones, así que
aquí podemos decir al presionar podemos configurar esto en una función para una consola que registra sí y
aquí podemos configurar al presionar una función diferente y aquí podemos registrar un
mensaje diferente e en la consola, eche un vistazo,
sí, ahora de vuelta en la terminal, aquí está nuestro mensaje hermoso, ahora veamos el
método prop, así que voy a eliminar esto a través de las líneas
aquí, llamamos aprendido ese mensaje, 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 el consola bastante
sencillo, así que guarde los cambios ahora, entrenemos en iOS,
así que aquí tenemos este cuadro de entrada donde podemos escribir algo, así que digamos hola
mundo ahora si presionamos ok, se llamará a nuestra función de devolución de llamada, así que recibimos nuestro
mensaje en la consola ahora uno Lo que debe saber es que
esta API solo funciona en iOS en el momento de grabar este video, por lo que en Android,
cuando toco este botón, no sucede nada.
Con suerte, esto cambiará en
el futuro. Otra API útil que debe conocer es esta hoja de inmersión. API ha
visto esto antes con esto podemos definir estadísticas, pero permítame aclarar algunas
cosas sobre las estrellas en una aplicación nativa de reacción en primer lugar, como dije antes, ¿
tenemos aquí? no son CSS sus nombres están inspirados en CSS pero son
no CSS, estas son solo propiedades de JavaScript regulares, por lo que cuando construimos
nuestra aplicación, la reacción nativa asignará los componentes agnósticos de la plataforma a su
equivalente nativo y luego aplicará estas propiedades en ellos, está bien, eso
significa que este objeto que estamos pasando aquí es esencialmente un objeto simple de JavaScript,
por lo que en lugar de hacer referencia a este objeto Da estilo a ese contenedor, podemos pasar
un objeto en línea aquí y establecer el color de fondo en, digamos, naranja, ahora
mire, tenemos esta barra naranja en la parte superior porque estamos reproduciendo un solo estilo,
solo estamos configurando el color de fondo bien, también podemos definir este objeto
en otro lugar, por ejemplo, puedo cortar esto desde aquí,
definamos un estilo de contenedor llamado constante y digamos a este objeto ahora podemos hacer
referencia a este objeto o Ver aquí el estilo de contenedor, nuestra aplicación todavía funciona ahora,
anteriormente estábamos usando estilos que los estilos de 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 obtener como resultado
que nuestro objeto de Astana tenga una propiedad llamada
contenedor, que es un objeto en sí mismo, esta es la razón por la que podemos hacer referencia a los
estilos de ese contenedor aquí, así que pase lo que pase al método de creación,
lo obtenemos como resultado ahora, puede preguntar, 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 bien? Hay dos razones: la primera razón es que este método
valida las propiedades que usamos aquí para garantizar que
accidentalmente no escribimos mal una propiedad, así que si él escribió mal esta propiedad, digamos que
agregamos una e al final, mire lo que sucede, obtenemos este color de fondo de cuadro rojo con
una E, no es una propiedad de estilo válida, esta validación no sucede pen si usamos un
objeto de JavaScript simple directamente, así que permítanme revertir esto ahora, pasemos un
objeto en línea y configuremos su fondo, escribamos mal a otra cosa,
mire, no recibimos ningún error, pero nuestra aplicación tampoco tiene el aspecto correcto así que
este es uno de los beneficios de usar la hoja de estilo que crea, déjame eliminar esto,
así que protagonice ese contenedor, 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 para
implementar algún tipo de optimizaciones detrás de escena. que yo sepa, estas
optimizaciones no están disponibles en el momento de grabar esto, pero
vendrán en el futuro, por lo que es una práctica recomendada usar la
API de estatuto para definir estadísticas, por lo que se trata de esta API de hoja de estilo, ahora aquí
también puede combine varios objetos de estilo para que, en lugar de pasar un solo objeto,
podamos pasar una matriz de objetos, de modo que en esta matriz primero tengamos estilos de ese
contenedor y luego podamos agregar un segundo objeto como este objeto que def ined
aquí ahora mire el resultado es la combinación de estos
dos objetos de estilo 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 a la
derecha sobre ochos las propiedades de el objeto de la izquierda en este caso, el
estilo del contenedor está definiendo una sola propiedad que es el color de fondo, por lo que
se sobrescribe el color de fondo que definimos anteriormente, por lo que los resultados
son más predecibles ahora, otra pregunta que podría tener es ¿tenemos que
poner estos estilos? en el mismo archivo, no realmente puede extraer esto de 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 de su componente
porque a menudo necesita trabajar con ambas estructuras.
de su
componente, así como comienza en la misma sesión, si coloca el tamaño en un
archivo separado, tiene que ir y venir constantemente entre dos archivos,
yo personalmente, aunque soy todo un ab escribiendo código limpio y separación de
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. estrellas en detalle
por ahora eso es todo lo que necesita saber sobre 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 sea ya no está en el centro de la pantalla, échale un vistazo,
así que está aquí en la parte superior, pero mira nuestro dispositivo virtual Android, nuestro botón está
debajo de la barra de estado, así que esta caja fuerte es tu componente de vista que usamos antes,
solo funciona para iOS, por lo que hace seguro de que nuestro contenido no está cubierto por esta
muesca en el 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 del calle atus bar aquí es donde
usamos el módulo de la plataforma, así que en la parte superior importamos el módulo de la plataforma desde reaccionar
nativo ahora aquí podemos agregar un tercer relleno de estilo superior queremos configurar esto
dinámicamente si la plataforma actual es Android vamos a configurar esto a
digamos 20, de lo contrario, queremos establecerlo en cero, así que aquí escribimos plataforma ahora este
objeto tiene algunas propiedades o devuelve el sistema operativo que puede ser
Android iOS y así sucesivamente también podemos obtener la versión de nuestra plataforma que podemos verificar
para ver si se trata de un iPad, si se trata de un televisor, etc.,
leamos esta propiedad, podemos comparar esto con ahora aquí, presionamos ctrl + espacio,
podemos ver varios valores que se aceptan, por lo que tenemos Android iOS Mac iOS
web y windows Entonces, si se trata de Android, desea configurar el padding top en 20;
de lo contrario, diremos 2-0, mire 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.
esto es para calcular la altura de la barra de estado y usar eso como el valor f o
este estilo en la parte superior vamos a importar la API de la barra de estado ahora vamos a
reemplazar 20 con la altura actual del punto de la barra de estado esta es la forma correcta de agregar
relleno en la parte superior porque la altura de la barra de estado puede ser diferente de
un Android teléfono a otro así que guarda los cambios ahora nuestro botón está justo debajo de la
barra de estado hola chicos Marsh aquí solo quería que
supieras que este tutorial son las primeras dos horas de mi último curso nativo de reacción
el curso completo se divide en dos partes básicas y
temas avanzados, pero cada parte tiene una duración de 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.
obtendrá muchos ejercicios y soluciones paso a paso y un
certificado de finalización que puede representar su currículum si está interesado.
Pongo el enlace a continuación. Ofrezco un descuento a los primeros cien estudiantes,
así que si Estás interesado en el rol ahora antes de que sea demasiado tarde
ahora, continuemos con la próxima lección en esta sección, aprenderás cómo
crear diseños en React Native y aquí es donde comienza la diversión
porque vamos a construir las dos primeras pantallas de nuestro aplicación, por lo que vamos a hablar
sobre las dimensiones, la orientación del dispositivo, el flexbox, así como el posicionamiento absoluto y relativo,
así que preste mucha atención a las lecciones y tome nota porque
utilizará estos materiales como parte de los ejercicios al final de esta sección.
Estoy muy entusiasmado con esta sección.
Espero que usted también. Ahora entremos 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 vista más segura. Agreguemos una vista. le damos un estilo, establezcamos el
color de fondo en azul Dodger. Le daré un ancho de 150 y una
altura de 70. Ahora, estos números que tenemos aquí son píxeles independientes de la densidad
o si el tamaño real es igual a píxeles independientes de la densidad. ti mes 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,
por lo que la resolución de pantalla del iPhone 4 es igual a 640 por 960 píxeles
ahora, si nuestra vista es de 150 píxeles independientes de la densidad o reduce su
ancho real en un iPhone 4 será igual a 150 veces 2, que es 300 píxeles, que es
aproximadamente la mitad del ancho de la pantalla en este momento en contraste 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 veces 3 es igual a 450 píxeles así que nuevamente es aproximadamente la mitad de la
pantalla con 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 densidad- píxel independiente Podemos sentirnos tranquilos de que se ven casi del
mismo tamaño en diferentes dispositivos ahora, 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 guárdelo así que
aquí está nuestra vista se ha tomado 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 esos casos podemos usar las dimensiones
API, por lo que en la parte superior importamos dimensiones de reaccionar nativo 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 guardaré en la terminal, así que aquí puedes ver el
ancho y la altura de esto.
El iPhone también tiene un 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 los cambios de orientación, por lo que si el usuario gira el dispositivo, estos números
no se actualizan, hablaremos sobre cómo manejar eso en el próximo AESA, hay ocasiones en las que desea 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 en 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 ocupe
toda la pantalla en este momento, la altura de este reproductor de video imaginario es siempre
30% de la altura de la pantalla, aquí es donde necesitamos detectar la orientación
de nuestra pantalla y cambiar el tamaño de este componente en consecuencia y, de paso, para rotar
este simulador de iOS, mantenemos presionada la tecla de comando y usamos las flechas izquierda o derecha
así.
y f o Android tenemos esta barra de herramientas ahora mire el
atajo en Mac su comando + izquierda en Windows probablemente sea ctrl + izquierda
configurado en vertical para que solo admita el modo vertical, podemos configurarlo en
horizontal para admitir solo el modo horizontal, pero esto no es muy común,
también podemos configurarlo de manera predeterminada para admitir ambos modos, así que guardemos los cambios ahora para
detectar la orientación de la pantalla. vamos a usar esta biblioteca llamada ganchos desarrollados 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 de funciones, por
ejemplo, podemos agregar estado a un componente de función, ve uno de los
ganchos incorporados en reaccionar si no está familiarizado con los ganchos, le recomiendo que
vea 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. Todos estos ganchos por
convención comienzan con el uso, por ejemplo, hemos usado Back Handler para trabajar con el
botón Atrás en Android, hemos usado Camera Roll, hemos usado dimensiones, usamos la
orientación del dispositivo, etc. Así que primero instalemos esta biblioteca aquí en la
ventana de terminal en react – native – community / hooks, está bien, ahora está instalado,
volvamos a después de la primera importación especial de Jas, use las dimensiones de la
comunidad nativa de reacción y slash hooks con este gancho, podemos obtener las
dimensiones correctas de la pantalla si estamos en modo vertical. o en el
modo horizontal, este enlace siempre vuelve a las dimensiones actualizadas. Esta es una de las
limitaciones de la API de dimensiones en reaccionar nativo, 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 las dimensiones de uso de declaración y llamada dicen ahora aquí
puede ver que el ancho de nuestra pantalla es 414 ahora si giro este dispositivo en el
modo horizontal obtenemos este nuevo con 896 así que cada vez que r ota nuestro dispositivo, nuestro
componente se recupera y aquí recalculamos las dimensiones actualizadas, ahora
también tenemos otro enlace para detectar la orientación de la pantalla, use la
orientación del dispositivo, así que llamémoslo aquí, así que volvamos a cargar la aplicación en modo vertical, está bien, obtenemos un objeto que este objeto tiene
dos propiedades, el paisaje es falso y el retrato es verdadero.
Ahora, si giro este
simulador, obtenemos un objeto de anguila.
llame a esta función, luego almacenamos el resultado en este objeto o
podemos usar la desestructuración del objeto aquí y elegir la propiedad del paisaje de ese
objeto ahora podemos calcular la altura dinámicamente, así que si está en el
modo paisaje, estableceremos la altura en 100% de lo contrario,
lo diremos al 30%, eche un vistazo, así que volvamos a cargar la aplicación en modo horizontal, nuestro
reproductor de video está ocupando toda la pantalla, tenemos estos bordes blancos, esto es porque Si
ponemos esto dentro de un área de vista segura, tal vez para un reproductor de video, esto no es
algo que queramos hacer, queremos asegurarnos de que el reproductor de video ocupe
toda la pantalla, pero no nos preocupemos por eso en esta lección ahora si rotamos. esto
también es correcto, la altura de nuestro reproductor de video será el
30% de la altura de nuestra pantalla, por lo que al usar los ganchos en esta biblioteca podemos obtener las
dimensiones y la orientación de nuestro dispositivo ahora para la aplicación que vamos a
construir en este curso.
no admitiré el modo horizontal, así que
volveré a JSON y estableceré la orientación de nuevo en vertical. Ahora hablemos de las banderas para un flexbox
con flex. Podemos crear fácilmente diseños complejos que funcionen de manera consistente en
diferentes tamaños de pantalla. tenemos el mismo concepto en CSS, pero flexbox en react
native es un poco diferente, así que asegúrese de ver las próximas lecciones incluso
si está familiarizado con flexbox en CSS, así que eliminé todo el código que hemos
escrito hasta ahora. solo estoy importando el componente de vista desde reacciono de forma nativa ahora en el
componente de nuestra aplicación, devolvamos una vista y demos a esta vista un
par de estadísticas, así que configuraré el color de fondo para esquivar o azul y
flexionar a uno cuando configuremos Flex en uno, esta vista crece
para tomar el disponible espacio libre, así que guarde nuestra vista ocupa toda la pantalla, ¿y
si configura flex en 0,5? Ahora nuestra vista ocupa la mitad de la pantalla, está bien, entonces con
Flex generalmente configuramos una vista como un contenedor y luego alineamos a los niños dentro de
ese contenedor, así que imaginemos esto view es nuestro contenedor, así que cambiemos
su color de fondo a blanco y configuremos flex en 1 para que ocupe 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 cualquier cosa dentro de esta vista ahora
vamos a darle a esta vista un par de estilos, así que voy a establecer el color de fondo en
azul Dodger y flexionarlo a uno, veamos qué obtenemos
una vez más, obtenemos una pantalla azul porque nuestra vista principal o contenedor está tomando
el toda la pantalla y dentro de este contenedor tenga esta otra vista, la
vista azul que está creciendo para ocupar el espacio libre disponible, por lo que se siente 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 presione la flecha hacia abajo para esto.
puede duplicar la codificación frente al código, así que dupliquemos esto una vez más, ahora tenemos
tres vistas, la primera vista es azul Dodger, la segunda vista, hagámoslo dorado
y la tercera vista, hagámoslo tomate, que es una especie de rojo, así que esto es lo que
obtenemos ahora nuestra pantalla está dividida en tres segmentos, cada vista ocupa 1/3
de su contenedor o 1/3 de la pantalla.
Ahora, ¿qué sucede si establecemos la propiedad Flex de
esta vista azul en 2? Ahora la vista azul es dos veces más grande que la
otra. 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, así que tenemos cuatro segmentos,
dos de los cuatro segmentos se asignan a la primera vista a la vista azul, por lo que esta
vista está tomando la mitad de la pantalla o la mitad de su contenido r y estas otras
vistas, cada una ocupa una cuarta parte de la pantalla, por lo que estos son los conceptos básicos de flex
en las próximas lecciones, estudiaremos otras propiedades de flex, ahora démosle a estos espectadores un tamaño fijo,
por lo que en esta vista azul I voy a eliminar la propiedad Flex, establezcamos el ancho en
100 y la altura en 100 también, ahora vas a repetir,
así que cambiemos la segunda vista y la tercera vista, esto es lo que obtenemos, nuestras vistas están colocadas
verticalmente en una columna porque eso tiene más sentido en las aplicaciones móviles, por
lo general, mantenemos nuestros teléfonos en modo vertical, por lo que, de forma predeterminada, la reacción
nativa alinea verticalmente los elementos en un contenedor.
es una 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 Flex Direction en fila, esto es lo que obtenemos, también tenemos un reverso real,
por lo que los elementos se distribuyen de derecha a dejó
un d también tenemos 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 columna de la lista de valores, que es el valor predeterminado columna
inversa fila y fila inversa ahora vamos vuelva a poner esto en fila con esta configuración,
decimos que nuestro eje principal o principal es el eje horizontal y el eje transversal es
el eje vertical, esta es una propiedad importante de flex, volveremos
a ella una y otra vez, a continuación, vamos a hablar sobre la alineación de elementos en esta lección, vamos a hablar sobre la
alineación de elementos en un contenedor, por lo que actualmente nuestros elementos o nuestras vistas
aparecen en la esquina superior izquierda de la pantalla, ¿y si desea empujar esto hacia
la derecha o poner en el centro de la pantalla, vamos a nuestro contenedor y
establecemos la propiedad de contenido justificado en uno de estos valores, así que
configurémoslo en
el centro.
nuestro eje principal aquí es th El eje horizontal
porque anteriormente establecimos 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 principal o principal. eje esto vuelve a cambiar a Roma
y observa los otros valores, por lo que tenemos flex y ahora nuestros elementos aparecen
al final del eje horizontal, también tenemos flex start, que es el
valor predeterminado y tenemos tres propiedades para distribuir el espacio, tenemos espacio around
así que con esta propiedad el espacio entre cada dos elementos es igual, así que mira el
espacio aquí es igual pero el espacio alrededor del primer y último elemento y los
bordes de la pantalla es diferente, así que aquí tenemos menos espacio si cambia esto a
espacio uniformemente ahora el espacio se distribuye uniformemente
entre los elementos y también tenemos espacio entre
con esta configuración, el primero y el último elemento se empujan hacia los bordes de la
pantalla y el espacio restante se distribuye entre el otro elemento Entonces, volvamos a
cambiar esto al Centro.
Ahora tenemos otra propiedad llamada
elementos alineados y con esto podemos alinear los elementos a lo largo del eje secundario. Entonces, ¿cuál
es nuestro eje secundario aquí es el eje vertical a la derecha? Entonces, si configuramos esto en el
Centro, ahora aparecerán nuestros elementos. 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 otro valor flex y
esto se explica por sí mismo, por lo que nuestros elementos aparecen al final del
eje secundario bien, ¿qué más tenemos aquí
flex start ahora los elementos aparecen al comienzo 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é sucedió, la vista azul
se estiró para llenar toda la vertical a xis, 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 la propiedad de altura también para
justificar el contenido, alineamos los elementos en el 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
avanzamos en el curso.
Vas a usar estas propiedades una y otra vez, por lo que
sería una segunda naturaleza para ti. Ahora, ¿qué pasa si quieres cambiar la alineación de
uno de estos elementos, digamos que queremos poner la vista azul aquí, así que vamos a
esta vista y configuramos el auto alineado para flex start, así que mire estas dos propiedades,
tenemos elementos alineados que aplicamos al contenedor y hemos alineado el auto que
aplicamos a un artículo individual ahora esto es lo que obtenemos, así que se trata de
alinear las piernas, vamos a hablar sobre envolver elementos, hablemos sobre 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í, así que, ¿ qué crees que sucederá si agregamos
una vista adicional aquí? Averigüémoslo, dupliquemos esto una vez más
y cambiemos el color de fondo de la nueva vista.
a verde amarillo ¿ves lo que
sucedió? 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 habilitando el ajuste, así que vamos a nuestro contenedor.
Aquí hay un contenedor. Aplicamos un nuevo estilo llamado ajuste flexible. El valor predeterminado es
ahora. Dijimos esto para ajustar, pero cuando guarde los cambios, la alineación de estos
elementos se arruinará echar un vistazo mira lo que sucedió, así que tenemos un ajuste
porque la vista verde aparece en la segunda línea y la vista azul ya no está
encogida, pero lo que sucedió con nuestra alineación vertical queríamos que todos estos
elementos estuvieran verticalmente en el centro de la pantalla aquí es donde un Mucha gente se
confunde, así que permítame aclararle cuándo habilitamos el ajuste de la propiedad align autos
se comporta de manera un poco diferente, por lo que si tiene varias líneas, la propiedad align autos
determina la alineación de los elementos dentro de cada línea.
Permítame mostrarle
con un buen ejemplo entonces Voy a cambiar la altura de la primera vista, la
vista azul a 300, ver lo que sucede dentro de cada línea,
nuestros elementos están centrados verticalmente ahora, actualmente 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 una propiedad diferente
se llama contenido alineado por lo que queremos alinear todo el contenido como un todo le
dijimos esto al centro ahora todos estos elementos aparecen en el centro de la
vertical o el eje secundario así que esta es la diferencia entre una línea de pedido
y el contenido alineado.
La línea de pedido determina la alineación de los elementos dentro de
cada línea y el contenido alineado determina la alineación de todo el contenido. El
contenido de la línea solo funciona si tenemos un ajuste si no lo tienes.
no tiene ningún efecto, por lo que se trata de envolver, por lo que hemos cubierto todas las
propiedades esenciales de la flexión, pero hay otras tres propiedades que debe
comprender, es posible que no las use tanto, pero es bueno conocerlas en caso de que
las vea en alguien.
El código de else, 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 establezca esta propiedad en 100, esto es equivalente a establecer el ancho en
100, por lo que si comento esta propiedad y guardo los cambios, obtendremos el
mismo resultado. por lo tanto, la base de Flex puede asignarse al
ancho o al alto.
Ahora tenemos otra propiedad, flex grow.
grow es exactamente lo mismo que configurar la propiedad Flex ahora, si digo los cambios,
no vamos a ver el mismo resultado porque no sé si hay un
problema con un simulador o las herramientas, así que verifiquemos esto. No
obtendrás el mismo resultado, pero si actualizas manualmente usando el
menú del desarrollador, vemos el mismo resultado que aplicando la
propiedad de crecimiento Flex, está bien, ahora tenemos otra propiedad llamada Flex Shrink,
sinceramente, 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 en 400, ahora nuestra vista azul ocupa
tanto espacio que la vista naranja no se ajusta a la pantalla que tenemos
desbordada en este caso. podemos establecer Flex Shrink en 1 y con esto estamos diciendo
que, oye, si tienes un desbordamiento, este elemento puede reducirse para que otros elementos puedan
caber en la pantalla. Echa un vistazo, guarda, ahí tienes.
y rango flexible, por lo que si dice flexionar a un
número negativo, esto es exactamente lo mismo que configurar el rango flexible.
Guardo los cambios,
no obtenemos el mismo resultado porque hay un problema aquí, por lo que debe
actualizar manualmente. el mismo resultado que establecer
la propiedad de reducción de Flex, por lo que todo se trata de las bases de Flex, el crecimiento de Flex y el rango de flexibilidad en esta lección, vamos a hablar sobre el
posicionamiento absoluto y relativo en reaccionar nativo, por lo que tenemos nuestro contenedor
con tres elementos como antes de ahora que si quieres mover esta
vista dorada sin cambiar el diseño a su alrededor es muy fácil, así que aquí está nuestra
vista dorada que podemos configurar en 20 ahora, cuando guarde los cambios,
esta vista dorada se moverá 20 píxeles independientes desde la vista superior, aquí
también podemos configurar un valor negativo, por lo que nuestra vista dorada se mueve: 20 píxeles desde
la parte superior, esto es exactamente lo mismo que establecer la propiedad inferior, por lo que si digo
inferior a 20, eso significa que desea mover esta vista dorada 20 píxeles desde la parte inferior,
también nos queda en derecha, movamos estos 20 píxeles desde la izquierda o 20
píxeles desde la derecha para que con estas propiedades podamos 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 sido exactamente
donde se supone que deben estar, no se movieron correctamente.
Esto sucede porque en React Native, todos los componentes tienen sus
posiciones configuradas de forma predeterminada en relativo, así es como funciona el posicionamiento relativo en CSS
también en contraste con el posicionamiento relativo.
Ahora tenemos un posicionamiento absoluto si
guardo los cambios, esta vista dorada se colocarí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 el cambios, configuremos la parte superior en 20 y la izquierda en 20 también para que
podamos ver la claridad, así que guarde mire, nuestra vista dorada está posicionada a 20 píxeles de la
izquierda y la parte superior de su padre, que es el contenedor que ocupa toda la pantalla
y como resultado de este posicionamiento estas otras vistas se movieron, por lo que
no están en su posición original, déjame mostrarte una vez más, así que voy a
cambiar la posición de regreso a la
vista relativa con posicionamiento relativo, estas dos vistas no se movieron, permanecieron en su
posición original si use el posicionamiento absoluto para esta vista dorada, se
colocará en relación con su padre y estas otras vistas se reposicionarán,
mire, se movieron, está bien, para recapitular en reaccionar nativo, todos los componentes por
defecto tienen su p osition establecido en relativo, lo que significa que podemos moverlos
en relación con su posición actual sin cambiar el diseño a su alrededor
si cambiamos la posición a absoluta, podemos mover un componente en relación con su
padre y el diseño a su alrededor se verá afectado esto es absoluto y
posicionamiento 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
pantalla de visualización de imágenes para la pantalla de bienvenida, tenemos este logotipo y esta
imagen de fondo, puede descargarlos a continuación este video ahora en esta sección nuestro enfoque es
puramente en la disposición de los componentes en la pantalla, por lo que no nos preocupamos por el
estilo, 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 volveremos y solucionaremos esos problemas. Ahora, estos
cuadros rojo y verde son marcadores de posición para los botones de inicio de sesión y registro que
vamos a cree en la siguiente sección ahora para ver la pantalla de imagen nuevamente,
tenemos dos marcadores de posición para los íconos cerrado y eliminar que agregaremos en la
siguiente sección, así que continúe e implemente estas dos pantallas, esto tomará
aproximadamente 15 minutos de su tiempo una vez que haya terminado, vuelva a ver mi
solución, está bien, lo primero que quiero hacer es crear una nueva carpeta
aquí en la aplicación de llamada raíz. Voy a poner todo 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 generado automáticamente
por nuestras herramientas, digamos que mañana sucede algo loco con este
proyecto, podemos crear un nuevo proyecto nativo de reacción y simplemente copiar el
código de su aplicación en ese proyecto, está bien, entonces aquí está nuestra carpeta de aplicaciones, movamos la
carpeta de activos dentro de esta carpeta, ahora debemos ir después de JSON y
actualizar la ruta a estas dos imágenes para que la aplicación recorte los activos y guarde una vez más,
asegurémonos de que todo esté bien funciona 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 React. No tiene que seguir si
no lo hace. me gusta así que 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 el
nombre de los componentes ahora aquí queremos Para implementar un
componente de función anteriormente en el curso, le dije que instalara
esta
extensión.
sobre este atajo a continuación o en la
página de github de este proyecto, 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 edición de cursor múltiple habilitado led así que aquí podemos cambiar el nombre de
este componente si lo desea una vez que hayamos terminado presionamos el botón de escape para
deshabilitar la edición de múltiples cursores ahora primero queremos agregar un componente de fondo de imagen
aquí así que eliminemos el elemento div escribimos fondo de imagen aquí
tenemos importación automática así que vamos a importar esto ahora necesitamos configurar la fuente de esta
imagen para que la fuente sea igual aquí llamamos a la función require entonces actualmente estamos
en la carpeta de pantallas así que subamos un nivel ahora vamos a 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 voy a escribir r
n SS, que es la abreviatura de hoja de estilo nativa de reacción, por lo que genera rápidamente
esta hoja de estilo de código que crea, almacenamos el resultado en este objeto Estilos
y, lamentablemente, esto no se importa en la parte superior, por lo que tenemos que importar manualmente
la hoja de estilo, está bien, así que en este objeto vamos a tener un montón de pares de valores clave,
así que agreguemos un nuevo par de valores clave, se llama fondo, aquí es donde
estamos.
voy a agregar todos los estilos para nuestro componente de fondo de imagen, así que voy a
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 representemos nuestra pantalla de bienvenida
así que voy a eliminar todo el código aquí, ya no lo necesitamos, así que escribimos la
pantalla de bienvenida y hacemos que el código vyas se importe automáticamente en la parte superior
hermosa, veamos qué obtenemos, así que aquí está nuestra imagen de fondo, ahora
agreguemos nuestros botones, así que más aquí dentro de este componente, vamos a agregar una vista,
vamos a darle un estilo, así que vamos a configurar esto en los estilos que el
botón de inicio de sesión ahora vamos a crear eso aquí para que veas que ya no escribo en
nueve soportes. Me gusta separe estos, así que 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éjeme ver mi hoja de trucos, así que será F c5 c6 5 guarde los cambios
podemos encontrar vista variable porque no lo importó en la parte superior, así que vamos a agregarlo
a esta lista, digamos que nuestro botón está actualmente en la parte superior, queremos ponerlo
abajo aquí, ¿cómo lo hacemos bien? Anteriormente hablamos sobre la
dirección flexible, por lo que, de forma predeterminada, la dirección flexible está configurada para llamarlo, por lo que nuestro acceso principal
es este vertical.
línea Le dije que al usar 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 justificar contenido para flex y el
valor predeterminado es inicio flexible, esa es la razón por la cual nuestro El 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 usar el mismo ancho y alto, pero cambiaré
el color de fondo a 4e c-d-c por ahora, puede que 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 sí No quiero hacer perder el tiempo de mucha gente
escribiendo muy despacio, está bien, así que guarde 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 que justifique el contenido para flex y nuestro logotipo va a
terminar aquí, entonces, ¿cómo lo colocamos en la parte superior? Aquí es donde podemos usar el
posicionamiento absoluto para que podamos ubicar el logotipo en relación con su padre, que es esta
imagen de fondo, así que veamos aquí la imagen ahora déjeme mostrar algo
en este caso, la importación automática no funcionó este elemento con este ícono azul, por lo que si
observa el lado derecho, no tenemos importación automática, a veces esto sucede en
el menú contextual que aparece aquí, así que mire, tenemos dos instancias de imagen.
el
segundo donde el ícono naranja tiene importación automática, así que asegúrese de seleccionar ese
para que ahora pueda 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
establezcamos su fuente una vez más usamos un requerido función 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 le damos estilo a los estilos de
ese logotipo ahora aquí y por cierto tenga en cuenta que estoy clasificando
estas teclas, por lo que si tiene un logotipo de botón de inicio de sesión en segundo plano, etc., esto
facilita el mantenimiento de sus aplicaciones, así que configuremos el tamaño de este logotipo en
100 por 100 para que el ancho sea 100 y la altura sea 100 y guarde
bien, esto es bueno, nuestro logotipo está abajo, ahora deberíamos usar el posicionamiento absoluto,
así que voy a establecer la posición en absoluto y pondremos estos 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 ponemos en el centro? Bueno, Ernie, hablamos sobre el
acceso primario y secundario en flex, 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 los
elementos a lo largo del eje secundario usando elementos de alineación para que vaya a o su contenedor
aquí dijimos alinear elementos al Centro y con
esto podemos alinear elementos a lo largo del eje secundario mire 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, por lo que tenemos
este ícono naranja aquí, por lo que podemos importar automáticamente esta celda que era nuestro
eslogan, lo que no necesita decir, nuestro texto aparece aquí, por lo que debemos
colocar el texto y el logotipo dentro de un contenedor y Aplico
posicionamiento absoluto en ese contenedor, está bien, agreguemos una nueva vista aquí, luego
moveremos 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 bien, así que ahora apliquemos un estilo aquí podemos decir estilos ese
contenedor de 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 ct, veamos qué sucede
para que nuestro texto esté en la posición correcta, pero nuestro logotipo no está exactamente en el medio de
la pantalla.
Una vez
más, debemos configurar los elementos de alineación para centrarlos para que podamos alinear los elementos a lo largo
del eje 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 di 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 finalización donde puede encontrar un
código fuente relevante ahora mismo en la carpeta de pantallas
agreguemos un nuevo archivo llamado ver pantalla de imagen que Jay tiene aquí vamos a
crear un componente de función Estoy contento con el nombre ahora en este componente t
primero queremos agregar una imagen, así que la imagen configure su fuente para que requiera que vayamos a
la carpeta de activos y carguemos la silla jpg ahora probemos nuestra aplicación hasta
este punto, así que vamos a después de j / s y renderizamos la pantalla de imagen de vista, ok, vamos mira
lo que obtenemos, por lo que obtenemos este tipo de pantalla blanquecina porque esta imagen que he
proporcionado es muy grande y no cabe en la pantalla, por lo que debemos aplicar un
montón de estrellas aquí, establecemos el estilo primero, debemos crear un style to object,
así que escribimos nuestro NSS bien, ahora importemos la hoja de estilo en la parte superior,
por lo que en este objeto vamos a encontrar un montón de soportes para nuestra imagen.
Voy a
establecer el ancho al 100% y la altura al 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 mostrarte, así que aquí en el proyecto,
echemos un vistazo que acabo de compartir. ese jpg, ¿ ves que los lados de esta canasta están
cortados aquí? Esto se debe al modo de cambio de tamaño para resolverlo. es un problema para nuestra imagen y configuramos el modo de cambio de tamaño para que
contenga ahora nuestra imagen encaja perfectamente en la pantalla, pero tenemos este
fondo blanco, así que tenemos que cambiarlo, así que envolvámoslo dentro de la vista que
será nuestro contenedor, así que mira, vamos a importarlo
ahora le damos un montón de estilos para que el 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 ve que eslint instant hace esto automáticamente usted, pero en
este curso no estoy usando es lane porque sigue quejándose y
crea una mala experiencia para usted, así que tengo que ordenarlos manualmente, por lo que este
contenedor establecerá su color de fondo en negro y también me gusta establecer
Flexione a uno para asegurarse de que esta vista ocupa toda la pantalla, así que esto es lo que
nos ponemos hermosos ahora, agreguemos los marcadores de posición para la ropa y elimine los
botones, así que volvamos a nuestro contenedor, agreguemos otra vista, déle un estilo,
digamos styl es ese ícono de cerrar ahora definimos el ícono de cierre de estilos que 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, nuestro botón
aparece aquí. para resolver este problema, vamos a usar el posicionamiento absoluto. Queremos
poner esto exactamente aquí, por lo que establecemos la posición en absoluto. Ahora podemos
colocar este componente en relación con su elemento principal, que es el contenedor.
Digamos que queremos colocar estos 40 píxeles. desde la parte superior y 30 píxeles desde la izquierda,
por lo que aparece aquí. Estoy contento con esto,
así que sigamos ahora.
Agreguemos nuestro segundo marcador de posición. 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 lo arreglarán en el
futuro, así que por ahora no se preocupe. así que cambiemos el color de fondo a
4e CD C por ahora queremos esto será 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 vamos a refactorizarlo vamos a
lograrlo más profesional, está bien, un problema que veo en nuestra
implementación actual es la duplicación de estos códigos de color, lo hemos repetido
en algunos lugares, así que lo que podemos hacer ahora es extraer estos códigos de color, ponerlos en
un archivo separado como colores de Jas y con esto tenemos todos los colores que usan los
usuarios de 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 modificar, 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, así que
lo configuraremos en F c5 c6 5 y nuestro color secundario en 4e CD C por ahora guarda los
cambios volvemos a nuestra vista de imagen sc reen en la parte superior importamos colores de los
colores de la barra de configuración y tenga en cuenta que estoy separando la declaración de importació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 limpiar su código y
mantenible, por lo que importamos colores, este es un objeto que exportamos aquí,
bien, entonces podemos reemplazar estos valores codificados
con colores primarios y colores secundarios, guarde los cambios, así que
eche un vistazo, obtenemos el mismo resultado que antes, pero nuestra aplicación el código es más fácil
de mantener ahora tenemos un solo lugar donde podemos definir nuestra paleta de colores
ahora algunas personas argumentan que incluso el blanco o el negro no deberían estar codificados,
deberían ser parte de la paleta para que en nuestra paleta de colores podamos definir una nueva
propiedad negro y configúrelo 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 que podemos reemplazar este
duro- valor codificado con colores que es negro eso es bueno ahora tenemos otro
problema aquí la duplicación de estas propiedades, por lo que nuestros íconos estos íconos
aquí tienen el ancho y la altura de 50, por lo que es posible que se pregunte si podemos
definir estas propiedades en un solo lugar y reutilizarlos en dos lugares,
ciertamente podemos, pero vamos a deshacernos de esta vista en el futuro, vamos a usar
un ícono real, así que por ahora no estoy demasiado preocupado por esto, esta es solo una
solución temporal.
Entonces, como les dije
antes, este tutorial son las primeras dos horas de mi último curso nativo de reacción.
El curso completo se divide en dos partes: conceptos básicos y temas 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 un código fuente antes y después para que pueda codificar fácilmente junto conmigo además
obtendrá muchos ejercicios y soluciones paso a paso y un certificado
de finalización que puede agregue a su currículum si está interesado.
Dejo el
enlace a continuación. Ofrezco un descuento a los primeros 100 estudiantes, así que si está
interesado, inscríbase ahora antes de que sea demasiado tarde.
Gracias y espero verlo en el curso..