Démarrage rapide : utilisation du Kit de développement logiciel (SDK) Conversation avec React Native

  • Article

Dans ce guide de démarrage rapide, vous configurez les packages dans le Kit de développement logiciel (SDK) JavaScript Conversation Azure Communication Services pour prendre en charge la conversation dans votre application React Native. Les étapes décrites dans le guide de démarrage rapide sont prises en charge pour le Kit de développement logiciel (SDK) Conversation JavaScript Azure Communication Services 1.1.1 et versions ultérieures.

Configurer les packages de conversation pour qu’ils fonctionnent avec React Native

Les packages de conversation Communication Services sont actuellement disponibles en tant que packages Node. Étant donné que tous les modules Node ne sont pas compatibles avec React Native, ils nécessitent un port React Native pour fonctionner.

Une fois que vous avez initialisé votre projet React Native, effectuez les étapes suivantes pour faire fonctionner @azure/communication-chat avec React Native. Les étapes d’installation des packages qui contiennent les ports React Native des modules Node Core requis dans @azure/communication-chat.

  1. Installez node-libs-react-native :

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

  2. Installez stream-browserify :

    npm install stream-browserify --save-dev

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

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

  4. Installez react-native-url-polyfill :

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

  5. Mettez à jour metro.config.js pour utiliser des modules Node Core compatibles React Native :

    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. Ajoutez les commandes import suivantes en haut de votre fichier de point d’entrée :

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

  7. Installez des packages Communication Services :

    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

Étapes suivantes

Dans ce guide de démarrage rapide, vous avez appris à configurer les packages Communication Services requis pour ajouter les conversations à votre application dans un environnement React Native.

Découvrez comment utiliser le Kit de développement logiciel (SDK) Conversation pour démarrer une conversation.