Snabbstart: Använda chatt-SDK med React Native

  • Artikel

I den här snabbstarten konfigurerar du paketen i javascript-SDK:t Azure Communication Services Chat för att stödja chatt i din React Native-app. Stegen som beskrivs i snabbstarten stöds för Azure Communication Services JavaScript Chat SDK 1.1.1 och senare.

Konfigurera chattpaketen så att de fungerar med React Native

Kommunikationstjänsternas chattpaket är för närvarande tillgängliga som Node-paket. Eftersom inte alla Node-moduler är kompatibla med React Native kräver modulerna en React Native port för att fungera.

När du har initierat ditt React Native projekt utför du följande steg för att arbeta @azure/communication-chat med React Native. Stegen installerar de paket som innehåller React Native portar i Node Core-modulerna som krävs i @azure/communication-chat.

  1. Installera node-libs-react-native:

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

  2. Installera stream-browserify:

    npm install stream-browserify --save-dev

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

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

  4. Installera react-native-url-polyfill:

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

  5. Uppdatera metro.config.js för att använda React Native-kompatibla Node Core-moduler:

    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. Lägg till följande import kommandon överst i startpunktsfilen:

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

  7. Installera Communication Services-paket:

    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ästa steg

I den här snabbstarten har du lärt dig hur du konfigurerar de kommunikationstjänstpaket som krävs för att lägga till chatt i din app i en React Native miljö.

Lär dig hur du använder Chat SDK för att starta en chatt.