Začínáme s React Native

Důležité

Visual Studio App Center bylo vyřazeno 31. března 2025 s výjimkou funkcí Analýzy a diagnostiky, které se budou dál podporovat až do 30. června 2026. Další informace.

Sada App Center SDK používá modulární architekturu, abyste mohli používat libovolnou nebo všechny služby.

Pojďme začít s nastavením balíčku SDK App Center React Native ve vaší aplikaci, abyste mohli používat App Center Analytics a sledování chyb App Center.

1. Požadavky

Než začnete, ujistěte se, že jsou splněny následující požadavky:

Používáte projekt React Native, na kterém běží React Native 0.34 nebo novější.
Cílíte na zařízení se systémem Android verze 5.0/API úrovně 21 nebo novější nebo iOS verze 9.0 nebo novější.
Nepoužíváte žádnou jinou knihovnu, která poskytuje funkce zasílání zpráv o chybách v iOSu.
Výchozí způsob použití sady SDK pro iOS vyžaduje CocoaPods. (Pokud jste ještě nenainstalovali CocoaPods, postupujte podle pokynů CocoaPods Začínáme . Nicméně je možné sadu SDK propojit ručně.

2. Vytvoření aplikace na portálu App Center pro získání tajného kódu aplikace

Pokud jste už aplikaci vytvořili na portálu App Center, můžete tento krok přeskočit.

Přejděte na appcenter.ms.
Zaregistrujte se nebo se přihlaste a stiskněte modré tlačítko v pravém horním rohu portálu s textem Přidat nový a v rozevírací nabídce vyberte Přidat novou aplikaci .
Zadejte název a volitelný popis aplikace.
Vyberte příslušný operační systém (Android nebo iOS) a jako platformu vyberte React Native .
Klikněte na tlačítko v pravém dolním rohu s textem Přidat novou aplikaci.

Jakmile vytvoříte aplikaci, můžete tajný kód aplikace získat na stránce Nastavení na portálu App Center. V pravém horním rohu stránky Nastavení klikněte na trojité svislé tečky a vyberte Copy app secret tajný kód aplikace.

3. Přidání modulů sady App Center SDK

Výchozí integrace sady SDK používá CocoaPods pro iOS. Pokud ve své aplikaci nepoužíváte CocoaPods, musíte sadu React Native SDK integrovat ručně pro vaši aplikaci pro iOS.

Otevřete terminál a přejděte do kořenového adresáře projektu React Native a zadejte následující řádek pro přidání analýzy App Center a chybových ukončení do aplikace:

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

Pokud dáváte přednost yarn než npm, nainstalujte App Center pomocí následujícího příkazu:

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

Sada App Center SDK používá modulární přístup, kdy stačí přidat moduly pro služby App Center, které chcete použít. Appcenter-analytics a appcenter-crashes dávají smysl přidat do téměř každé aplikace, protože poskytují hodnotu bez nutnosti dalšího nastavení. appcenter poskytuje rozhraní API App Center, která jsou užitečná pro více služeb.

3.1 Integrace sady SDK automaticky pro React Native 0.60

Použití sady App Center SDK se sadou React Native je možné provést dvěma způsoby: konfigurace AppCenter-Config.plist pro iOS a appcenter-config.json pro Android nebo voláním nativních spouštěcích funkcí, které přijímají appSecret jako argument.

3.1.1 Integrace React Native pro iOS

Spuštěním pod install --repo-update z adresáře iOS nainstalujte závislosti CocoaPods.

3.1.1.1 Nastavení možnosti AppSecret 1: Konfigurace `AppCenter-Config.plist`

Vytvořte nový soubor s názvem AppCenter-Config.plist s následujícím obsahem a nahraďte {APP_SECRET_VALUE} hodnotou tajného kódu aplikace. Nezapomeňte přidat tento soubor do projektu Xcode (klikněte pravým tlačítkem myši na aplikaci v Xcode a klikněte na Přidat soubory do <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>
```

Upravte soubor AppDelegate.m nebo AppDelegate.mm aplikace tak, aby zahrnoval kód pro spuštění sady SDK.

Přidejte následující importy:

#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>

Přidejte do application:didFinishLaunchingWithOptions: metody tyto řádky:

[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

3.1.1.2 Nastavení možnosti AppSecret 2: Konfigurace v kódu

Upravte soubor AppDelegate.m nebo AppDelegate.mm aplikace tak, aby zahrnoval kód pro spuštění sady SDK.

Přidejte následující importy:

#import <AppCenterReactNativeShared/AppCenterReactNativeShared.h>
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>

Přidejte do application:didFinishLaunchingWithOptions: metody tyto řádky:

[AppCenterReactNativeShared setStartAutomatically:YES];
[AppCenterReactNativeShared setAppSecret:@"{Your App Secret}"];
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

3.1.2 Integrace React Native pro Android

Upravte res/values/strings.xml tak, aby obsahovaly následující řádky:

<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 Nastavení možnosti AppSecret 1: Konfigurace appcenter-config.json

Vytvořte nový soubor s názvem appcenter-config.json s android/app/src/main/assets/ následujícím obsahem a nahraďte {APP_SECRET_VALUE} hodnotou tajného kódu aplikace.

{
    "app_secret": "{APP_SECRET_VALUE}"
}

Poznámka: Pokud složka s názvem assety neexistuje, měla by se vytvořit v části "project_root/android/app/src/main/assets".

3.1.2.2 Nastavení možnosti AppSecret 2: Konfigurace v kódu

Přidejte následující řádek do třídy hlavní aktivity vaší aplikace onCreate-callback pro použití App Center Analytics a 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 Integrace sady SDK automaticky pro React Native nižší než 0.60

Poznámka:

Pokud máte své moduly React propojené pomocí relativní cesty uvnitř souboru Podfile, ale nejsou skutečně odkazovány v projektu, skript pro propojení selže, protože App Center je propojeno pomocí statických verzí modulů. Pokud jste už skript propojování spustili, musíte postupovat podle kroků v části Řešení potíží s nativním prostředím React , nebo ho propojte sami.

Propojte moduly plug-in s aplikací React Native pomocí příkazu react-native link.
```
react-native link appcenter
react-native link appcenter-analytics
react-native link appcenter-crashes
```
Pro iOS se pokusí stáhnout sadu App Center SDK pro iOS a macOS z CocoaPods, pokud se zobrazí chyba podobná:
```
Added code to initialize iOS App Center SDK in ios/reactnativesample/AppDelegate.m
Analyzing dependencies [!] Unable to find a specification for AppCenterReactNativeShared (~> {version}) 
```
Spusťte následující příkaz:
```
pod repo update
```
A pak zkuste znovu spustit react-native link.

Poznámka:

Sada App Center SDK během procesu propojení nenastavuje automaticky napodobení modulů App Center. Pokud ve své aplikaci používáte testovací architekturu Jest a dochází k chybám způsobeným sadou App Center SDK při spouštění testů s Jestem, přidejte do části package.json souboru jest následující část (použijte pouze moduly):
```
"setupFiles": [
   "<rootDir>/node_modules/appcenter/test/AppCenterMock.js",
   "<rootDir>/node_modules/appcenter-analytics/test/AppCenterAnalyticsMock.js",
   "<rootDir>/node_modules/appcenter-crashes/test/AppCenterCrashesMock.js",
]
```
Poznámka:

Bez ohledu na to, zda je zpracování pádů automatické nebo spuštěné metodami JavaScriptu, pády se vždy zpracovávají po restartování aplikace. Nelze zpracovat pády aplikace v okamžiku jejich vzniku.
Upravte android/app/src/main/assets/appcenter-config.json projektu a nahraďte zástupnou hodnotu YOUR_APP_SECRET tajným kódem aplikace vašeho projektu App Center.
Upravte soubor projektu ios/{YourAppName}/AppCenter-Config.plist a nahraďte YOUR_APP_SECRET zástupnou hodnotu tajným kódem aplikace projektu App Center. Pokud soubor AppCenter-Config.plist již existuje, ale není součástí projektu Xcode, musíte ho přidat do projektu Xcode ručně (klikněte pravým tlačítkem myši na aplikaci v XCode a klikněte na Přidat soubory do <názvu> aplikace...).

3.3 [pouze iOS] Integrace sady SDK pro React Native ručně bez odkazu react-native nebo CocoaPods

Tuto integraci proveďte, pokud nechcete používat CocoaPods. Důrazně doporučujeme integrovat sadu SDK přes CocoaPods, jak je popsáno výše. Je však také možné integrovat nativní sadu SDK pro iOS ručně.

Poznámka:

Nejnovější sada APP Center React Native SDK nemusí nutně záviset na nejnovější sadě App Center iOS SDK, protože sada SDK pro iOS se aktualizuje a vydává před nativní sadou React Native.

Následkem toho je, že musíte vědět, na které verzi sady iOS SDK závisí sada React Native SDK.

Stáhněte si sadu App Center SDK pro nativní architektury React poskytované jako soubor ZIP a rozbalte ho.
Zobrazí se složka s názvem AppCenterReactNativeShared , která obsahuje jedinou architekturu pro požadovaný most React Native pro iOS.
Stáhněte si odpovídající sadu App Center SDK pro iOS, poskytovanou jako soubor ZIP, a rozbalte ji.
Zobrazí se složka s názvem AppCenter-SDK-Apple/iOS , která obsahuje různé architektury pro každou službu App Center. Volaná AppCenter architektura se v projektu vyžaduje, protože obsahuje kód sdílený mezi různými moduly.
[Volitelné] Vytvořte podadresář pro knihovny třetích stran.
- Osvědčeným postupem je, že knihovny třetích stran se obvykle nacházejí v podadresáři (často se tomu říká Dodavatel), takže pokud nemáte projekt uspořádaný s podadresářem pro knihovny, vytvořte teď podadresář Vendor (v adresáři ios projektu).
- Vytvořte skupinu s názvem Vendor v projektu Xcode, která napodobuje strukturu souborů na disku.
Otevřete Finder a zkopírujte dříve rozbalené složky AppCenter-SDK-Apple/iOS a AppCenterReactNativeShared do složky projektu v umístění, kde se má nacházet.
Přidejte do projektu v Xcode architektury sady SDK:
- Ujistěte se, že je navigátor projektu viditelný (⌘+1).
- Přetáhněte soubory AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework a AppCenterReactNativeShared.framework z Finderu (v umístění z předchozího kroku) do navigátoru projektu Xcode. K spuštění sady SDK se vyžadují soubory AppCenter.framework a AppCenterReactNativeShared.framework , ujistěte se, že jsou přidané do projektu, jinak ostatní moduly nebudou fungovat a vaše aplikace se nezkompiluje.
- Zobrazí se dialogové okno, zkontrolujte, jestli je váš cíl aplikace zaškrtnutý, a potom klikněte na Dokončit.
Propojení projektů modulů plug-in AppCenter React Native s projektem aplikace:
- Ujistěte se, že je navigátor projektu viditelný (⌘+1).
- Pro každý modul plug-in AppCenter React Native přejděte do složky obsahující zdrojový kód. Cesty budou v uvedeném pořadí
  - /node_modules/appcenter/ios
  - /node_modules/appcenter-analytics/ios
  - /node_modules/appcenter-crashes/ios
- .xcodeproj Přetáhněte soubory z Finderu do Navigátoru projektu Xcode. Obvykle ve skupině Knihovny .
Propojení knihoven pro moduly plug-in AppCenter React Native Otevřete nastavení projektu a v části Obecné v části Propojené architektury a knihovny přidejte nové položky odkazující na cílové knihovny přidané v předchozím kroku:
- libAppCenterReactNative.a
- libAppCenterReactNativeAnalytics.a
- libAppCenterReactNativeCrashes.a
Upravte Cesty hledání hlaviček pro nalezení hlaviček z projektů pluginů AppCenter React Native. Otevřete nastavení projektu a v části Nastavení sestavení v části Cesty hledání hlaviček přidejte nová umístění pro soubory hlaviček:

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

Upravte soubor AppDelegate.m nebo AppDelegate.mm aplikace tak, aby zahrnoval kód pro spuštění sady SDK:

Přidejte následující importy:

#import <AppCenterReactNative/AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>

Přidání těchto řádků do application:didFinishLaunchingWithOptions: metody

[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

Vytvořte nový soubor s názvem AppCenter-Config.plist s následujícím obsahem a nahraďte {APP_SECRET_VALUE} hodnotou tajného kódu aplikace. Nezapomeňte přidat tento soubor do projektu XCode (klikněte pravým tlačítkem myši na aplikaci v XCode a klikněte na Přidat soubory do <názvu> aplikace...).
```
<?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>
```

Poznámka:

Další dva kroky jsou určené jenom pro aplikace, které používají React Native 0.60 a vyšší.

Zakažte automatické propojení pro React Native 0.60 a novější:
- Uvnitř složky node_modules každého balíčku App Center otevřete react-native.config.js a nastavte dependency.platforms.ios na null:
```
module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};
```
Upravte cesty hledání hlaviček, aby našly hlavičky React Native z projektů pluginů App Center pro React Native.
- Ujistěte se, že je navigátor projektu viditelný (⌘+1).
- Pro každý projekt modulů plug-in AppCenter React Native, který jste přidali do skupiny Knihovny v kroku 8:
  - Vyberte projekt a v části Nastavení sestavení v části Cesty hledání v záhlaví přidejte nová umístění pro soubory hlaviček s recursive možností: ${SRCROOT}/../../../ios/Pods/Headers

3.4 [Pouze Android] Manuální integrace SDK pro verze React Native nižší než 0.60 bez použití react-native link

Kroky integrace bez react-native link příkazu

Otevřete soubor android/settings.gradle a vložte následující řádky. Zahrňte do projektu požadované závislosti. Každý modul SDK je potřeba přidat jako samostatnou závislost v této části. Pokud chcete použít App Center Analytics a Crashes, přidejte následující řádky:

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

Poznámka:

Kvůli ukončení podpory jCenter byly všechna naše sestavení přesunuta do centrálního úložiště Maven. Postupujte podle tohoto průvodce migrací z jCenter do Maven Central.

Otevřete soubor build.gradle na úrovni aplikace projektu (android/app/build.gradle) a do oddílu přidejte následující řádky dependencies :

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

Upravte soubor MainApplication.java aplikace tak, aby zahrnoval kód pro spuštění sady SDK:

Přidání těchto řádků do oddílu importu

import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage;
import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage;
import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage;

Přidání balíčků AppCenter do List<ReactPackage> getPackages() metody

@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)
  );
}

Otevřete soubor strings.xml (android/app/src/main/res/values) a přidejte do značek následující řádky <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>

Vytvořte nový soubor s názvem appcenter-config.json s android/app/src/main/assets/ následujícím obsahem a nahraďte APP_SECRET_VALUE hodnotou tajného kódu aplikace.
```
{
    "app_secret": "APP_SECRET_VALUE"
}
```

Výstraha

Nedoporučuje se vkládat tajný kód aplikace do zdrojového kódu.

3.5 Pokud používáte automatické zálohování, abyste se vyhnuli nesprávnému získání nesprávných informací o zařízení, postupujte podle následujících kroků:

Poznámka:

Aplikace, které cílí na Android 6.0 (úroveň rozhraní API 23) nebo vyšší, mají automatické zálohování povolené automaticky.

Poznámka:

Pokud už máte vlastní soubor s pravidlem zálohování, přepněte na třetí krok.

a. Ve složce android/app/src/main/res/res/xml vytvořte soubor appcenter_backup_rule.xml.

b) Otevřete soubor AndroidManifest.xml projektu. android:fullBackupContent Přidejte atribut do elementu<application>. Měl by odkazovat na soubor prostředků appcenter_backup_rule.xml .

android:fullBackupContent="@xml/appcenter_backup_rule"

c) Do souboru appcenter_backup_rule.xml přidejte následující pravidla zálohování:

<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. Spuštění sady SDK

Teď můžete aplikaci sestavit a spustit z příkazového řádku nebo Z Xcode nebo Android Studia.

4.1 Sestavení a spuštění aplikace z příkazového řádku

Aplikaci pro iOS můžete sestavit a spustit pomocí následujícího příkazu:

react-native run-ios

Návod

Můžete ho spustit na simulátoru iOS nebo zařízení s iOSem zadáním názvu zařízení s iOSem v react-native run-ios --device "myDeviceName"souboru .

Aplikaci pro Android můžete sestavit a spustit pomocí následujícího příkazu:

react-native run-android

Návod

Můžete ho spustit v emulátoru androidu nebo zařízení s Androidem zadáním ID react-native run-android --deviceId "myDeviceId" zařízení (deviceId z adb devices příkazu).

4.2 Sestavení a spuštění aplikace z Xcode nebo Android Studia

Pro iOS otevřete soubor projektu ios/{appname}.xcworkspace nebo ios/{appname}.xcodeproj v Xcode a sestavte odtud.

Poznámka:

Pokud jste App Center propojili automaticky ( react-native link jako v kroku 3.1), měli byste otevřít soubor projektu ios/{appname}.xcworkspace v Xcode. Vzhledem k tomu, že závislosti CocoaPods v App Center fungují pouze s xcworkspace a soubor xcodeproj nebude mít propojené závislosti CocoaPods z App Center.

Pro Android naimportujte projekt androidu do Android Studia a sestavte ho odtud.

Jste připraveni vizualizovat data Analytics a Crashes na portálu, která sada SDK shromažďuje automaticky. Není vyžadováno žádné další nastavení. V části Analýza a chybové ukončení najdete příručky k rozhraním API a návody, které vám pomůžou zjistit, co může App Center dělat.

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-05-05

Sdílet prostřednictvím

Začínáme s React Native

1. Požadavky

2. Vytvoření aplikace na portálu App Center pro získání tajného kódu aplikace

3. Přidání modulů sady App Center SDK

3.1 Integrace sady SDK automaticky pro React Native 0.60

3.1.1 Integrace React Native pro iOS

3.1.1.1 Nastavení možnosti AppSecret 1: Konfigurace AppCenter-Config.plist

3.1.1.2 Nastavení možnosti AppSecret 2: Konfigurace v kódu

3.1.2 Integrace React Native pro Android

3.1.2.1 Nastavení možnosti AppSecret 1: Konfigurace appcenter-config.json

3.1.2.2 Nastavení možnosti AppSecret 2: Konfigurace v kódu

3.2 Integrace sady SDK automaticky pro React Native nižší než 0.60

3.3 [pouze iOS] Integrace sady SDK pro React Native ručně bez odkazu react-native nebo CocoaPods

3.4 [Pouze Android] Manuální integrace SDK pro verze React Native nižší než 0.60 bez použití react-native link

3.5 Pokud používáte automatické zálohování, abyste se vyhnuli nesprávnému získání nesprávných informací o zařízení, postupujte podle následujících kroků:

4. Spuštění sady SDK

4.1 Sestavení a spuštění aplikace z příkazového řádku

4.2 Sestavení a spuštění aplikace z Xcode nebo Android Studia

Váš názor

Další materiály

3.1.1.1 Nastavení možnosti AppSecret 1: Konfigurace `AppCenter-Config.plist`