
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 MyApp
y 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 productoEn 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 elmain/
conjunto de fuentes.
Objetivos de puesta en escena y producción en iOS
Abre el MyApp.xcodeproj
interior ios
usando 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-tvOS
y MyApp-tvOSTests
. Usemos el MyApp
objetivo como nuestro entorno de producción y right click -> Duplic
comamos para hacer otro objetivo. Llamemos a it MyApp Stag
ing.

Cada objetivo debe tener un ID de paquete único. Cambiar el ID de paquete de MyApp
a com.onmyway133.MyApp
y MyApp Staging
a com.onmyway133.MyApp.Staging
.

Info.plist
Cuando duplicamos MyApp target
, Xcode también se duplica Info.plist
en MyApp copy-Info.plist
para el objetivo de ensayo. Cámbielo por un nombre más significativo Info-Staging.plist
y arrástrelo al MyApp
grupo 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 File
y 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 Schemes
en el menú desplegable de esquemas para abrir el Administrador de esquemas:

Normalmente elimino el MyApp copy
esquema generado y luego vuelvo a crear un esquema nuevo para el MyApp Staging
objetivo. 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 found
o RN: ‘React/RCTBridgeModule.h’ file not found
. Es porque el React
objetivo aún no está vinculado.
Para solucionarlo, debemos deshabilitar Parallelise Build
y agregar React
objetivo y moverlo hacia arriba MyApp Staging
.

Sabores de productos de producción y puesta en escena en Android
Abra la android
carpeta en Android Studio. De forma predeterminada, solo hay tipos de compilación de depuración y publicación:

Están configurados en el app
mó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.MyApp
que 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 .Staging
a 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.gradle
nuestro app
mó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 Now
para 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.0
esto 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 Generate
y 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 appiconset
a 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 target
y elija AppIcon-Staging
como 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 -> Image
Activo 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 AndroidLo estamos haciendo para la producción primero, lo que significa el main
Directorio 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 -> Dir
ectory and create a s
taging folder. Inside staging, create a folder call
ed res . Anything we place in s
taging will replace the ones i
n main — this is called sourc
e 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 -> Image
Activo 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 s
usamos como Directorio Res. De esta manera, Android Studio sabe cómo generar diff erent ic_la
uncher y ponerlos en into s
taging.

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.xib
pero xib
es cosa del pasado. Eliminémoslo y creemos un archivo llamado Launch Screen.storyboard
.
Haga clic con el botón derecho en la MyApp
carpeta -> 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 resourc
e file . Name it whatever you want — I choose splash_backgrou
nd.xml . Choose the root element as laye
r-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 ?