クイックスタート: React Native で Chat SDK を使用する

このクイックスタートでは、React Native アプリでチャットをサポートするように、Azure Communication Services の Chat JavaScript SDK でパッケージを設定します。 クイックスタートで説明する手順は、Azure Communication Services の JavaScript Chat SDK 1.1.1 以降でサポートされています。

React Native で動作するようにチャット パッケージを設定する

現在、Communication Services のチャット パッケージは Node パッケージとして使用できます。 すべての Node モジュールが React Native と互換性があるわけではないため、モジュールが機能させるには React Native ポートが必要です。

React Native プロジェクトを初期化後、次の手順を実行して @azure/communication-chat で React Native が動作するようにします。 この手順では、@azure/communication-chat で必要な Node Core モジュールの React Native ポートを含むパッケージをインストールします。

1. node-libs-react-native をインストールします。

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

2. stream-browserify をインストールします。

   npm install stream-browserify --save-dev
   

3. react-native-get-random-values をインストールします。

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

4. react-native-url-polyfill をインストールします。

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

5. React Native 互換の Node Core モジュールを使用するように metro.config.js を更新する:

   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. エントリ ポイント ファイルの先頭に、次の import コマンドを追加します:

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

7. 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
   

次の手順

このクイックスタートでは、React Native 環境でアプリにチャットを追加するために必要な Communication Services パッケージの設定方法について学習しました。

チャット SDK を使用してチャットを開始する方法について説明します。