将聊天 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 所需 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. 在与app.js文件相同的目录中创建或更新metro.config.js文件，以配置兼容 React Native 的 Node Core 模块。 如果该文件不存在，请创建包含以下内容的新文件：

   // 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 环境中向应用添加聊天。

了解如何 使用聊天 SDK 启动聊天。