Chat-SDK gebruiken met React Native

In dit artikel wordt beschreven hoe u de pakketten instelt in de JavaScript SDK voor Azure Communication Services Chat om chat in uw React Native-app te ondersteunen. De volgende stappen werken voor Azure Communication Services JavaScript Chat SDK 1.1.1 en hoger.

De chatpakketten instellen voor gebruik met React Native

Momenteel zijn Chatpakketten van Communication Services beschikbaar als Node-pakketten. Omdat niet alle Node-modules compatibel zijn met React Native, moeten de modules een React Native-poort gebruiken.

Nadat u uw React Native-project hebt geïnitialiseerd, voert u de volgende stappen uit om @azure/communication-chat te werken met React Native. Voer de volgende stappen uit om de pakketten te installeren die React Native-poorten bevatten van de Node Core-modules die vereist zijn in @azure/communication-chat.

1. node-libs-react-native installeren:

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

2. stream-browserify installeren:

   npm install stream-browserify --save-dev
   

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

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

4. react-native-url-polyfill installeren:

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

5. Maak of werk het metro.config.js-bestand in dezelfde map als uw app.js-bestand bij om React Native-compatibele Node Core-modules te configureren. Als het bestand niet bestaat, maakt u een nieuw bestand met de volgende inhoud:

   // 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. Voeg de volgende import opdrachten toe boven aan het invoerpuntbestand:

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

7. Communication Services-pakketten installeren:

   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
   

Volgende stappen

In dit artikel wordt beschreven hoe u de vereiste Communication Services-pakketten instelt om chat toe te voegen aan uw app in een React Native-omgeving.

Meer informatie over het gebruik van de Chat-SDK om een chat te starten.