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

Важно!

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

Узнайте больше о сроках поддержки и альтернативных вариантах.

• Android
• iOS
• Расширения iOS
• React Native
• MAUI/Xamarin
• UWP
• WPF/WinForms
• Unity
• macOS
• Расширения macOS
• tvOS
• Cordova

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы предпочитаете yarnnpm, используйте следующую команду для установки Центра приложений:

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 Option 1: Configuring AppCenter-Config.plist

1. Создайте файл с именем 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>
   

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

   • Добавьте приведенные ниже определения import:

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

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

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

3.1.1.2 Настройка ПриложенияПараметр 2. Настройка в коде

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

• Добавьте приведенные ниже определения import:

#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 Option 1: Configuring appcenter-config.json

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

{
    "app_secret": "{APP_SECRET_VALUE}"
}

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

3.1.2.2 Настройка ПриложенияПараметр 2. Настройка в коде

Добавьте следующую строку в класс main действия onCreate-callback, чтобы использовать аналитику Центра приложений и сбои центра приложений:

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 устранения неполадок, или связать его самостоятельно.

1. Свяжите подключаемые модули с приложением React Native с помощью команды react-native link.

   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, добавьте следующий раздел 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, сбои всегда обрабатываются после перезапуска приложения. Сбои не могут быть обработаны во время сбоя приложения.

2. Измените значения проекта android/app/src/main/assets/appcenter-config.json и замените YOUR_APP_SECRET значение заполнителя секретом приложения вашего проекта Центра приложений.

3. Измените файл проекта ios/{YourAppName}/AppCenter-Config.plist и замените YOUR_APP_SECRET значение заполнителя секретом приложения вашего проекта Центра приложений. Если AppCenter-Config.plist уже существует, но не является частью проекта Xcode, его необходимо добавить в проект Xcode вручную (щелкните правой кнопкой мыши приложение в XCode и выберите пункт Добавить файлы в <имя> приложения...).

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

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

Примечание

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

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

1. Скачайте пакет SDK Центра приложений для платформ React Native, предоставленных в виде ZIP-файла, и распакуйте его.

2. Вы увидите папку с именем AppCenterReactNativeShared, которая содержит одну платформу для требуемого моста React Native iOS.

3. Скачайте соответствующий пакет SDK центра приложений для платформ iOS , предоставленный в виде ZIP-файла, и распакуйте его.

4. Вы увидите папку AppCenter-SDK-Apple/iOS , содержащую разные платформы для каждой службы Центра приложений. Вызываемая платформа AppCenter является обязательной в проекте, так как она содержит код, совместно используемый различными модулями.

5. [Необязательно] Создайте подкаталог для сторонних библиотек.

   • Рекомендуется, чтобы сторонние библиотеки обычно находились в подкаталоге (его часто называют Vendor), поэтому если у вас нет подкаталога для библиотек, создайте подкаталог Vendor (в каталоге ios проекта).
   • Создайте группу с именем Vendor в проекте Xcode, чтобы имитировать структуру файлов на диске.

6. Откройте Finder и скопируйте ранее распакованные папки AppCenter-SDK-Apple/iOS и AppCenterReactNativeShared в папку проекта в нужном расположении.

7. Добавьте платформы SDK в проект в Xcode:

   • Убедитесь, что отображается навигатор проекта (⌘+1).
   • Перетащите файлы AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework и AppCenterReactNativeShared.framework из Finder (в расположении из предыдущего шага) в навигатор проекта Xcode. Файлы AppCenter.framework и AppCenterReactNativeShared.framework необходимы для запуска пакета SDK. Убедитесь, что они добавлены в проект, в противном случае другие модули не будут работать и ваше приложение не будет компилироваться.
   • Появится диалоговое окно, убедитесь, что целевой объект приложения установлен, а затем нажмите кнопку Готово.

8. Свяжите проекты подключаемых модулей AppCenter React Native с проектом приложения:

   • Убедитесь, что отображается навигатор проекта (⌘+1).

   • Для каждого подключаемого модуля AppCenter React Native перейдите в папку, содержащую исходный код. Пути соответственно

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

   • Перетащите .xcodeproj файлы из Finder в навигатор проектов Xcode. Обычно в группе Библиотеки .

9. Связывание библиотек для подключаемых модулей AppCenter React Native. Откройте параметры проекта и на вкладке Общие в разделе Связанные платформы и библиотеки добавьте новые элементы, ссылающиеся на целевые библиотеки, добавленные на предыдущем шаге:

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

10. Измените пути поиска заголовков, чтобы найти заголовки из проектов React Native подключаемых модулей AppCenter. Откройте параметры проекта и на вкладке Параметры сборки в разделе Пути поиска заголовков добавьте новые расположения для файлов заголовков:

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

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

    • Добавьте приведенные ниже определения import:

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

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

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

12. Создайте файл с именем 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 и более поздних версий.

13. Отключите автоматическую связь для React Native 0.60 и более поздних версий:

    • В папке node_modules в каждом пакете Центра приложений откройтеreact-native.config.js и задайте для значение dependency.platforms.iosnull:

    module.exports = {
      dependency: {
        platforms: {
          ios: null,
          ...
        }
      }
    };
    

14. Измените пути поиска заголовков для поиска React Native заголовков в проектах подключаемых модулей Центра приложений React Native:

    • Убедитесь, что отображается навигатор проекта (⌘+1).
    • Для каждого проекта appCenter React Native подключаемых модулей, добавленных в группу Библиотеки на шаге 8:
      • Выберите проект и на вкладке Параметры сборки в разделе Пути поиска заголовков добавьте новые расположения для файлов заголовков с параметром recursive : ${SRCROOT}/../../../ios/Pods/Headers

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

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

1. Откройте файл 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.

2. Откройте файл build.gradle проекта на уровне приложения (android/app/build.gradle) и добавьте в раздел следующие строки dependencies :

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

3. Измените файл 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)
     );
   }
   

4. Откройте 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>
   

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

   {
       "app_secret": "APP_SECRET_VALUE"
   }
   

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

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

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

Примечание

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

Примечание

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

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

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

android:fullBackupContent="@xml/appcenter_backup_rule"

c. Добавьте следующие правила резервного копирования в файл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 from 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 работают только с xcworkspace , а не xcodeprojс , а ios/{appname}.xcodeproj с файлом не будут связаны зависимости Центра приложений CocoaPods.

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

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