Cómo agregar íconos de aplicaciones y pantallas de presentación a una aplicación React Native en etapa de prueba y producción

Programación

React Native fue diseñado para "aprender una vez, escribir en cualquier lugar" y generalmente se utiliza para crear aplicaciones multiplataforma para iOS y Android. Y para cada aplicación que creamos, hay ocasiones en las que necesitamos reutilizar el mismo código, compilarlo y modificarlo un poco para que funcione en diferentes entornos. Por ejemplo, es posible que necesitemos varias máscaras, temas, una versión gratuita y de pago o, con mayor frecuencia, diferentes entornos de producción y puesta en escena.

Y la tarea que no podemos evitar es agregar íconos de aplicaciones y pantallas de presentación a nuestras aplicaciones.

De hecho, para agregar un entorno de ensayo y producción, y agregar íconos de aplicaciones, es necesario que usemos Xcode y Android Studio, y lo hacemos de la misma manera que lo hacemos con los proyectos nativos de iOS o Android.

Llamemos a nuestra aplicación MyAppy arranquemos con react-native init MyApp. Por supuesto, habrá toneladas de bibliotecas que nos ayudarán a administrar diferentes entornos.

En este post, haremos lo mismo que hicimos con las aplicaciones nativas, para que conozcamos los pasos básicos.

Configuración de compilación, destino, tipos de compilación, sabor de producción y variante de compilación

Hay algunas terminologías que debemos recordar. En iOS, la depuración y las versiones se denominan configuraciones de compilación, y la preparación y la producción se denominan destinos.

Una configuración de compilación especifica un conjunto de configuraciones de compilación que se utilizan para compilar el producto de un objetivo de una manera particular. Por ejemplo, es común tener configuraciones de compilación separadas para depurar y liberar compilaciones de un producto. Un destino especifica un producto para compilar y contiene las instrucciones para compilar el producto a partir de un conjunto de archivos en un proyecto o espacio de trabajo. Un objetivo define un solo producto; organiza las entradas en el sistema de compilación (los archivos de origen y las instrucciones para procesar esos archivos de origen) necesarios para compilar ese producto. Los proyectos pueden contener uno o más objetivos, cada uno de los cuales produce un producto

En Android, la depuración y las versiones se denominan tipos de compilación, y la puesta en escena y la producción se denominan tipos de productos. Juntos forman variantes de construcción.

Por ejemplo, un “demo” sabor del producto puede especificar diferentes características y requisitos de los dispositivos, tales como código personalizado fuente, los recursos y los niveles mínimos de API, mientras que la “depuración” tipo de generación aplica diferentes de construcción y envasado ajustes, tales como opciones de depuración y firma llaves. La variante de compilación resultante es la versión "demoDebug" de su aplicación, e incluye una combinación de las configuraciones y los recursos incluidos en el tipo de producto "demo", el tipo de compilación "depuración" y el main/conjunto de fuentes.

Objetivos de puesta en escena y producción en iOS

Abre el MyApp.xcodeprojinterior iosusando Xcode. Esto es lo que obtenemos después del arranque:

React Native crea aplicaciones iOS y tvOS, y dos objetivos de prueba. En Xcode, un proyecto puede contener muchos objetivos, y cada objetivo significa un producto único con su propia configuración de compilación: Info.plist e íconos de aplicaciones.

Destino duplicado

Si no necesitamos la aplicación tvOS, podemos eliminar MyApp-tvOSy MyApp-tvOSTests. Usemos el MyAppobjetivo como nuestro entorno de producción y right click -> Dupliccomamos para hacer otro objetivo. Llamemos a it MyApp Staging.

Cada objetivo debe tener un ID de paquete único. Cambiar el ID de paquete de MyAppa com.onmyway133.MyAppy MyApp Staginga com.onmyway133.MyApp.Staging.

Info.plist

Cuando duplicamos MyApp target, Xcode también se duplica Info.plisten MyApp copy-Info.plistpara el objetivo de ensayo. Cámbielo por un nombre más significativo Info-Staging.plisty arrástrelo al MyAppgrupo en Xcode para mantenerse organizado. Después de arrastrar, el MyApp Staging objetivo no puede encontrar el plist, así que haga clic Choose Info.plist Filey apunte al archivo Info-Staging.plist.

Esquema

Xcode también duplica el esquema cuando duplicamos el objetivo, por lo que obtenemos MyApp copy:

Haga clic Manage Schemesen el menú desplegable de esquemas para abrir el Administrador de esquemas:

Normalmente elimino el MyApp copyesquema generado y luego vuelvo a crear un esquema nuevo para el MyApp Stagingobjetivo. Debe asegurarse de que el esquema esté marcado como Compartido para que se realice un seguimiento en git.

Por alguna razón, el esquema de puesta en escena no tiene todas las cosas configuradas como el esquema de producción. Puede encontrarse con problemas como ‘React/RCTBundleURLProvider.h’ file not foundo RN: ‘React/RCTBridgeModule.h’ file not found. Es porque el Reactobjetivo aún no está vinculado.

Para solucionarlo, debemos deshabilitar Parallelise Buildy agregar Reactobjetivo y moverlo hacia arriba MyApp Staging.

Sabores de productos de producción y puesta en escena en Android

Abra la androidcarpeta en Android Studio. De forma predeterminada, solo hay tipos de compilación de depuración y publicación:

Están configurados en el appmódulo build.gradle:

buildTypes { release { minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" }}

Primero, cambiemos la identificación de la aplicación para com.onmyway133.MyAppque coincida con iOS. No es obligatorio, pero creo que es bueno mantenerse organizado. Luego cree dos sabores de productos para la puesta en escena y la producción. Para la preparación, agreguemos .Staginga la identificación de la aplicación.

Desde Android Studio 3, "todos los sabores ahora deben pertenecer a una dimensión de sabor con nombre", normalmente solo necesitamos las dimensiones predeterminadas. Así es como se ve en build.gradlenuestro appmódulo:

android { compileSdkVersion rootProject.ext.compileSdkVersion buildToolsVersion rootProject.ext.buildToolsVersion flavorDimensions "default"
defaultConfig { applicationId "com.onmyway133.MyApp" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" ndk { abiFilters "armeabi-v7a", "x86" } } splits { abi { reset() enable enableSeparateBuildPerCPUArchitecture universalApk false // If true, also generate a universal APK include "armeabi-v7a", "x86" } } buildTypes { release { minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" } }
productFlavors { staging { applicationIdSuffix ".Staging" }
 production {
 } }}

Haga clic Sync Nowpara dejar que Gradle haga el trabajo de sincronización. Después de eso, podemos ver que tenemos cuatro variantes de construcción:

Cómo ejecutar la puesta en escena y la producción

Para ejecutar la aplicación de Android, podemos especificar una variante como react-native run-android — variant=productionDebug, pero prefiero ir a Android Studio, seleccionar la variante y ejecutar.

Para ejecutar la aplicación iOS, podemos especificar el esquema como react-native run-ios — simulator=’iPhone X’ — scheme=”MyApp Staging”. A partir de react-native 0.57.0esto no funciona. Pero no importa, ya que suelo ir a Xcode, seleccionar el esquema y ejecutarlo.

Agregar ícono de aplicación para iOS

De acuerdo con la Guía de interfaz humana, necesitamos íconos de aplicaciones de diferentes tamaños para diferentes versiones de iOS, resoluciones de dispositivos y situaciones (notificación, configuración, Spring Board). He creado una herramienta llamada IconGenerator, que se mencionó anteriormente en Mejores herramientas de código abierto para desarrolladores. Arrastre el icono que desee (prefiero aquellos con 1024x1024 píxeles para iconos de aplicaciones de alta resolución) a la aplicación Icon Generator para MacOS.

Haga clic Generatey obtenemos AppIcon.appiconset. Contiene iconos de aplicaciones de los tamaños requeridos que están listos para usarse en el Catálogo de activos. Arrástrelo a Asset Catalog en Xcode. Eso es para producción.

Para la puesta en escena, es una buena práctica agregar un banner de "Puesta en escena" para que los evaluadores sepan qué es la puesta en escena y cuál es la producción. Podemos hacer esto fácilmente en Sketch.

Recuerde establecer un fondo, para que no obtengamos un fondo transparente. Para el icono de una aplicación con fondo transparente, iOS muestra el fondo en negro, lo que se ve horrible.

Después de exportar la imagen, arrastre el icono de preparación al IconGenerator de la misma forma que lo hicimos antes. Pero esta vez, cambie el nombre del generado appiconseta AppIcon-Staging.appiconset. Luego, arrástrelo a Asset Catalog en Xcode.

Para que el destino de ensayo utilice los iconos de la aplicación de ensayo, abra MyApp Staging targety elija AppIcon-Stagingcomo App Icon Source.

Agregar ícono de aplicación para Android

Me gusta cambiar a la vista Proyecto, ya que es más fácil cambiar los iconos de las aplicaciones. Haga clic en res -> New -> ImageActivo para abrir Asset Studio. Podemos usar los mismos íconos de aplicaciones que usamos en iOS:

Android 8.0 (API nivel 26) introdujo los iconos adaptables, por lo que debemos ajustar el control deslizante Cambiar tamaño para asegurarnos de que los iconos de nuestras aplicaciones se vean lo mejor posible.

Android 8.0 (API nivel 26) presenta íconos de iniciador adaptables, que pueden mostrar una variedad de formas en diferentes modelos de dispositivos. Por ejemplo, un icono de lanzador adaptativo puede mostrar una forma circular en un dispositivo OEM y mostrar una ardilla en otro dispositivo. Cada OEM de dispositivo proporciona una máscara, que luego el sistema usa para representar todos los íconos adaptables con la misma forma. Los iconos de iniciador adaptables también se utilizan en los accesos directos, la aplicación Configuración, los cuadros de diálogo para compartir y la pantalla de descripción general. - Desarrolladores de Android

Lo estamos haciendo para la producción primero, lo que significa el mainDirectorio de Res. Este paso reemplazará los íconos de la aplicación de marcador de posición existentes generados por Android Studio cuando iniciamos los proyectos de React Native.

Now that we have production app icons, let’s make staging app icons. Android manages code and assets via convention. Click on src -> New -> Directory and create a staging folder. Inside staging, create a folder called res . Anything we place in staging will replace the ones in main — this is called source sets.

You can read more here: Build with source sets.

Puede usar directorios de conjuntos de fuentes para contener el código y los recursos que desea empaquetar solo con ciertas configuraciones. Por ejemplo, si está creando la variante de compilación "demoDebug", que es el producto cruzado de un tipo de producto "demo" y el tipo de compilación "depuración", Gradle examina estos directorios y les da la siguiente prioridad: src/demoDebug/ (conjunto de fuentes de variante de compilación ) src/debug/ (conjunto de fuentes de tipo de compilación) src/demo/ (conjunto de fuentes de sabor del producto) src/main/ (conjunto de fuentes principal)

Haga clic con el botón derecho en staging/res -> New -> ImageActivo para crear iconos de aplicaciones para la puesta en escena. También usamos los mismos íconos de la aplicación de ensayo que en iOS, pero esta vez los hoose susamos como Directorio Res. De esta manera, Android Studio sabe cómo generar diff erent ic_launcher y ponerlos en into staging.

Agregar pantalla de inicio para iOS

La pantalla de bienvenida se llama pantalla de inicio en iOS y es importante.

Una pantalla de inicio aparece instantáneamente cuando se inicia la aplicación. La pantalla de inicio se reemplaza rápidamente con la primera pantalla de su aplicación, dando la impresión de que su aplicación es rápida y receptiva.

En los viejos tiempos, necesitábamos usar imágenes de lanzamiento estáticas con diferentes tamaños para cada dispositivo y orientación.

Guión gráfico de la pantalla de inicio

Por ahora la forma recomendada es utilizar Launch Screen storyboard. El proyecto iOS de React Native viene con, LaunchScreen.xibpero xibes cosa del pasado. Eliminémoslo y creemos un archivo llamado Launch Screen.storyboard.

Haga clic con el botón derecho en la MyAppcarpeta -> Nuevo y elija Launch Screen, agréguelo a ambos objetivos, ya que generalmente mostramos la misma pantalla de inicio tanto para la puesta en escena como para la producción.

Conjunto de imágenes

Open asset catalog, right click and select New Image Set . We can name it anything. This will be used in the Launch Screen.storyboard.

Open Launch Screen.storyboard and add an UIImageView . If you are using Xcode 10, click the Library button in the upper right corner and choose Show Objects Library.

Set image for Image View, and make sure Content Mode is set to Aspect Filled, as this ensures that the image always covers the full screen (although it may be cropped). Then connect ImageView using constraints to the View, not the Safe Area. You do this by Control+drag from the Image View (splash) to the View.

Constrains without margin

Click into each constraint and uncheck Relative to Margin. This makes our ImageView pin to the very edges of the view and with no margin at all.

Now go to both targets and select Launch Screen.storyboard as Launch Screen File:

On iOS, the launch screen is often cached, so you probably won’t see the changes. One way to avoid that is to delete the app and run it again.

Add a launcher theme for Android

There are several ways to add splash screen for Android, from using launcher themes, Splash Activity, and a timer. For me, a reasonable splash screen for Android should be a very minimal image.

As there are many Android devices with different ratios and resolutions, if you want to show a full screen splash image, it will probably not scale correctly for each device. This is just about UX.

For the splash screen, let’s use the launcher theme with splash_background.xml .

Learn about Device Metric

There is no single splash image that suits all Android devices. A more logical approach is to create multiple splash images for all common resolutions in portrait and landscape. Or we can design a minimal splash image that works. You can find more info here: Device Metric.

Here is how to add splash screen in 4 easy steps:

Add splash image

We usually need a common splash screen for both staging and production. Drag an image into main/res/drawble . Android Studio seems to have a problem with recognising some jpg images for the splash screen, so it’s best to choose png images.

Add splash_background.xml

Right click on drawable -> New -> Drawable resource file . Name it whatever you want — I choose splash_background.xml . Choose the root element as layer-list:

A Layer List means “a Drawable that manages an array of other Drawables. These are drawn in array order, so the element with the largest index is drawn on top”. Here is how splash_background.xml looks like:

Note that we point to our splash image we added earlier with android:src=”@drawable/iron_man”.

Declare style

Open styles.xml and add SplashTheme:

 @drawable/splash_background

Use SplashTheme

Go to Manifest.xml and change the theme of the the launcher activity, which has category android:name="android.intent.category.LAUNCHER" . Change it to android:theme="@style/SplashTheme" . For React Native, the launcher activity is usually MainActivity . Here is how Manifest.xml looks:

Run the app now and you should see the splash screen showing when the app starts.

Managing environment configurations

The differences between staging and production are just about app names, application ids, and app icons. We probably use different API keys, and backend URL for staging and production.

Right now the most popular library to handle these scenarios is react-native-config, which is said to “bring some 12 factor love to your mobile apps”. It requires lots of steps to get started, and I hope there is a less verbose solution.

Where to go from here

In this post, we touched Xcode and Android Studio more than Visual Studio Code, but this was inevitable. I hope this post was useful to you. Here are some more links to read more about this topic:

  • Add App Icons and Launch Screens to React Native Apps (iOS & Android)
  • How to Add a Splash Screen to a React Native App (iOS and Android)
  • Managing Configuration in React Native
  • Adding multiple target pipelines for React Native Apps (and Fastlane CircleCI deployment) pt. 1
  • The (Complete) Android Splash Screen Guide

If you like this post, consider visiting my other articles and apps ?