Udostępnij przez

Korzystanie z zestawu Chat SDK z platformą React Native

W tym artykule opisano sposób konfigurowania pakietów w zestawie SDK JavaScript czatu usług Azure Communication Services w celu obsługi czatu w aplikacji React Native. Poniższe kroki działają w przypadku zestawu JavaScript Chat SDK 1.1.1 i nowszych usług Azure Communication Services.

Konfigurowanie pakietów czatów do pracy z platformą React Native

Obecnie pakiety czatów usług Communication Services są dostępne jako pakiety node. Ponieważ nie wszystkie moduły Node są zgodne z platformą React Native, moduły wymagają portu React Native do działania.

Po zainicjowaniu projektu React Native wykonaj następujące kroki, aby @azure/communication-chat działał z React Native. Wykonaj poniższe kroki, aby zainstalować pakiety zawierające porty React Native modułów Node Core wymaganych w programie @azure/communication-chat.

  1. Zainstaluj program node-libs-react-native:

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

  2. Zainstaluj program stream-browserify:

    npm install stream-browserify --save-dev

  3. Zainstaluj program react-native-get-random-values:

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

  4. Zainstaluj program react-native-url-polyfill:

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

  5. Utwórz lub zaktualizuj plik metro.config.js w tym samym katalogu co plik app.js , aby skonfigurować moduły Node Core zgodne z oprogramowaniem React Native. Jeśli plik nie istnieje, utwórz nowy z następującą zawartością:

    // metro.config.js

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.extraNodeModules = {
  ...require('node-libs-react-native'),
  stream: require.resolve('stream-browserify'),
  net: require.resolve('node-libs-react-native/mock/net'),
  tls: require.resolve('node-libs-react-native/mock/tls'),
};

module.exports = config;

  6. Dodaj następujące import polecenia w górnej części pliku punktu wejścia:

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

  7. Zainstaluj pakiety usług 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

Następne kroki

W tym artykule opisano sposób konfigurowania wymaganych pakietów usług komunikacyjnych w celu dodania czatu do aplikacji w środowisku react native.

Dowiedz się, jak uruchomić czat za pomocą zestawu SDK czatu.

  • Last updated on