Utiliser le SDK Chat avec React Native

Cet article explique comment configurer les packages du SDK JavaScript de chat des Azure Communication Services pour prendre en charge le chat dans votre application React Native. Les étapes suivantes fonctionnent pour azure Communication Services JavaScript Chat SDK 1.1.1 et versions ultérieures.

Configurer les packages de conversation pour qu’ils fonctionnent avec React Native

Actuellement, les packages de conversation Communication Services sont disponibles en tant que packages Node. Étant donné que tous les modules Node ne sont pas compatibles avec React Native, les modules nécessitent un port React Native pour fonctionner.

Après avoir initialisé votre projet React Native, effectuez les étapes suivantes pour utiliser @azure/communication-chat React Native. Effectuez les étapes suivantes pour installer les packages qui contiennent des ports React Native des modules Node Core requis dans @azure/communication-chat.

1. Installez node-libs-react-native :

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

2. Installez stream-browserify :

   npm install stream-browserify --save-dev
   

3. Installez react-native-get-random-values :

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

4. Installez react-native-url-polyfill :

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

5. Créez ou mettez à jour le fichier metro.config.js dans le même répertoire que votre fichier app.js pour configurer les modules Node Core compatibles avec React Native. Si le fichier n’existe pas, créez-en un avec le contenu suivant :

   // 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. Ajoutez les commandes suivantes import en haut de votre fichier de point d’entrée :

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

7. Installez des packages Communication Services :

   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
   

Étapes suivantes

Cet article a décrit comment configurer les packages Communication Services requis pour ajouter une conversation à votre application dans un environnement React Native.

Découvrez comment utiliser le Kit de développement logiciel (SDK) Chat pour démarrer une conversation.