Generalidades

La guía que faltaba para las variantes de aplicaciones nativas de React – Parte 1 | Por Tamás Menyhart | Guía de productos digitales de Supercharge | Febrero de 2022

La guia que faltaba para las variantes de aplicaciones nativas
Tamas Maynihart

El desarrollo de aplicaciones móviles multiplataforma realmente ha mejorado a lo largo de los años y se ha convertido en una alternativa viable al desarrollo de aplicaciones nativas para pequeñas y medianas empresas. React Native, uno de los primeros marcos móviles, todavía tiene demanda debido a su sólida comunidad y facilidad de uso para principiantes. documento.

Ya que tenemos que discutir muchos temas aquí, quisiera dedicar una serie de tres artículos explique Cómo admitir variantes de aplicaciones en detalle en React Native.

Como primer paso, inicialicemos la aplicación React Native usando Reaccionar CLI nativo:
npx react-native init FruitApp --template react-native-template-typescript --npm

Comprobar el nombre del paquete predeterminado de Android

Después de inicializar el proyecto, debemos buscar «Identificación de la aplicación» escribe «android/aplicación/construir.gradle» debajo del archivo «asignación predeterminada» impedir la inspección de nuestros Nombre del paquete inicial en Android:

android {
defaultConfig {
applicationId "com.fruitapp"
}
}

Comprobar el ID del paquete predeterminado de iOS

En el caso de iOS, primero debemos abrir el archivo del proyecto de iOS:
cd ios && open FruitApp.xcworkspace necesitamos navegar en base a:

  • dentro Panel Proyecto/Objetivoescoger «Aplicación de frutas» bajo bloque «objetivo»
  • Al final, Seleccione la pestaña «Generales» (medio), podemos comprobar ID de paquete predeterminado junto a la clave «Identificador de paquete» en iOS.
Xcode, modificación de ID de paquete de proyecto

Como mencioné en la parte de la serie de artículos, en este paso crearemos variantes de aplicaciones basadas en el entorno. Dado que la parte de Android de esta configuración es más fácil, comencemos con ella.

Crear variantes de aplicaciones basadas en el entorno de Android

Primero, debemos abrir «android/aplicación/construir.gradle» archivo, luego busque «Tipo de construcción» obstruido.deberíamos Defina nuestras dimensiones de sabor disponibles debajo de este bloque Entonces Haga coincidir cada sabor de producto que queremos con la dimensión de sabor en el bloque «productFlavors»:

android {
buildTypes {
debug {
...
}
release {
...
}
}
flavorDimensions ("environment")
productFlavors {
qa {
dimension "environment"
applicationIdSuffix ".qa"
}
prod {
dimension "environment"
}
}
}
Android Studio, sabores de productos basados ​​en el entorno
{
"scripts": {
"run:android:qa": "react-native run-android --variant=QaDebug --appIdSuffix=qa",
"run:android:prod": "react-native run-android --variant=ProdDebug",
"build:android:qa:release": "cd android && ./gradlew assembleQaRelease",
"build:android:prod:release": "cd android && ./gradlew assembleProdRelease"
}
}
Código de Visual Studio, ejecute y cree scripts basados ​​en el entorno de Android

Crear una variante de aplicación basada en el entorno de iOS

En el caso de iOS, primero, necesitamos Cree configuraciones para cada par de tipo de compilación (depuración, lanzamiento) y entorno (QA, PROD)Después de eso, necesitamos Cree un escenario para cada entorno (QA, PROD) y empareje el escenario con la configuración correcta.

  • dentro Panel Proyecto/Objetivoescoger «Aplicación de frutas» bajo Bloque «Proyecto»
  • Al final, Seleccione la pestaña «Información» (medio), podemos ver la configuración a continuación Bloque «Configuración».
Xcode, configuración existente
Xcode, configuración basada en el entorno
Xcode, menú Administrar esquemas
Xcode, cuadro de diálogo Administrar proyectos
  • nombra el plan (En la cima)
  • Marque la casilla de verificación «Compartir» (en el fondo)
Xcode, detalles del esquema de control de calidad
  • existe panel izquierdo, Seleccione el elemento «Prueba»y cambia a Menú desplegable Configuración de compilación valor a la configuración de depuración relevante (Esquema Qa.FruitApp – Configuración Qa.Debug, esquema Prod.FruitApp – Configuración Prod.Debug)
  • existe panel izquierdo, Seleccione el elemento «Analizar»y cambia a Menú desplegable Configuración de compilación valor a la configuración de depuración relevante (Esquema Qa.FruitApp – Configuración Qa.Debug, esquema Prod.FruitApp – Configuración Prod.Debug)
  • existe panel izquierdo, Seleccione el elemento «Perfil»y cambia a Menú desplegable Configuración de compilación valor a la configuración de versión correspondiente (Esquema Qa.FruitApp – Configuración Qa.Release, Esquema Prod.FruitApp – Configuración Prod.Release)
  • existe panel izquierdo, Seleccione el elemento «Archivo»y cambia a Menú desplegable Configuración de compilación valor a la configuración de versión correspondiente (Esquema Qa.FruitApp – Configuración Qa.Release, Esquema Prod.FruitApp – Configuración Prod.Release)
Xcode, escenarios basados ​​en el entorno creados
  • dentro Panel Proyecto/Objetivoescoger «Aplicación de frutas» bajo bloque «objetivo»
  • Seleccione la pestaña Configuración de compilación (medio), podemos verificar la identificación del paquete de configuración en bloque «envoltura» atravesar Abra el elemento Identificador de paquete de productos
  • renovar identificación del paquete por «QA.Debug» y Configuración «Qa.Release» llegar «com.appfruta.qa»
Xcode, ID de paquete actualizado de la configuración del entorno de control de calidad
{
"scripts": {
"run:ios:qa": "react-native run-ios --scheme Qa.FruitApp --configuration Qa.Debug",
"run:ios:prod": "react-native run-ios --scheme Prod.FruitApp --configuration Prod.Debug",
"build:ios:qa:release": "cd ios && xcodebuild -scheme Qa.FruitApp build",
"build:ios:prod:release": "cd ios && xcodebuild -scheme Prod.FruitApp build"
}
}
Visual Studio Code, un script de ejecución y compilación basado en ios

Espero que la primera parte de la serie de artículos haya sido útil y te haya mantenido interesado en los siguientes.Si prefiere inspeccionar el código directamente, puede encontrar una aplicación de muestra en Github Esto lo guiará a través de los pasos de envío para la serie de artículos.

LEER  Xiaomi Redmi K50 especificaciones completas y precio | Por Abdulganiyu Taofeek Abiola | Abril de 2022

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba