Использование пакета SDK чата с React Native

В этой статье описывается, как настроить пакеты в пакете SDK JavaScript для чата Служб коммуникации Azure для поддержки чата в приложении React Native. Следующие действия предназначены для пакета SDK для чата JavaScript для Служб коммуникации Azure 1.1.1 и более поздних версий.

Настройка пакетов чата для работы с React Native

В настоящее время пакеты чата служб коммуникации доступны в виде пакетов узлов. Так как не все модули Node совместимы с React Native, модули требуют работы порта React Native.

После инициализации проекта React Native выполните следующие действия, чтобы обеспечить @azure/communication-chat работу с React Native. Выполните следующие действия, чтобы установить пакеты, содержащие порты React Native для модулей Node Core, необходимых в @azure/communication-chat.

1. Установите node-libs-react-native:

   npm install node-libs-react-native --save-dev
   

2. Установите stream-browserify:

   npm install stream-browserify --save-dev
   

3. Установите react-native-get-random-values:

   npm install react-native-get-random-values --save-dev
   

4. Установите react-native-url-polyfill:

   npm install react-native-url-polyfill --save-dev
   

5. Создайте или обновите файл metro.config.js в том же каталоге, что и файл app.js , чтобы настроить модули Node Core, совместимые с React Native. Если файл не существует, создайте новый файл со следующим содержимым:

   // metro.config.js
   
   const { getDefaultConfig } = require('expo/metro-config');
   
   const config = getDefaultConfig(__dirname);
   
   config.resolver.extraNodeModules = {
     ...require('node-libs-react-native'),
     stream: require.resolve('stream-browserify'),
     net: require.resolve('node-libs-react-native/mock/net'),
     tls: require.resolve('node-libs-react-native/mock/tls'),
   };
   
   module.exports = config;
   

6. Добавьте следующие import команды в верхней части файла точки входа:

   import 'node-libs-react-native/globals';
   import 'react-native-get-random-values';
   import 'react-native-url-polyfill/auto';
   

7. Установите пакеты служб коммуникации:

   npm install @azure/communication-common@1.1.0 --save
   
   npm install @azure/communication-signaling@1.0.0-beta.11 --save
   
   npm install @azure/communication-chat@1.1.1 --save
   

Дальнейшие действия

В этой статье описано, как настроить необходимые пакеты служб коммуникации для добавления чата в приложение в среде React Native.

Узнайте, как использовать пакет SDK чата для запуска чата.