Compartir a través de

Introducción a React Native

Importante

Visual Studio App Center se retiró el 31 de marzo de 2025, excepto las características de análisis y diagnóstico, que seguirán siendo compatibles hasta el 30 de junio de 2026. Más información.

El SDK de App Center usa una arquitectura modular para que pueda usar cualquiera o todos los servicios.

Vamos a empezar a configurar el App Center React Native SDK en tu aplicación para usar App Center Analytics y App Center Crashes.

1. Prerrequisitos

Asegúrese de que se cumplen los siguientes requisitos previos antes de empezar:

  • Está usando un proyecto de React Native que ejecuta React Native 0.34 o posterior.
  • Tiene como destino dispositivos que están ejecutando Android versión 5.0/nivel de la API 21 o posterior, o la versión iOS 9.0 o posterior.
  • No usa ninguna otra biblioteca que proporcione la funcionalidad de informes de bloqueos en iOS.
  • Para iOS, la manera predeterminada de usar el SDK requiere CocoaPods. (Si no ha instalado CocoaPods, siga el Comienzo con CocoaPods para hacerlo). No obstante, es posible vincular el SDK manualmente.

2. Creación de la aplicación en el Portal de App Center para obtener el secreto de aplicación

Si ya ha creado la aplicación en el portal de App Center, puede omitir este paso.

  1. Diríjase a appcenter.ms.
  2. Regístrese o inicie sesión y presione el botón azul en la esquina superior derecha del portal que dice Agregar nuevo y seleccione Agregar nueva aplicación en el menú desplegable.
  3. Escriba un nombre y una descripción opcional para la aplicación.
  4. Seleccione el sistema operativo adecuado (Android o iOS) y seleccione React Native como plataforma.
  5. Presione el botón situado en la parte inferior derecha que indica Agregar nueva aplicación.

Una vez que haya creado una aplicación, puede obtener su secreto de aplicación en la página Configuración del portal de App Center. En la esquina superior derecha de la página Configuración , haga clic en los puntos verticales triples y seleccione Copy app secret para obtener el secreto de la aplicación.

3. Agregar los módulos del SDK de App Center

La integración predeterminada del SDK usa CocoaPods para iOS. Si no usa CocoaPods en la aplicación, debe integrar el SDK nativo de React manualmente para la aplicación iOS.

Abra un Terminal y navegue hasta la raíz de su proyecto de React Native, luego escriba la siguiente línea para agregar App Center Analytics y Errores a la aplicación:

npm install appcenter appcenter-analytics appcenter-crashes --save-exact

En caso de que prefiera yarn sobre npm, use el siguiente comando para instalar App Center:

yarn add appcenter appcenter-analytics appcenter-crashes --exact

El SDK de App Center usa un enfoque modular, donde simplemente agrega los módulos para los servicios de App Center que quiere usar. appcenter-analytics y appcenter-crashes tienen sentido agregar a casi todas las aplicaciones, ya que proporcionan valor sin ninguna configuración adicional necesaria. appcenter proporciona API de App Center de uso general, útiles para varios servicios.

3.1 Integrar automáticamente el SDK para React Native 0.60

El uso del SDK de App Center con React Native se puede realizar de dos maneras: configurando el AppCenter-Config.plist para iOS y el appcenter-config.json para Android, o llamando a las funciones de inicio nativas que aceptan la claveSecretaDeLaAplicación como argumento.

3.1.1 Integrar React Native iOS

Ejecute pod install --repo-update desde el directorio iOS para instalar las dependencias de CocoaPods.

3.1.1.1 Configuración de la opción AppSecret 1: Ajuste AppCenter-Config.plist

  1. Cree un nuevo archivo con el nombre AppCenter-Config.plist con el siguiente contenido y reemplace por {APP_SECRET_VALUE} el valor del secreto de la aplicación. No olvide agregar este archivo al proyecto Xcode (haga clic con el botón derecho en la aplicación en Xcode y haga clic en Agregar archivos a <AppName>...).

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
    <key>AppSecret</key>
    <string>{APP_SECRET_VALUE}</string>
    </dict>
</plist>

  2. Modifique el archivo AppDelegate.m o AppDelegate.mm de la aplicación para incluir código para iniciar el SDK.

    • Agregue las siguientes importaciones:
    #import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
    • Agregue estas líneas al application:didFinishLaunchingWithOptions: método :
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];
3.1.1.2 Establecer la opción AppSecret 2: Configuración en código

Modifique el archivo AppDelegate.m o AppDelegate.mm de la aplicación para incluir código para iniciar el SDK.

  • Agregue las siguientes importaciones:
#import <AppCenterReactNativeShared/AppCenterReactNativeShared.h>
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
  • Agregue estas líneas al application:didFinishLaunchingWithOptions: método :
[AppCenterReactNativeShared setStartAutomatically:YES];
[AppCenterReactNativeShared setAppSecret:@"{Your App Secret}"];
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

3.1.2 Integrar React Native Android

Modifique el res/values/strings.xml de la aplicación para incluir las siguientes líneas:

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>
3.1.2.1 Establecer la opción AppSecret 1: Configurar appcenter-config.json

Cree un nuevo archivo con el nombre appcenter-config.json en android/app/src/main/assets/ con el siguiente contenido y reemplace {APP_SECRET_VALUE} con el valor de su secreto de la aplicación.

{
    "app_secret": "{APP_SECRET_VALUE}"
}

Nota: Si la carpeta denominada assets no existe, debe crearse en "project_root/android/app/src/main/assets".

3.1.2.2 Establecer la opción AppSecret 2: Configurar en el código

Agregue la siguiente línea dentro de la clase de actividad principal de la aplicación' onCreate-callback para usar App Center Analytics y App Center Crashes:

AppCenter.start(getApplication(), "{Your App Secret}", Analytics.class, Crashes.class);

AppCenter.start(application, "{Your App Secret}", Analytics::class.java, Crashes::class.java)

3.2 Integrar automáticamente el SDK para React Native inferior a 0.60

Nota:

Si tiene los módulos de React vinculados mediante una ruta relativa dentro del Podfile pero no referenciados en el proyecto, el script de vinculación fallará porque App Center se vincula con versiones estáticas de pods. Debe seguir los pasos de la sección solución de problemas de React Native si ya ha ejecutado el script de vinculación o vincularlo usted mismo.

  1. Vincule los complementos a la aplicación React Native mediante el comando react-native link.

    react-native link appcenter
react-native link appcenter-analytics
react-native link appcenter-crashes

    Para iOS, intentará descargar el SDK de App Center para iOS y macOS desde CocoaPods, si ve un error similar al siguiente:

    Added code to initialize iOS App Center SDK in ios/reactnativesample/AppDelegate.m
Analyzing dependencies [!] Unable to find a specification for AppCenterReactNativeShared (~> {version})

    Ejecute el siguiente comando:

    pod repo update

    Y, a continuación, vuelva a intentar ejecutar react-native link.

    Nota:

    El SDK de App Center no configura los simulacros automáticamente para los módulos de App Center durante el proceso de vinculación. Si estás utilizando el framework de pruebas Jest en tu aplicación y experimentas errores causados por el SDK de App Center al ejecutar pruebas, agrega lo siguiente a la sección jest del archivo package.json (incluye solo los módulos en uso):

    "setupFiles": [
   "<rootDir>/node_modules/appcenter/test/AppCenterMock.js",
   "<rootDir>/node_modules/appcenter-analytics/test/AppCenterAnalyticsMock.js",
   "<rootDir>/node_modules/appcenter-crashes/test/AppCenterCrashesMock.js",
]

    Nota:

    Si el procesamiento de bloqueos es automático o desencadenado mediante métodos de JavaScript, los bloqueos siempre se procesan después del reinicio de la aplicación. Los fallos no se pueden procesar cuando se bloquea la aplicación.

  2. Edite el android/app/src/main/assets/appcenter-config.json del proyecto y reemplace el valor del marcador de posición YOUR_APP_SECRET con el secreto de aplicación de su proyecto de App Center.

  3. Edite el archivo del proyecto y reemplace el valor del ios/{YourAppName}/AppCenter-Config.plist marcador de posición por el YOUR_APP_SECRET secreto de aplicación del proyecto de App Center. Si AppCenter-Config.plist ya existe pero no forma parte del proyecto de Xcode, debe agregarlo manualmente al proyecto de Xcode (haga clic con el botón derecho en la aplicación en XCode y haga clic en Agregar archivos al <nombre> de la aplicación...).

Realice esta integración si no desea usar CocoaPods. Se recomienda encarecidamente integrar el SDK a través de CocoaPods como se ha descrito anteriormente. No obstante, también es posible integrar manualmente el SDK nativo de iOS.

Nota:

El SDK nativo de App Center React más reciente no depende necesariamente del SDK de App Center para iOS más reciente, ya que el SDK de iOS se actualiza y publica antes de la versión nativa de React.

La consecuencia es que debe saber de qué versión del SDK de iOS depende el SDK nativo de React.

  1. Descargue el SDK de App Center para frameworks de React Native proporcionado como un archivo ZIP y descomprímalo.

  2. Verá una carpeta denominada AppCenterReactNativeShared que contiene una única biblioteca necesaria para el puente iOS de React Native.

  3. Descargue el SDK de App Center correspondiente para marcos de iOS proporcionados como un archivo ZIP y descomprímalo.

  4. Verá una carpeta denominada AppCenter-SDK-Apple/iOS que contiene marcos diferentes para cada servicio de App Center. El marco al que se llama AppCenter es necesario en el proyecto, ya que contiene código que se comparte entre los distintos módulos.

  5. [Opcional] Cree un subdirectorio para bibliotecas de terceros.

    • Como procedimiento recomendado, las bibliotecas de terceros normalmente residen dentro de un subdirectorio (a menudo se denomina Proveedor), por lo que si no tiene el proyecto organizado con un subdirectorio para bibliotecas, cree ahora un subdirectorio Vendor (en el directorio ios del proyecto).
    • Cree un grupo denominado Vendor dentro del proyecto de Xcode para imitar la estructura de archivos en el disco.

  6. Abra Finder y copie las carpetas AppCenter-SDK-Apple/iOS y AppCenterReactNativeShared previamente descomprimidas en la carpeta del proyecto en la ubicación donde desea que resida.

  7. Agregue los marcos del SDK al proyecto en Xcode:

    • Asegúrese de que project Navigator esté visible (⌘+1).
    • Arrastre y coloque los archivos AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework y AppCenterReactNativeShared.framework desde el Finder (en la ubicación del paso anterior) en Project Navigator de Xcode. Los archivos AppCenter.framework y AppCenterReactNativeShared.framework son necesarios para iniciar el SDK, asegúrese de que se agregan al proyecto; de lo contrario, los demás módulos no funcionarán y la aplicación no se compilará.
    • Aparecerá un cuadro de diálogo, asegúrese de que el destino de la aplicación esté activado y, a continuación, haga clic en Finalizar.

  8. Vincule proyectos de complementos nativos de AppCenter React al proyecto de la aplicación:

    • Asegúrese de que project Navigator esté visible (⌘+1).

    • Para cada complemento de AppCenter React Native, vaya a la carpeta que contiene el código fuente. Las rutas de acceso respectivamente serán

      • /node_modules/appcenter/ios
      • /node_modules/appcenter-analytics/ios
      • /node_modules/appcenter-crashes/ios

    • Arrastre y coloque .xcodeproj archivos desde el Finder a Project Navigator de Xcode. Normalmente, en el grupo Bibliotecas .

  9. Vincular bibliotecas para complementos de React Native en AppCenter. Abra la configuración del proyecto y, en la pestaña General , en la sección Marcos vinculados y bibliotecas , agregue nuevos elementos que hacen referencia a las bibliotecas de destino agregadas en el paso anterior:

    • libAppCenterReactNative.a
    • libAppCenterReactNativeAnalytics.a
    • libAppCenterReactNativeCrashes.a

  10. Modifique las rutas de búsqueda de encabezados para buscar encabezados de los proyectos de complementos nativos de AppCenter React. Abra la configuración del proyecto y, en la pestaña Configuración de compilación, en la sección Rutas de búsqueda de encabezado, agregue nuevas ubicaciones para los archivos de encabezado:

  • $(SRCROOT)/../node_modules/appcenter/ios/AppCenterReactNative
  • $(SRCROOT)/../node_modules/appcenter-analytics/ios/AppCenterReactNativeAnalytics
  • $(SRCROOT)/../node_modules/appcenter-crashes/ios/AppCenterReactNativeCrashes

  1. Modifique el archivo AppDelegate.m o AppDelegate.mm de la aplicación para incluir código para iniciar el SDK:

    • Agregue las siguientes importaciones:
    #import <AppCenterReactNative/AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
    • Agregue estas líneas al application:didFinishLaunchingWithOptions: método
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

  2. Cree un nuevo archivo con el nombre AppCenter-Config.plist con el siguiente contenido y reemplace por {APP_SECRET_VALUE} el valor del secreto de la aplicación. No olvide agregar este archivo al proyecto XCode (haga clic con el botón derecho en la aplicación en XCode y haga clic en Agregar archivos a <Nombre> de aplicación...).

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
    <key>AppSecret</key>
    <string>{APP_SECRET_VALUE}</string>
    </dict>
</plist>

Nota:

Los dos pasos siguientes son solo para las aplicaciones que usan React Native 0.60 y versiones posteriores.

  1. Deshabilite el vínculo automático para React Native 0.60 y versiones posteriores:

    • Dentro de la carpeta node_modules de cada paquete de App Center, abra react-native.config.js y establezca dependency.platforms.ios en null.
    module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};

  2. Modifique las rutas de búsqueda de encabezado para buscar encabezados nativos de React desde los proyectos de complementos nativos de App Center React:

    • Asegúrese de que project Navigator esté visible (⌘+1).
    • Para cada proyecto de complementos nativos de AppCenter React que haya agregado al grupo Bibliotecas en el paso 8:
      • Seleccione el proyecto y, en la pestaña Configuraciones de compilación, en la sección Rutas de búsqueda de encabezados, agregue nuevas ubicaciones para los archivos de encabezado con una opción recursive: ${SRCROOT}/../../../ios/Pods/Headers

Pasos de integración sin el react-native link comando .

  1. Abra el archivo android/settings.gradle e inserte las líneas siguientes. Incluya las dependencias que desee en el proyecto. Cada módulo del SDK debe agregarse como una dependencia independiente en esta sección. Si desea usar Análisis y Errores de App Center, agregue las siguientes líneas:

      include ':appcenter-crashes'
  project(':appcenter-crashes').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter-crashes/android')
  include ':appcenter-analytics'
  project(':appcenter-analytics').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter-analytics/android')
  include ':appcenter'
  project(':appcenter').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter/android')

Nota:

Debido a la finalización del soporte de jCenter, todos nuestros ensambles se movieron al repositorio de Maven Central. Siga esta guía sobre la migración de jCenter a Maven Central.

  1. Abra el archivo build.gradle del nivel de aplicación del proyecto (android/app/build.gradle) y agregue las siguientes líneas a dependencies la sección:

    dependencies {
    implementation project(':appcenter-crashes')
    implementation project(':appcenter-analytics')
    implementation project(':appcenter')
    ...
}

  2. Modifique el archivo MainApplication.java de la aplicación para incluir código para iniciar el SDK:

    • Agregar estas líneas a la sección de importación
    import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage;
import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage;
import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage;
    • Adición de paquetes de AppCenter al List<ReactPackage> getPackages() método
    @Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
        new AppCenterReactNativeCrashesPackage(MainApplication.this, getResources().getString(R.string.appCenterCrashes_whenToSendCrashes)),
        new AppCenterReactNativeAnalyticsPackage(MainApplication.this, getResources().getString(R.string.appCenterAnalytics_whenToEnableAnalytics)),
        new AppCenterReactNativePackage(MainApplication.this)
  );
}

  3. Abra el archivo strings.xml (android/app/src/main/res/values) y agregue las siguientes líneas dentro de las etiquetas <resources></resources>.

    <string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>
<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>

  4. Cree un nuevo archivo con el nombre appcenter-config.json en android/app/src/main/assets/ con el siguiente contenido y reemplace APP_SECRET_VALUE con el valor de su secreto de la aplicación.

    {
    "app_secret": "APP_SECRET_VALUE"
}

Advertencia

No se recomienda insertar el secreto de aplicación en el código fuente.

3.5 Si usa la copia de seguridad automática para evitar obtener información incorrecta sobre el dispositivo, siga los pasos siguientes:

Nota:

Las aplicaciones destinadas a Android 6.0 (nivel de API 23) o superior tienen habilitada automáticamente la copia de seguridad automática. 

Nota:

Si ya tiene un archivo personalizado con regla de copia de seguridad, cambie al tercer paso.

a) Cree appcenter_backup_rule.xml archivo en la carpeta android/app/src/main/res/xml .

b. Abra el archivo AndroidManifest.xml del proyecto. Agregue el android:fullBackupContent atributo al <application> elemento . Debe apuntar al archivo de recursos deappcenter_backup_rule.xml .

android:fullBackupContent="@xml/appcenter_backup_rule"

c. Agregue las siguientes reglas de copia de seguridad al archivo appcenter_backup_rule.xml :

<full-backup-content xmlns:tools="http://schemas.android.com/tools">
    <exclude domain="sharedpref" path="AppCenter.xml"/>
    <exclude domain="database" path="com.microsoft.appcenter.persistence"/>
    <exclude domain="database" path="com.microsoft.appcenter.persistence-journal"/>
    <exclude domain="file" path="error" tools:ignore="FullBackupContent"/>
    <exclude domain="file" path="appcenter" tools:ignore="FullBackupContent"/>
</full-backup-content>

4. Iniciar el SDK

Ahora puede compilar e iniciar la aplicación desde la línea de comandos o Xcode/Android Studio.

4.1 Compilación y ejecución de la aplicación desde la línea de comandos

Puede compilar e iniciar la aplicación de iOS mediante el siguiente comando:

react-native run-ios

Sugerencia

Puede iniciarlo en un simulador de iOS o en un dispositivo iOS especificando el nombre del dispositivo iOS en react-native run-ios --device "myDeviceName".

Puede compilar e iniciar la aplicación Android mediante el siguiente comando:

react-native run-android

Sugerencia

Puede iniciarlo en un emulador de Android o en un dispositivo Android especificando el identificador de dispositivo en react-native run-android --deviceId "myDeviceId" (deviceId desde adb devices el comando ).

4.2 Compilación y ejecución de la aplicación desde Xcode o Android Studio

Para iOS, abra el archivo ios/{appname}.xcworkspace o ios/{appname}.xcodeproj de su proyecto en Xcode y compile desde allí.

Nota:

Si vinculó App Center automáticamente a través de react-native link (como en el paso 3.1), debe abrir el archivo del proyecto ios/{appname}.xcworkspace en Xcode. Dado que las dependencias de CocoaPods de App Center solo funcionan con xcworkspace no xcodeprojy el ios/{appname}.xcodeproj archivo no tendrá vinculadas las dependencias de CocoaPods de App Center.

Para Android, importe el proyecto de Android en Android Studio y compile desde allí.

Ya puedes visualizar los datos de Análisis y Errores en el portal que el SDK recopila automáticamente. No se requiere ninguna configuración adicional. Mire la sección Análisis y Incidentes para aprender de las guías de API y tutoriales sobre lo que puede hacer App Center.