Delen via

Aan de slag met React Native

Belangrijk

Visual Studio App Center is op 31 maart 2025 buiten gebruik gesteld, met uitzondering van de functies analyse en diagnose, die tot 30 juni 2026 nog steeds worden ondersteund. Meer informatie.

De App Center SDK maakt gebruik van een modulaire architectuur, zodat u alle of alle services kunt gebruiken.

Laten we aan de slag gaan met het instellen van App Center React Native SDK in uw app om App Center Analytics en App Center Crashes te gebruiken.

1. Vereisten

Voordat u begint, moet u ervoor zorgen dat aan de volgende vereisten wordt voldaan:

  • U gebruikt een React Native-project met React Native 0.34 of hoger.
  • U richt zich op apparaten die worden uitgevoerd op Android-versie 5.0/API-niveau 21 of hoger, of iOS-versie 9.0 of hoger.
  • U gebruikt geen andere bibliotheek die crashrapportagefunctionaliteit biedt voor iOS.
  • Voor iOS is voor de standaardinstelling voor het gebruik van de SDK CocoaPods vereist. (Als u CocoaPods nog niet hebt geïnstalleerd, volgt u de CocoaPods Getting Started om dit te doen). Het is echter mogelijk om de SDK handmatig te koppelen.

2. Maak uw app in de App Center-portal om het app-geheim te verkrijgen

Als u uw app al hebt gemaakt in de App Center-portal, kunt u deze stap overslaan.

  1. Ga naar appcenter.ms.
  2. Meld u aan of meld u aan en klik op de blauwe knop in de rechterbovenhoek van de portal met de tekst Nieuwe toevoegen en selecteer Nieuwe app toevoegen in de vervolgkeuzelijst.
  3. Voer een naam en een optionele beschrijving voor uw app in.
  4. Selecteer het juiste besturingssysteem (Android of iOS) en selecteer React Native als het platform.
  5. Klik rechtsonder op de knop met de tekst Nieuwe app toevoegen.

Nadat u een app hebt gemaakt, kunt u het app-geheim ophalen op de pagina Instellingen in de App Center-portal. Klik in de rechterbovenhoek van de pagina Instellingen op de drie verticale puntjes en selecteer Copy app secret om uw app-geheim op te halen.

3. De App Center SDK-modules toevoegen

De standaardintegratie van de SDK maakt gebruik van CocoaPods voor iOS. Als u CocoaPods niet in uw app gebruikt, moet u de React Native SDK handmatig integreren voor uw iOS-app.

Open een terminal en navigeer naar de hoofdmap van uw React Native-project en voer vervolgens de volgende regel in om App Center Analytics en crashes toe te voegen aan de app:

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

Als u de voorkeur geeft yarnnpm, gebruikt u de volgende opdracht om App Center te installeren:

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

De App Center SDK maakt gebruik van een modulaire benadering, waarbij u alleen de modules toevoegt voor App Center-services die u wilt gebruiken. appcenter-analytics en appcenter-crashes zijn zinvol om aan bijna elke app toe te voegen, omdat ze waarde bieden zonder dat er extra instellingen nodig zijn. appcenter biedt api's voor algemeen gebruik van App Center, handig voor meerdere services.

3.1 Integreer de SDK automatisch voor React Native 0.60

Het gebruik van App Center SDK met React Native kan op twee manieren worden uitgevoerd: het configureren van de AppCenter-Config.plist voor iOS en appcenter-config.json voor Android of door de systeemeigen startfuncties aan te roepen die de appSecret als argument accepteren.

3.1.1 React Native iOS integreren

Voer pod install --repo-update uit vanuit de iOS-directory om CocoaPods-afhankelijkheden te installeren.

3.1.1.1 Instelling AppSecret optie 1: Configureren AppCenter-Config.plist

  1. Maak een nieuw bestand met de naam AppCenter-Config.plist met de volgende inhoud en vervang {APP_SECRET_VALUE} door de geheime waarde van uw app. Vergeet niet dit bestand toe te voegen aan het Xcode-project (klik met de rechtermuisknop op de app in Xcode en klik op Bestanden toevoegen aan <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. Wijzig het bestand AppDelegate.m of AppDelegate.mm van de app om code op te nemen voor het starten van sdk.

    • Voeg de volgende imports toe:
    #import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
    • Voeg deze regels toe aan de application:didFinishLaunchingWithOptions: methode:
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];
3.1.1.2 AppSecret-optie 2 instellen: Configureren in code

Wijzig het bestand AppDelegate.m of AppDelegate.mm van de app om code op te nemen voor het starten van sdk.

  • Voeg de volgende imports toe:
#import <AppCenterReactNativeShared/AppCenterReactNativeShared.h>
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
  • Voeg deze regels toe aan de application:didFinishLaunchingWithOptions: methode:
[AppCenterReactNativeShared setStartAutomatically:YES];
[AppCenterReactNativeShared setAppSecret:@"{Your App Secret}"];
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

3.1.2 React Native Android integreren

Wijzig de res/values/strings.xml van de app zodat deze de volgende regels bevat:

<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 AppSecret-optie 1 instellen: appcenter-config.json configureren

Maak een nieuw bestand met de naam appcenter-config.json in android/app/src/main/assets/ met de volgende inhoud en vervang {APP_SECRET_VALUE} door de geheime waarde van uw app.

{
    "app_secret": "{APP_SECRET_VALUE}"
}

Opmerking: Als de map met de naam assets niet bestaat, moet deze worden gemaakt onder 'project_root/android/app/src/main/assets'.

3.1.2.2 AppSecret-optie 2 instellen: Configureren in code

Voeg de volgende regel toe binnen de main activity class van uw app in de onCreate-callback om gebruik te maken van App Center Analytics en 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 Integreer de SDK automatisch voor React Native lager dan 0,60

Opmerking

Als uw React-modules zijn gekoppeld met behulp van een relatief pad in uw Podfile, maar niet in het project worden geverifieerd, dan zal het koppelingsscript mislukken omdat App Center wordt gekoppeld aan een statische versie van pods. U moet de stappen in de sectie React Native-probleemoplossing volgen als u het koppelingsscript al hebt uitgevoerd of het zelf koppelen

  1. Koppel de invoegtoepassingen aan de React Native-app met behulp van de react-native link-opdracht.

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

    Voor iOS wordt geprobeerd om de App Center SDK voor iOS en macOS te downloaden van CocoaPods, als er een fout wordt weergegeven zoals:

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

    Voer de volgende opdracht uit:

    pod repo update

    En probeer het vervolgens opnieuw uit te voeren react-native link.

    Opmerking

    App Center SDK stelt tijdens het koppelingsproces geen mocks automatisch in voor App Center-modules. Als u het Jest-testframework in uw toepassing gebruikt en fouten ondervindt die worden veroorzaakt door de App Center SDK tijdens het uitvoeren van tests met Jest, voegt u het volgende toe aan het jest-gedeelte van package.json-bestand (alleen modules die in gebruik zijn):

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

    Opmerking

    Of de verwerking van crashes automatisch is of wordt geactiveerd door Javascript-methoden, crashes worden altijd verwerkt na het opnieuw opstarten van de toepassing. Crashes kunnen niet worden verwerkt op het moment dat de toepassing vastloopt.

  2. Bewerk het project android/app/src/main/assets/appcenter-config.json en vervang de tijdelijke aanduiding door het YOUR_APP_SECRET applicatiegeheim van uw App Center-project.

  3. Bewerk het ios/{YourAppName}/AppCenter-Config.plist bestand van het project en vervang de waarde van de tijdelijke aanduiding YOUR_APP_SECRET door het toepassingsgeheim van uw App Center-project. Als AppCenter-Config.plist al bestaat maar geen deel uitmaakt van uw Xcode-project, moet u het handmatig toevoegen aan het Xcode-project (klik met de rechtermuisknop op de app in XCode en klik op Bestanden toevoegen aan <app-naam>...).

Voer deze integratie uit als u CocoaPods niet wilt gebruiken. We raden u ten zeerste aan om de SDK te integreren via CocoaPods, zoals hierboven beschreven. Het is echter ook mogelijk om de systeemeigen SDK van iOS handmatig te integreren.

Opmerking

De nieuwste React Native SDK van App Center is niet noodzakelijkerwijs afhankelijk van de nieuwste App Center iOS SDK, omdat de iOS SDK wordt bijgewerkt en uitgebracht vóór de React Native-SDK.

Het gevolg is dat u moet weten op welke versie van de iOS SDK de React Native SDK afhankelijk is.

  1. Download de App Center SDK voor React Native-frameworks die zijn geleverd als een zip-bestand en pak het uit.

  2. U ziet een map met de naam AppCenterReactNativeShared die één framework bevat voor de vereiste React Native iOS-brug.

  3. Download de bijbehorende App Center SDK voor iOS-frameworks als een zip-bestand en pak het uit.

  4. U ziet een map met de naam AppCenter-SDK-Apple/iOS met verschillende frameworks voor elke App Center-service. Het aangeroepen AppCenter framework is vereist in het project omdat het code bevat die wordt gedeeld tussen de verschillende modules.

  5. [Optioneel] Maak een submap voor bibliotheken van derden.

    • Als best practice bevinden bibliotheken van derden zich meestal in een submap (dit wordt vaak Leverancier genoemd), dus als u uw project niet hebt georganiseerd met een submap voor bibliotheken, maakt u nu een submap leverancier (onder de map ios van uw project).
    • Maak een groep met de naam Vendor in uw Xcode-project om de bestandsstructuur op schijf na te bootsen.

  6. Open Finder en kopieer de eerder uitgepakte mappen AppCenter-SDK-Apple/iOS en AppCenterReactNativeShared naar de map van uw project op de locatie waar u deze wilt opslaan.

  7. Voeg de SDK-frameworks toe aan het project in Xcode:

    • Controleer of projectnavigator zichtbaar is (⌘+1).
    • Sleep de bestanden AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework en AppCenterReactNativeShared.framework vanuit de Finder (op de locatie van de vorige stap) naar projectnavigator van Xcode. De bestanden AppCenter.framework en AppCenterReactNativeShared.framework zijn vereist om de SDK te starten, ervoor te zorgen dat ze aan uw project worden toegevoegd, anders werken de andere modules niet en wordt uw app niet gecompileerd.
    • Er wordt een dialoogvenster weergegeven, controleer of het app-doel is ingeschakeld en klik vervolgens op Voltooien.

  8. Koppel Projecten van React Native-invoegtoepassingen van AppCenter aan het project van uw app:

    • Controleer of projectnavigator zichtbaar is (⌘+1).

    • Ga voor elke React Native-invoegtoepassing van AppCenter naar de map met broncode. Paden zullen respectievelijk worden... (context needed)

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

    • Versleep .xcodeproj bestanden vanuit de Finder naar de projectnavigator van Xcode. Meestal onder de groep Bibliotheken .

  9. Koppelingsbibliotheken voor React Native-invoegtoepassingen van AppCenter. Open uw projectinstellingen en voeg onder het tabblad Algemeen in de sectie Gekoppelde frameworks en bibliotheken nieuwe items toe die verwijzen naar doelbibliotheken die in de vorige stap zijn toegevoegd:

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

  10. Wijzig headerzoekpaden om headers te vinden uit de React Native-invoegtoepassingen van AppCenter. Open uw projectinstellingen en voeg onder het tabblad Build Settings in de sectie Zoekpaden voor kopteksten nieuwe locaties toe voor headerbestanden:

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

  1. Wijzig het bestand AppDelegate.m of AppDelegate.mm van de app om code op te nemen voor het starten van sdk:

    • Voeg de volgende imports toe:
    #import <AppCenterReactNative/AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
    • Voeg deze regels toe aan de application:didFinishLaunchingWithOptions: methode
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

  2. Maak een nieuw bestand met de naam AppCenter-Config.plist met de volgende inhoud en vervang {APP_SECRET_VALUE} door de geheime waarde van uw app. Vergeet niet dit bestand toe te voegen aan het XCode-project (klik met de rechtermuisknop op de app in XCode en klik op Bestanden toevoegen aan <app-naam>...).

    <?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>

Opmerking

De volgende twee stappen zijn alleen bedoeld voor de apps die React Native 0.60 en hoger gebruiken.

  1. Schakel automatisch koppelen voor React Native 0.60 en hoger uit:

    • In de map node_modules in elk App Center-pakket, open react-native.config.js en stel dependency.platforms.ios in op null:
    module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};

  2. Wijzig de zoekpaden voor headers zodat de headers voor React Native gevonden kunnen worden vanuit de projecten van de App Center React Native-invoegtoepassingen.

    • Controleer of projectnavigator zichtbaar is (⌘+1).
    • Voor elk AppCenter React Native-invoegtoepassingsproject dat u in stap 8 aan de groep Bibliotheken hebt toegevoegd:
      • Selecteer het project en voeg onder het tabblad Build Settings in de sectie Zoekpaden voor kopteksten nieuwe locaties toe voor headerbestanden met een recursive optie: ${SRCROOT}/../../../ios/Pods/Headers

Integratiestappen zonder de react-native link opdracht.

  1. Open het bestand android/settings.gradle en voeg de volgende regels in. Neem de gewenste afhankelijkheden op in uw project. Elke SDK-module moet worden toegevoegd als een afzonderlijke afhankelijkheid in deze sectie. Als u App Center Analytics en Crashes wilt gebruiken, voegt u de volgende regels toe:

      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')

Opmerking

Vanwege beëindiging van jCenter worden al onze assembly's verplaatst naar de Maven Central-opslagplaats. Volg deze handleiding over migratie van jCenter naar Maven Central.

  1. Open het build.gradle-bestand op app-niveau van het project (android/app/build.gradle) en voeg de volgende regels toe aan dependencies de sectie:

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

  2. Wijzig het MainApplication.java-bestand van de app om code op te nemen voor het starten van SDK:

    • Voeg deze regels toe aan de importsectie
    import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage;
import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage;
import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage;
    • AppCenter-pakketten toevoegen aan de List<ReactPackage> getPackages() methode
    @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. Open strings.xml bestand (android/app/src/main/res/values) en voeg de volgende regels toe binnen <resources></resources> tags:

    <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. Maak een nieuw bestand met de naam appcenter-config.json in android/app/src/main/assets/ met de volgende inhoud en vervang APP_SECRET_VALUE door de geheime waarde van uw app.

    {
    "app_secret": "APP_SECRET_VALUE"
}

Waarschuwing

Het is niet raadzaam om uw app-geheim in te sluiten in de broncode.

3.5 Als u automatische back-up gebruikt om onjuiste informatie over het apparaat te voorkomen, volgt u de volgende stappen:

Opmerking

Apps die zijn gericht op Android 6.0 (API-niveau 23) of hoger, hebben automatisch back-up ingeschakeld. 

Opmerking

Als u al een aangepast bestand met een back-upregel hebt, schakelt u over naar de derde stap.

een. Maak appcenter_backup_rule.xml bestand in de map android/app/src/main/res/xml .

b. Open het AndroidManifest.xml-bestand van het project. Voeg het android:fullBackupContent kenmerk toe aan het <application> element. Het moet verwijzen naar het appcenter_backup_rule.xml hulpbestand.

android:fullBackupContent="@xml/appcenter_backup_rule"

Hoofdstuk c. Voeg de volgende back-upregels toe aan het appcenter_backup_rule.xml-bestand :

<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. Start de SDK

Nu kunt u uw applicatie ontwikkelen en uitvoeren vanaf de commandoregel of met Xcode/Android Studio.

4.1 Uw toepassing bouwen en uitvoeren vanaf de opdrachtregel

U kunt uw iOS-toepassing bouwen en starten met de volgende opdracht:

react-native run-ios

Aanbeveling

U kunt het starten op een iOS-simulator of iOS-apparaat door de naam van het iOS-apparaat in react-native run-ios --device "myDeviceName"op te geven.

U kunt uw Android-toepassing bouwen en starten met de volgende opdracht:

react-native run-android

Aanbeveling

U kunt het starten op een Android-emulator of Android-apparaat door de apparaat-id in react-native run-android --deviceId "myDeviceId" (deviceId vanuit adb devices de opdracht) op te geven.

4.2 Uw toepassing bouwen en uitvoeren vanuit Xcode of Android Studio

Open voor iOS het project ios/{appname}.xcworkspace of ios/{appname}.xcodeproj bestand in Xcode en bouw vanaf daar.

Opmerking

Als u App Center automatisch hebt gekoppeld via react-native link (zoals in stap 3.1), opent u het projectbestand ios/{appname}.xcworkspace in Xcode. Omdat App Center CocoaPods-afhankelijkheden alleen werken met xcworkspace niet xcodeproj, zal het ios/{appname}.xcodeproj-bestand geen App Center CocoaPods-afhankelijkheden bevatten.

Voor Android importeert u uw Android-project in Android Studio en bouwt u vanaf daar.

U bent klaar om analyse- en crashgegevens te visualiseren in de portal die door de SDK wordt verzameld. Er is geen extra installatie vereist. Bekijk de sectie Analyse en crashes voor API-handleidingen en walkthroughs voor meer informatie over wat App Center kan doen.