快速入門：搭配使用聊天 SDK 與 React Native

在本快速入門中，您會在 Azure 通訊服務聊天 JavaScript SDK 中設定套件，以支援 React Native 應用程式中的聊天。 Azure 通訊服務 JavaScript 聊天 SDK 1.1.1 及更新版本支援快速入門中所述步驟。

設定聊天套件以使用 React Native

通訊服務聊天套件目前以 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. 更新 metro.config.js 以使用 React Native 相容的 Node Core 模組：

   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. 安裝通訊服務套件：

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

了解如何使用聊天 SDK 開始聊天。