Dela via

Kom igång med React Native

Viktigt!

Visual Studio App Center drogs tillbaka den 31 mars 2025, förutom analys- och diagnostikfunktionerna, som fortsätter att stödjas fram till den 30 juni 2026. Läs mer.

App Center SDK använder en modulär arkitektur så att du kan använda alla eller alla tjänster.

Nu ska vi komma igång med att konfigurera App Center React Native SDK i din app för att använda App Center Analytics och App Center Crashes.

1. Förutsättningar

Innan du börjar kontrollerar du att följande krav uppfylls:

  • Du använder ett React Native-projekt som kör React Native 0.34 eller senare.
  • Du riktar in dig på enheter som körs på Android Version 5.0/API-nivå 21 eller senare, eller iOS version 9.0 eller senare.
  • Du använder inte något annat bibliotek som tillhandahåller funktioner för kraschrapportering i iOS.
  • För iOS kräver standardsättet för att använda SDK CocoaPods. (Om du inte har installerat CocoaPods följer du CocoaPods Komma igång för att göra det). Det går dock att länka SDK:et manuellt.

2. Skapa din app i App Center-portalen för att hämta apphemligheten

Om du redan har skapat din app i App Center-portalen kan du hoppa över det här steget.

  1. Gå över till appcenter.ms.
  2. Registrera dig eller logga in och tryck på den blå knappen i det övre högra hörnet i portalen där det står Lägg till ny och välj Lägg till ny app på den nedrullningsbara menyn.
  3. Ange ett namn och en valfri beskrivning för din app.
  4. Välj lämpligt operativsystem (Android eller iOS) och välj React Native som plattform.
  5. Tryck på knappen längst ned till höger där det står Lägg till ny app.

När du har skapat en app kan du hämta dess apphemlighet på sidan Inställningar på App Center-portalen. I det övre högra hörnet på sidan Inställningar klickar du på de tre lodräta punkterna och väljer Copy app secret för att hämta din apphemlighet.

3. Lägg till App Center SDK-modulerna

Standardintegrering av SDK använder CocoaPods för iOS. Om du inte använder CocoaPods i din app måste du integrera React Native SDK manuellt för din iOS-app.

Öppna en terminal och navigera till roten för ditt React Native-projekt. Ange sedan följande rad för att lägga till App Center Analytics och Crashes i appen:

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

Om du föredrar yarn över npmanvänder du följande kommando för att installera App Center:

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

App Center SDK använder en modulär metod där du bara lägger till modulerna för App Center-tjänster som du vill använda. appcenter-analytics och appcenter-crashs är meningsfulla att lägga till i nästan alla appar, eftersom de ger värde utan ytterligare installation krävs. appcenter tillhandahåller appcenter-API :er för generell användning, som är användbara för flera tjänster.

3.1 Integrera SDK:t automatiskt för React Native 0.60

Du kan använda App Center SDK med React Native på två sätt: Konfigurera AppCenter-Config.plist för iOS och appcenter-config.json för Android eller genom att anropa de inbyggda startfunktioner som accepterar appSecret som argument.

3.1.1 Integrera React Native iOS

Kör pod install --repo-update från iOS-katalogen för att installera CocoaPods-beroenden.

3.1.1.1 Ange AppSecret-alternativ 1: Konfigurera AppCenter-Config.plist

  1. Skapa en ny fil med namnet AppCenter-Config.plist med följande innehåll och ersätt {APP_SECRET_VALUE} med ditt apphemlighetsvärde. Glöm inte att lägga till den här filen i Xcode-projektet (högerklicka på appen i Xcode och klicka på Lägg till filer i <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. Ändra appens AppDelegate.m - eller AppDelegate.mm-fil så att den innehåller kod för att starta SDK.

    • Lägg till följande importer:
    #import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
    • Lägg till följande rader i application:didFinishLaunchingWithOptions: metoden:
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];
3.1.1.2 Ange AppSecret-alternativ 2: Konfigurera i kod

Ändra appens AppDelegate.m - eller AppDelegate.mm-fil så att den innehåller kod för att starta SDK.

  • Lägg till följande importer:
#import <AppCenterReactNativeShared/AppCenterReactNativeShared.h>
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
  • Lägg till följande rader i application:didFinishLaunchingWithOptions: metoden:
[AppCenterReactNativeShared setStartAutomatically:YES];
[AppCenterReactNativeShared setAppSecret:@"{Your App Secret}"];
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

3.1.2 Integrera React Native Android

Ändra appens res/values/strings.xml så att den innehåller följande rader:

<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 Ange AppSecret-alternativ 1: Konfigurera appcenter-config.json

Skapa en ny fil med namnet appcenter-config.json i android/app/src/main/assets/ med följande innehåll och ersätt {APP_SECRET_VALUE} med ditt apphemlighetsvärde.

{
    "app_secret": "{APP_SECRET_VALUE}"
}

Obs! Om mappen med namnet assets inte finns bör den skapas under "project_root/android/app/src/main/assets".

3.1.2.2 Ange AppSecret-alternativ 2: Konfigurera i kod

Lägg till följande rad inuti din app's huvudaktivitetsklassens onCreate-callback för att använda App Center Analytics och 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 Integrera SDK:t automatiskt för React Native som är lägre än 0,60

Anmärkning

Om du har dina React-moduler länkade med hjälp av en relativ sökväg i Podfile men inte refereras till i projektet misslyckas länkningsskriptet eftersom det länkar App Center med statiska poddversioner. Du måste antingen följa stegen i avsnittet React Native-felsökning om du redan har kört länkningsskriptet eller länka det själv

  1. Länka plugin-program till react native-appen med hjälp av kommandot react-native link.

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

    För iOS försöker den ladda ned App Center SDK för iOS och macOS från CocoaPods om du ser ett fel som:

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

    Kör följande kommando:

    pod repo update

    Försök sedan köra react-native link igen.

    Anmärkning

    App Center SDK konfigurerar inte modeller automatiskt för App Center-moduler under länkningsprocessen. Om du använder Jest-testramverket i ditt program och får fel som orsakas av App Center SDK när du kör tester med Jest lägger du till följande i avsnittet jest i package.json fil (inkludera endast moduler som används):

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

    Anmärkning

    Oavsett om bearbetning av krascher sker automatiskt eller utlöses av Javascript-metoder bearbetas alltid krascher efter omstarten av programmet. Krascher kan inte bearbetas när programmet kraschar.

  2. Redigera projektets android/app/src/main/assets/appcenter-config.json och ersätt YOUR_APP_SECRET platshållarvärdet med App Center-projektets programhemlighet.

  3. Redigera projektets ios/{YourAppName}/AppCenter-Config.plist fil och ersätt YOUR_APP_SECRET platshållarvärdet med App Center-projektets programhemlighet. Om AppCenter-Config.plist redan finns men inte ingår i Xcode-projektet måste du lägga till det i Xcode-projektet manuellt (högerklicka på appen i XCode och klicka på Lägg till filer i <appnamn>...).

Gör den här integreringen om du inte vill använda CocoaPods. Vi rekommenderar starkt att du integrerar SDK via CocoaPods enligt beskrivningen ovan. Det går dock också att integrera den interna IOS-SDK:n manuellt.

Anmärkning

Den senaste App Center React Native SDK är inte nödvändigtvis beroende av den senaste App Center iOS SDK:n, eftersom iOS SDK:n uppdateras och släpps före React Native SDK:n.

Konsekvensen är att du måste veta vilken version av iOS SDK som React Native SDK är beroende av.

  1. Ladda ned App Center SDK för React Native-ramverk som tillhandahålls som en zip-fil och packa upp den.

  2. Du ser en mapp med namnet AppCenterReactNativeShared som innehåller ett enda ramverk för den nödvändiga React Native iOS-bryggan.

  3. Ladda ned motsvarande App Center SDK för iOS-ramverk som tillhandahålls som en zip-fil och packa upp den.

  4. Du ser en mapp med namnet AppCenter-SDK-Apple/iOS som innehåller olika ramverk för varje App Center-tjänst. Ramverket som anropas AppCenter krävs i projektet eftersom det innehåller kod som delas mellan de olika modulerna.

  5. [Valfritt] Skapa en underkatalog för bibliotek från tredje part.

    • Bästa praxis är att bibliotek från tredje part vanligtvis finns i en underkatalog (det kallas ofta leverantör), så om du inte har ditt projekt organiserat med en underkatalog för bibliotek skapar du nu en leverantörsunderkatalog (under ios-katalogen i projektet).
    • Skapa en grupp med namnet Leverantör i Xcode-projektet för att efterlikna filstrukturen på disken.

  6. Öppna Finder och kopiera de tidigare uppackade mapparna AppCenter-SDK-Apple/iOS och AppCenterReactNativeShared till projektets mapp på den plats där du vill att de ska finnas.

  7. Lägg till SDK-ramverken i projektet i Xcode:

    • Kontrollera att Projektnavigatorn är synlig (⌘+1).
    • Dra och släpp filerna AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework och AppCenterReactNativeShared.framework från Finder (på platsen från föregående steg) till Xcodes Project Navigator. AppCenter.framework- och AppCenterReactNativeShared.framework-filerna krävs för att starta SDK:t, se till att de läggs till i projektet, annars fungerar inte de andra modulerna och appen kompileras inte.
    • En dialogruta visas, kontrollera att appmålet är markerat och klicka sedan på Slutför.

  8. Länka AppCenter React Native-plugin-projekt till appens projekt:

    • Kontrollera att Projektnavigatorn är synlig (⌘+1).

    • För varje AppCenter React Native-plugin-program navigerar du till mappen som innehåller källkod. Sökvägarna är respektive

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

    • Dra och släpp .xcodeproj filer från Finder till Xcodes Project Navigator. Vanligtvis under Biblioteksgrupp .

  9. Länka bibliotek för AppCenter React Native plugin-program. Öppna projektinställningarna och under fliken Allmänt i avsnittet Länkade ramverk och bibliotek lägger du till nya objekt som refererar till målbibliotek som lades till i föregående steg:

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

  10. Ändra sökvägar för sidhuvud för att hitta rubriker från appcenter react native plugins-projekt. Öppna projektinställningarna och under fliken Bygginställningar i avsnittet Sökvägar för rubriksökning lägger du till nya platser för huvudfiler:

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

  1. Ändra appens AppDelegate.m- eller AppDelegate.mm-fil så att den innehåller kod för att starta SDK:

    • Lägg till följande importer:
    #import <AppCenterReactNative/AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
    • Lägg till dessa rader i application:didFinishLaunchingWithOptions: metoden
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

  2. Skapa en ny fil med namnet AppCenter-Config.plist med följande innehåll och ersätt {APP_SECRET_VALUE} med ditt apphemlighetsvärde. Glöm inte att lägga till den här filen i XCode-projektet (högerklicka på appen i XCode och klicka på Lägg till filer i <appnamn>...).

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

Anmärkning

Följande två steg gäller endast för appar som använder React Native 0.60 och senare.

  1. Inaktivera automatisk länkning för React Native 0.60 och senare:

    • I mappen node_modules i varje App Center-paket, öppna react-native.config.js och ställ in dependency.platforms.ios till null:
    module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};

  2. Ändra sökvägar för sidhuvud för att hitta React Native-huvuden från App Center React Native plugins-projekt:

    • Kontrollera att Projektnavigatorn är synlig (⌘+1).
    • För varje AppCenter React Native-plugin-projekt som du har lagt till i gruppen Bibliotek i steg 8:
      • Välj projektet och under fliken Skapa inställningar i avsnittet Sökvägar för rubriksökning lägger du till nya platser för rubrikfiler med ett recursive alternativ: ${SRCROOT}/../../../ios/Pods/Headers

Integreringssteg utan react-native link kommandot .

  1. Öppna filen android/settings.gradle och infoga följande rader. Inkludera de beroenden som du vill använda i projektet. Varje SDK-modul måste läggas till som ett separat beroende i det här avsnittet. Om du vill använda App Center Analytics och Krascher lägger du till följande rader:

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

Anmärkning

På grund av att jCenter-supporten avslutats flyttades alla våra sammansättningar till Maven Central-lagringsplatsen. Följ den här guiden om migrering från jCenter till Maven Central.

  1. Öppna projektets build.gradle-fil på appnivå (android/app/build.gradle) och lägg till följande rader i dependencies avsnittet:

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

  2. Ändra appens MainApplication.java-fil så att den innehåller kod för att starta SDK:

    • Lägg till dessa rader i importavsnittet
    import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage;
import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage;
import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage;
    • Lägga till AppCenter-paket i List<ReactPackage> getPackages() metoden
    @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. Öppna strings.xml fil (android/app/src/main/res/values) och lägg till följande rader inuti <resources></resources> taggar:

    <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. Skapa en ny fil med namnet appcenter-config.json i android/app/src/main/assets/ med följande innehåll och ersätt APP_SECRET_VALUE med ditt apphemlighetsvärde.

    {
    "app_secret": "APP_SECRET_VALUE"
}

Varning

Vi rekommenderar inte att du bäddar in din apphemlighet i källkoden.

3.5 Om du använder automatisk säkerhetskopiering för att undvika felaktig information om enheten följer du följande steg:

Anmärkning

Appar som riktar in sig på Android 6.0 (API-nivå 23) eller senare har automatisk säkerhetskopiering aktiverad automatiskt. 

Anmärkning

Om du redan har en anpassad fil med säkerhetskopieringsregeln växlar du till det tredje steget.

a. Skapa appcenter_backup_rule.xml fil i mappen android/app/src/main/res/xml .

b) Öppna projektets AndroidManifest.xml-fil . android:fullBackupContent Lägg till attributet i elementet<application>. Den bör peka på resursfilenappcenter_backup_rule.xml .

android:fullBackupContent="@xml/appcenter_backup_rule"

Punkt c Lägg till följande säkerhetskopieringsregler i filenappcenter_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. Starta SDK

Nu kan du skapa och starta ditt program antingen från kommandoraden eller Xcode/Android Studio.

4.1 Skapa och kör programmet från kommandoraden

Du kan skapa och starta ditt iOS-program med följande kommando:

react-native run-ios

Tips/Råd

Du kan starta den på en iOS-simulator eller iOS-enhet genom att ange iOS-enhetsnamnet i react-native run-ios --device "myDeviceName".

Du kan skapa och starta ditt Android-program med följande kommando:

react-native run-android

Tips/Råd

Du kan starta den på en Android-emulator eller android-enhet genom att ange enhets-ID:t i react-native run-android --deviceId "myDeviceId" (deviceId från adb devices kommandot).

4.2 Skapa och kör ditt program från Xcode eller Android Studio

För iOS öppnar du projektets ios/{appname}.xcworkspace eller ios/{appname}.xcodeproj filen i Xcode och skapar därifrån.

Anmärkning

Om du länkade App Center automatiskt via react-native link (som i steg 3.1) bör du öppna projektets ios/{appname}.xcworkspace fil i Xcode. Eftersom App Center CocoaPods-beroenden bara fungerar med xcworkspace inte xcodeprojoch ios/{appname}.xcodeproj filen inte har App Center CocoaPods-beroenden länkade.

För Android importerar du ditt Android-projekt i Android Studio och skapar därifrån.

Du är redo att visualisera analys- och kraschdata på portalen som SDK:et samlar in automatiskt. Det krävs ingen ytterligare konfiguration. Titta på avsnitten Analys och Krascher för guider och genomgångar av API:er för att lära dig vad App Center kan åstadkomma.