Incluso los detalles más pequeños son importantes para que una aplicación tenga éxito.   ¿Qué es una pantalla de bienvenida?  Has hecho una gran aplicación y, por supuesto, ¿por qué no publicarla bien? Pero si abre su aplicación Expo y ve la pantalla de inicio aburrida predeterminada proporcionada por Expo, usted ……… “Espera, ¿qué es una pantalla de inicio en primer lugar?”  Al ver la imagen de arriba, probablemente se habrá hecho una idea de lo que estoy hablando.  Básicamente, cuando iniciamos una aplicación, requiere algo de tiempo para ejecutar o cargar las fuentes/activos y la aplicación no está disponible de inmediato. Entonces, una pantalla de bienvenida es básicamente la pantalla que el usuario ve mientras la aplicación está en estado de carga.   ¿Qué pasa con los tamaños de los dispositivos?  No hay problema, Expo nos tiene cubiertos. En el caso de los dispositivos iOS, podemos optar por 1242 píxeles de ancho y 2436 píxeles de alto: este es el ancho del iPhone 8 Plus (el iPhone más ancho) y la altura del iPhone X (el iPhone más alto). Pero en el caso de Android, los tamaños de pantalla varían mucho con la enorme variedad de dispositivos que hay en el mercado. Una estrategia para lidiar con esto es mirar las resoluciones más comunes y diseñar en torno   . Puedes ver el   donde he copiado la información anterior 😁😁 a ellas; puede ver una lista de dispositivos y sus resoluciones aquí documento de la exposición  Configuración de la pantalla de bienvenida  Puede configurar su pantalla de inicio en el archivo app.json y leer sobre todas las propiedades de la guía de la exposición a continuación:    (Nota: la imagen de la pantalla de bienvenida   tiene fondo) splash.image no   splash.backgroundColor   splash.resizeMode   Iconos  Cuando publica su aplicación, el ícono de la aplicación es lo que la gente ve en App Store/Play Store y también en la pantalla de inicio del usuario.   Tamaño de ícono  Como sugiere Expo, podemos usar 1024x1024 en dispositivos Android e iOS. Y también asegúrese de que el ícono debe ser exactamente cuadrado, es decir, un ícono de 1023x1024 no es válido.  Configurando los Iconos para Android  En Android, tenemos que hacer alguna configuración extra más allá de especificar el ícono en app.json. Puede obtener más información sobre todas esas configuraciones   y por qué las necesitamos. Básicamente, debe proporcionar las 2 capas separadas: aquí    (generalmente   ) android.adaptiveIcon.foregroundImage assets/adaptive-icon.png     android.adaptiveIcon.backgroundImage Nuevamente, lea más sobre estas 2 capas   . aquí   Creación de iconos y pantalla de bienvenida  Agregaré íconos y una pantalla de bienvenida al   . Para crear los íconos, puede usar "Canva", "AdobeXD", etc. Pero lo creé con la   como se explica en los documentos de la exposición. Si quieres saber cómo crear iconos, mira   . Pero Abajo 👇 están los íconos que creé con Figma.  proyecto WhatsApp-Clone plantilla Figma este video Vea el ícono que creé ☝☝ en   arriba. Además,   si no quieres ir a Figma. Figma descarga los íconos aquí   Reemplazo de los archivos y revisión de todo el archivo App.json  Después de descargar los activos, simplemente vaya a la carpeta de   de su proyecto y reemplace los 3 archivos que he resaltado. Los archivos que descargue se nombrarán automáticamente con su nombre específico, ¡así que NO SE PREOCUPE! Elimine los archivos antiguos si lo desea. También puede eliminar el archivo   porque se usa para la web y nuestra aplicación no es para la web. assets assets/favicon.png  Debajo 👇 está todo el archivo App.json con todas las configuraciones descritas anteriormente:   { "expo": { "name": "Whatsapp Clone", "slug": "Whatsapp-Clone-React-Native", "platforms": ["ios", "android"], "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "updates": { "fallbackToCacheTimeout": 0 }, "assetBundlePatterns": [ "**/*" ], "ios": { "supportsTablet": true }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#FFFFFF" } } } }   Salida final  Entonces, ¡Fácil verdad!…. Así de fácil puede agregar íconos y una pantalla de bienvenida a su aplicación. Espero que hayas disfrutado este artículo. Hasta la próxima.   Mantenerse a salvo; Mantenerse sano  Gracias   Publicado por primera vez  aquí

Google

YouTube

2022 - HackerNoon Contributor of the Year - Firebase

2022 - HackerNoon Contributor of the Year - Mobile

2022 - HackerNoon Contributor of the Year - React

2022 - HackerNoon Contributor of the Year - Redux

2022 - No No No Nodejs

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Mobile

Nominated for 2022 - HackerNoon Contributor of the Year - Redux

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Firebase

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Cómo diseñar una pantalla de bienvenida con Expo y React Native

Cómo diseñar una pantalla de bienvenida con Expo y React Native

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps