Schnellstart: Verwenden Sie das Chat-SDK mit React Native

  • Artikel

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.