Verwenden des Chat-SDK mit React Native

In diesem Artikel wird beschrieben, wie Sie die Pakete im Azure Communication Services Chat JavaScript SDK einrichten, um Chats in Ihrer React Native-App zu unterstützen. Die folgenden Schritte funktionieren für Azure Communication Services JavaScript Chat SDK 1.1.1 und höher.

Einrichten der Chatpakete für die Arbeit mit React Native

Derzeit sind Kommunikationsdienste-Chatpakete als Node-Pakete verfügbar. Da nicht alle Node-Module mit React Native kompatibel sind, benötigen die Module einen React Native-Port, um zu funktionieren.

Nachdem Sie Ihr React Native-Projekt initialisiert haben, führen Sie die folgenden Schritte aus, um die Arbeit mit React Native durchzuführen @azure/communication-chat . Führen Sie die folgenden Schritte aus, um die Pakete zu installieren, die React Native-Ports der Node Core-Module enthalten, die in @azure/communication-chat erforderlich sind.

1. Installieren Sie node-libs-react-native:

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

2. Installieren Sie stream-browserify:

   npm install stream-browserify --save-dev
   

3. Installieren Sie react-native-get-random-values:

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

4. Installieren Sie react-native-url-polyfill:

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

5. Erstellen oder aktualisieren Sie die metro.config.js Datei im selben Verzeichnis wie Ihre app.js Datei, um React Native-kompatible Node Core-Module zu konfigurieren. Wenn die Datei nicht vorhanden ist, erstellen Sie eine neue datei mit dem folgenden Inhalt:

   // 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. Fügen Sie oben in der Einstiegspunktdatei die folgenden import Befehle hinzu:

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

7. Installieren von Kommunikationsdienstenpaketen:

   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
   

Nächste Schritte

In diesem Artikel wird beschrieben, wie Sie die erforderlichen Kommunikationsdienstepakete einrichten, um Ihrer App in einer React Native-Umgebung Chat hinzuzufügen.

Erfahren Sie, wie Sie das Chat-SDK verwenden, um einen Chat zu starten.