クイックスタート: 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 を使用してチャットを開始する方法について説明します。