將聊天 SDK 與 React Native 搭配使用

本文說明如何在 Azure 通訊服務聊天 JavaScript SDK 中設定套件，以支援 React Native 應用程式中的聊天。 下列步驟適用於 Azure 通訊服務 JavaScript 聊天 SDK 1.1.1 和更新版本。

設定聊天套件以與 React Native 搭配使用

目前，通訊服務聊天套件可作為節點套件使用。 由於並非所有 Node 模組都與 React Native 相容，因此這些模組需要 React Native 連接埠才能運作。

起始設定 React Native 專案之後，請完成下列步驟以使用 @azure/communication-chat React Native。 請完成下列步驟，以安裝包含 中所需 @azure/communication-chat節點核心模組的 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. 在與 app.js 檔案相同的目錄中建立或更新 metro.config.js 檔案，以設定與 React Native 相容的節點核心模組。 如果檔案不存在，請建立包含下列內容的新檔案：

   // 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. 在進入點檔案頂端新增下列 import 命令：

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

7. 安裝通訊服務套件：

   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 環境中將聊天新增至您的應用程式。

瞭解如何使用 Chat SDK 開始聊天。