Начало работы с React Native

2025-05-05

Это важно

Центр приложений Visual Studio был прекращен 31 марта 2025 г., за исключением функций аналитики и диагностики, которые будут поддерживаться до 30 июня 2026 г. Подробнее.

Пакет SDK для Центра приложений использует модульную архитектуру, чтобы использовать любую или все службы.

Давайте приступим к настройке пакета SDK Для Центра приложений React Native в приложении для использования аналитики Центра приложений и сбоев Центра приложений.

1. Предварительные требования

Прежде чем приступить к работе, убедитесь, что у вас есть следующие необходимые компоненты.

Вы используете проект React Native с версией 0.34 или более поздней.
Вы нацелены на устройства, работающие на уровне 21 или более поздней версии Android версии 5.0/API, или iOS версии 9.0 или более поздней.
Вы не используете другую библиотеку, которая предоставляет функции отчетов о сбоях в iOS.
Для iOS по умолчанию для использования пакета SDK требуется CocoaPods. (Если вы еще не установили CocoaPods, следуйте инструкциям по началу работы с CocoaPods . Тем не менее, можно связать пакет SDK вручную.

2. Создание приложения на портале Центра приложений для получения секрета приложения

Если вы уже создали приложение на портале Центра приложений, этот шаг можно пропустить.

Перейдите к appcenter.ms.
Зарегистрируйтесь или войдите и нажмите синюю кнопку в правом верхнем углу портала, где указано Добавить новое, и выберите Добавить новое приложение в раскрывающемся меню.
Введите имя и необязательное описание приложения.
Выберите соответствующую ОС (Android или iOS) и выберите React Native в качестве платформы.
Нажмите кнопку в правом нижнем углу, где говорится, как добавить новое приложение.

После создания приложения вы можете получить секрет приложения на странице "Параметры " на портале Центра приложений. В правом верхнем углу страницы "Параметры " щелкните тройную вертикальную точку и выберите Copy app secret , чтобы получить секрет приложения.

3. Добавление модулей пакета SDK центра приложений

Интеграция пакета SDK по умолчанию использует CocoaPods для iOS. Если вы не используете CocoaPods в приложении, необходимо интегрировать пакет SDK React Native вручную для приложения iOS.

Откройте терминал и перейдите к корню проекта React Native, а затем введите следующую строку, чтобы добавить Аналитику и сбои Центра приложений в приложение:

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

В случае, если вы предпочитаете yarn вместо npm, используйте следующую команду, чтобы установить Центр приложений:

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

Пакет SDK для Центра приложений использует модульный подход, где вы просто добавляете модули для служб Центра приложений, которые вы хотите использовать. Appcenter-analytics и appcenter-crashes имеет смысл добавить почти в каждое приложение, так как они предоставляют пользу без дополнительной настройки. appcenter предоставляет API Центра приложений общего назначения, полезные для нескольких служб.

3.1 Интеграция пакета SDK автоматически для React Native 0.60

Использование пакета SDK Центра приложений с React Native можно осуществлять двумя способами: настройкой AppCenter-Config.plist для iOS и appcenter-config.json для Android или вызовом нативных функций запуска, принимающих appSecret в качестве аргумента.

3.1.1 Интеграция React Native iOS

Запустите pod install --repo-update из каталога iOS, чтобы установить зависимости CocoaPods.

3.1.1.1 Настройка параметра AppSecret. Вариант 1: Конфигурирование `AppCenter-Config.plist`

Создайте файл с именем AppCenter-Config.plist со следующим содержимым и замените {APP_SECRET_VALUE} значение секрета приложения. Не забудьте добавить этот файл в проект Xcode (щелкните правой кнопкой мыши приложение в Xcode и нажмите кнопку "Добавить файлы в <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>
```
Измените файл AppDelegate.m или AppDelegate.mm приложения, чтобы включить код для запуска пакета SDK.
- Добавьте следующие импорты:
```
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
```
- Добавьте следующие строки в application:didFinishLaunchingWithOptions: метод:
```
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];
```

3.1.1.2 Настройка AppSecret Вариант 2: Конфигурирование в коде

Измените файл AppDelegate.m или AppDelegate.mm приложения, чтобы включить код для запуска пакета SDK.

Добавьте следующие импорты:

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

Добавьте следующие строки в application:didFinishLaunchingWithOptions: метод:

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

3.1.2 Интеграция React Native Android

Измените res/values/strings.xml приложения, чтобы включить следующие строки:

<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 Вариант 1: Настройка appcenter-config.json

Создайте файл с именем appcenter-config.json в android/app/src/main/assets/ следующем содержимом и замените {APP_SECRET_VALUE} значение секрета приложения.

{
    "app_secret": "{APP_SECRET_VALUE}"
}

Примечание. Если папка именованных ресурсов не существует, она должна быть создана в разделе "project_root/android/app/src/main/assets".

3.1.2.2 Параметр AppSecret 2. Настройка в коде

Добавьте следующую строку в метод onCreate основного класса активности вашего приложения, чтобы использовать App Center Analytics и 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 Интегрируйте пакет SDK автоматически для React Native младше версии 0.60

Замечание

Если у вас есть модули React, связанные с относительным путем внутри podfile, но не указаны в проекте, скрипт связывания завершится ошибкой, так как он связывает Центр приложений с использованием статических версий pod. Если вы уже выполнили скрипт связывания, выполните действия из раздела "Устранение неполадок React Native" или свяжите его вручную.

Свяжите подключаемые модули с приложением React Native с помощью команды ссылки react-native.
```
react-native link appcenter
react-native link appcenter-analytics
react-native link appcenter-crashes
```
Для iOS он попытается скачать пакет SDK Центра приложений для iOS и macOS из CocoaPods, если вы увидите ошибку, например:
```
Added code to initialize iOS App Center SDK in ios/reactnativesample/AppDelegate.m
Analyzing dependencies [!] Unable to find a specification for AppCenterReactNativeShared (~> {version}) 
```
Выполните следующую команду:
```
pod repo update
```
А затем повторите попытку запустить react-native link.

Замечание

Пакет SDK центра приложений не настраивает макеты автоматически для модулей Центра приложений во время связывания. Если вы используете платформу тестирования Jest в приложении и возникают ошибки, вызванные пакетом SDK центра приложений при выполнении тестов с Jest, добавьте следующий раздел в раздел package.json файла (включая только модули в использовании):
```
"setupFiles": [
   "<rootDir>/node_modules/appcenter/test/AppCenterMock.js",
   "<rootDir>/node_modules/appcenter-analytics/test/AppCenterAnalyticsMock.js",
   "<rootDir>/node_modules/appcenter-crashes/test/AppCenterCrashesMock.js",
]
```
Замечание

Независимо от того, выполняется ли обработка сбоев автоматически или активируется методами Javascript, после перезапуска приложения всегда обрабатываются сбои. Сбои не могут быть обработаны в момент, когда происходит сбой приложения.
Измените android/app/src/main/assets/appcenter-config.json проекта и замените значение заполнителя YOUR_APP_SECRET на секрет приложения вашего проекта в Центре приложений.
Измените файл проекта ios/{YourAppName}/AppCenter-Config.plist, заменив значение заполнителя YOUR_APP_SECRET на секрет приложения вашего проекта в App Center. Если AppCenter-Config.plist уже существует, но не входит в проект Xcode, его необходимо добавить в проект Xcode вручную (щелкните правой кнопкой мыши приложение в XCode и нажмите кнопку "Добавить файлы в <имя> приложения...").

3.3 [только для iOS] Интеграция пакета SDK вручную для React Native без ссылки react-native или CocoaPods

Выполните эту интеграцию, если вы не хотите использовать CocoaPods. Настоятельно рекомендуется интегрировать пакет SDK с помощью CocoaPods, как описано выше. Тем не менее, можно также интегрировать собственный пакет SDK для iOS вручную.

Замечание

Последняя версия пакета SDK Для Центра приложений React Native не обязательно зависит от последнего пакета SDK для Центра приложений iOS, так как пакет SDK для iOS обновляется и освобождается до React Native.

Следствием является то, что необходимо знать, какая версия пакета SDK для iOS зависит от пакета SDK React Native.

Скачайте пакет SDK Центра приложений для платформ React Native , предоставляемый в виде ZIP-файла и распакуйте его.
Вы увидите папку с именем AppCenterReactNativeShared , которая содержит одну платформу для требуемого моста React Native для iOS.
Скачайте соответствующий пакет SDK центра приложений для платформ iOS, предоставленный в виде ZIP-файла и распакуйте его.
Вы увидите папку AppCenter-SDK-Apple/iOS , содержащую разные платформы для каждой службы Центра приложений. Вызываемая платформа AppCenter требуется в проекте, так как она содержит код, общий доступ между различными модулями.
[Необязательно] Создайте подкаталог для сторонних библиотек.
- Как рекомендуется, сторонние библиотеки обычно находятся в подкаталоге (это часто называется Поставщиком), поэтому если у вас нет проекта с подкаталогом для библиотек, создайте подкаталог поставщика (в каталоге ios проекта).
- Создайте группу с именем Vendor внутри проекта Xcode, чтобы имитировать структуру файлов на диске.
Откройте Finder и скопируйте ранее распакуированные папки AppCenter-SDK-Apple/iOS и AppCenterReactNativeShared в папку проекта в расположении, где он должен находиться.
Добавьте платформы SDK в проект в Xcode:
- Убедитесь, что навигатор проекта отображается ([+1]).
- Перетащите файлы AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework и AppCenterReactNativeShared.framework из finder (в расположении из предыдущего шага) в навигатор проектов Xcode. Файлы AppCenter.framework и AppCenterReactNativeShared.framework необходимы для запуска пакета SDK, убедитесь, что они добавлены в проект, в противном случае другие модули не будут работать, и приложение не компилируется.
- Откроется диалоговое окно, убедитесь, что целевой объект приложения установлен, а затем нажмите кнопку "Готово".
Свяжите плагины AppCenter React Native с проектом вашего приложения.
- Убедитесь, что навигатор проекта отображается ([+1]).
- Для каждого подключаемого модуля AppCenter React Native перейдите к папке, содержащей исходный код. Пути соответственно будут
  - /node_modules/appcenter/ios
  - /node_modules/appcenter-analytics/ios
  - /node_modules/appcenter-crashes/ios
- .xcodeproj Перетащите файлы из средства поиска в навигатор проектов Xcode. Обычно в группе библиотек .
Связывание библиотек плагинов AppCenter React Native. Откройте параметры проекта и на вкладке "Общие " в разделе "Связанные платформы и библиотеки " добавьте новые элементы, ссылающиеся на целевые библиотеки, добавленные на предыдущем шаге:
- libAppCenterReactNative.a
- libAppCenterReactNativeAnalytics.a
- libAppCenterReactNativeCrashes.a
Измените пути поиска заголовков, чтобы находить заголовки из проектов плагинов AppCenter React Native. Откройте параметры проекта и на вкладке "Параметры сборки" в разделе "Пути поиска заголовков " добавьте новые расположения для файлов заголовков:

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

Измените файл AppDelegate.m или AppDelegate.mm приложения, чтобы включить код для запуска пакета SDK:

Добавьте следующие импорты:

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

Добавление этих строк в application:didFinishLaunchingWithOptions: метод

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

Создайте файл с именем AppCenter-Config.plist со следующим содержимым и замените {APP_SECRET_VALUE} значение секрета приложения. Не забудьте добавить этот файл в проект XCode (щелкните правой кнопкой мыши приложение в XCode и нажмите кнопку "Добавить файлы в <имя> приложения...").
```
<?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>
```

Замечание

Следующие два шага предназначены только для приложений, использующих React Native 0.60 и более поздних версий.

Отключите автоматическое связывание для React Native 0.60 и более поздних версий:
- В папке node_modules в каждом пакете Центра приложений откройте react-native.config.js и установите параметр dependency.platforms.ios в null:
```
module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};
```
Измените пути поиска для заголовков, чтобы найти заголовки React Native в проектах плагинов React Native для App Center.
- Убедитесь, что навигатор проекта отображается ([+1]).
- Для каждого проекта плагинов AppCenter React Native, который вы добавили в группу Библиотек на шаге 8:
  - Выберите проект и на вкладке "Параметры сборки" в разделе "Пути поиска заголовков " добавьте новые расположения для файлов заголовков с параметром recursive : ${SRCROOT}/../../../ios/Pods/Headers

3.4 [Только Android] Вручную интегрируйте SDK для версий React Native ниже 0.60 без использования react-native link

Шаги интеграции без react-native link команды.

Откройте файл android/settings.gradle и вставьте следующие строки. Включите необходимые зависимости в проект. Каждый модуль SDK должен быть добавлен в качестве отдельной зависимости в этом разделе. Если вы хотите использовать Аналитику и сбои Центра приложений, добавьте следующие строки:
```
  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')
```

Замечание

Из-за прекращения поддержки jCenter все сборки были перенесены в репозиторий Maven Central. Следуйте этому руководству по миграции из jCenter в Maven Central.

Откройте файл build.gradle уровня приложения проекта и добавьте следующие строки в разделandroid/app/build.gradle:dependencies
```
dependencies {
    implementation project(':appcenter-crashes')
    implementation project(':appcenter-analytics')
    implementation project(':appcenter')
    ...
}
```

Измените файл MainApplication.java приложения, чтобы включить код для запуска пакета SDK:

Добавление этих строк в раздел импорта

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

Добавление пакетов AppCenter в List<ReactPackage> getPackages() метод

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

Откройте файл strings.xml (android/app/src/main/res/values) и добавьте следующие строки внутри тегов <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>

Создайте файл с именем appcenter-config.json в android/app/src/main/assets/ следующем содержимом и замените APP_SECRET_VALUE значение секрета приложения.
```
{
    "app_secret": "APP_SECRET_VALUE"
}
```

Предупреждение

Не рекомендуется внедрять секрет приложения в исходный код.

3.5 Если вы используете автоматическое резервное копирование, чтобы избежать получения неверных сведений об устройстве, выполните следующие действия.

Замечание

Приложения, предназначенные для Android 6.0 (уровень API 23) или более поздней версии, автоматически включают автоматическое резервное копирование.

Замечание

Если у вас уже есть пользовательский файл с правилом резервного копирования, перейдите на третий шаг.

a. Создайте файлappcenter_backup_rule.xml в папке android/app/src/main/res/xml .

б. Откройте файл проекта AndroidManifest.xml. Добавьте атрибут android:fullBackupContent к элементу <application>. Он должен указывать на файл ресурсов appcenter_backup_rule.xml .

android:fullBackupContent="@xml/appcenter_backup_rule"

с. Добавьте следующие правила резервного копирования в файл 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. Запустите пакет SDK

Теперь вы можете создать и запустить приложение из командной строки или Xcode/Android Studio.

4.1 Сборка и запуск приложения из командной строки

Вы можете создать и запустить приложение iOS с помощью следующей команды:

react-native run-ios

Подсказка

Его можно запустить на симуляторе iOS или устройстве iOS , указав имя устройства iOS в react-native run-ios --device "myDeviceName".

Вы можете создать и запустить приложение Android с помощью следующей команды:

react-native run-android

Подсказка

Его можно запустить на эмуляторе Android или устройстве Android, указав идентификатор устройства (react-native run-android --deviceId "myDeviceId"deviceIdиз adb devices команды).

4.2 Сборка и запуск приложения из Xcode или Android Studio

Для iOS откройте файл вашего проекта ios/{appname}.xcworkspace или ios/{appname}.xcodeproj в Xcode и выполните сборку оттуда.

Замечание

Если вы автоматически связали Центр приложений через react-native link (как в шаге 3.1), откройте файл проекта ios/{appname}.xcworkspace в Xcode. Поскольку зависимости CocoaPods из App Center работают только с xcworkspace, а не с xcodeproj, файл ios/{appname}.xcodeproj не будет содержать этих зависимостей.

Для Android импортируйте проект Android в Android Studio и создайте его.

Вы готовы визуализировать данные аналитики и сбоев на портале, которые SDK собирает автоматически. Дополнительная настройка не требуется. Ознакомьтесь с разделами Аналитика и Критические ошибки, чтобы получить руководства по API и пошаговые инструкции и узнать о возможностях Центра приложений.

Поделиться через

Начало работы с React Native

1. Предварительные требования

2. Создание приложения на портале Центра приложений для получения секрета приложения

3. Добавление модулей пакета SDK центра приложений

3.1 Интеграция пакета SDK автоматически для React Native 0.60

3.1.1 Интеграция React Native iOS

3.1.1.1 Настройка параметра AppSecret. Вариант 1: Конфигурирование AppCenter-Config.plist

3.1.1.2 Настройка AppSecret Вариант 2: Конфигурирование в коде

3.1.2 Интеграция React Native Android

3.1.2.1 Настройка параметра AppSecret Вариант 1: Настройка appcenter-config.json

3.1.2.2 Параметр AppSecret 2. Настройка в коде

3.2 Интегрируйте пакет SDK автоматически для React Native младше версии 0.60

3.3 [только для iOS] Интеграция пакета SDK вручную для React Native без ссылки react-native или CocoaPods

3.4 [Только Android] Вручную интегрируйте SDK для версий React Native ниже 0.60 без использования react-native link

3.5 Если вы используете автоматическое резервное копирование, чтобы избежать получения неверных сведений об устройстве, выполните следующие действия.

4. Запустите пакет SDK

4.1 Сборка и запуск приложения из командной строки

4.2 Сборка и запуск приложения из Xcode или Android Studio

Обратная связь

Дополнительные ресурсы

3.1.1.1 Настройка параметра AppSecret. Вариант 1: Конфигурирование `AppCenter-Config.plist`