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

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

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

Demasiado Largo; Para Leer

People Mentioned

Companies Mentioned

@decodebuzzing

HISTORIAS RELACIONADAS