Delen via

Quickstart: De Chat SDK gebruiken met React Native

  • Artikel

In deze quickstart stelt u de pakketten in de Azure Communication Services Chat JavaScript SDK in om chat in uw React Native-app te ondersteunen. De stappen die in de quickstart worden beschreven, worden ondersteund voor Azure Communication Services JavaScript Chat SDK 1.1.1 en hoger.

De chatpakketten instellen voor gebruik met React Native

Momenteel zijn communicatieservices-chatpakketten beschikbaar als Node-pakketten. Omdat niet alle Node-modules compatibel zijn met React Native, hebben de modules een React Native-poort nodig om te werken.

Nadat u het React Native-project hebt geïnitialiseerd, voert u de volgende stappen uit om met React Native te @azure/communication-chat werken. Met de stappen worden de pakketten geïnstalleerd 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. Werkmetro.config.js bij om React Native compatibele Node Core-modules te gebruiken:

    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. Voeg de volgende import opdrachten toe aan het begin van 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 deze quickstart hebt u geleerd 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.