你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

快速入门：将聊天 SDK 与 React Native 一起使用

在此快速入门中，你在 Azure 通信服务 Chat JavaScript SDK 中设置软件包，以支持 React Native 应用中的聊天。 Azure 通信服务 JavaScript Chat 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. 更新 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 环境中将聊天添加到你的应用程序中。

了解如何使用 Chat SDK 开始聊天。