Freigeben über


Schnellstart: Verwenden Sie das Chat-SDK mit React Native

In dieser Schnellstartanleitung richten Sie die Pakete im JavaScript-Chat-SDK von Azure Communication Services ein, um den Chat in Ihrer React Native-App zu unterstützen. Die in der Schnellstartanleitung beschriebenen Schritte werden für das JavaScript-Chat-SDK 1.1.1 und höher von Azure Communication Services unterstützt.

Einrichten der Chatpakete für die Verwendung mit React Native

Derzeit sind Communication Services-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, damit @azure/communication-chat mit React Native funktioniert. Mit den Schritten werden die Pakete installiert, die React Native-Ports der Node-Kernmodule 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. Aktualisieren Sie metro.config.js, um React Native-kompatible Node-Kernmodule zu verwenden:

    module.exports = {
        // ...
        resolver: {
            extraNodeModules: {
                ...require('stream-browserify'),
                ...require('node-libs-react-native'),
                net: require.resolve('node-libs-react-native/mock/net'),
                tls: require.resolve('node-libs-react-native/mock/tls')
        }
    };
    }
    
  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 Communication Services-Paketen:

    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 dieser Schnellstartanleitung haben Sie erfahren, wie Sie die erforderlichen Communication Services-Pakete einrichten, um Ihrer App in einer React Native-Umgebung einen Chat hinzuzufügen.

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