React Native SDK集成

React Native Demo 在 Web IM SDK 的基础上做了重新改造。目前 React Native 的 SDK 并没有独立出来,集成时可以参考以下方式。

第1步:下载Demo源码

第2步:添加SDK相关文件

在Demo源码中,拷贝以下目录/文件到您的项目文件夹。

  • App/Sdk 目录
  • App/Lib 目录下,WebIM.js 和 WebIMConfig.js 文件

第3步:安装xmldom依赖

执行以下命令,安装xmldom依赖。

npm install --save xmldom

第4步:初始化

参照以下示例,配置 App/Lib/WebIM.js 文件。

// 此处的strophe也是改造过的,需要拷贝
import '../Sdk/dist/strophe-1.2.8.js'
// 改造过的sdk目录
import websdk from '../Sdk'
// react-native有window对象但是,不是标准的浏览器对象所以,此处需要模拟一个window和document对象,借助于xmldom模块
import xmldom from 'xmldom'
// 改造过的基础配置信息:去掉一些浏览器依赖
import config from './WebIMConfig'
// 为了http请求,此处可以随意使用自己的http组件
import Api from '../Services/Api'
let WebIM = window.WebIM = websdk
window.WebIM.config = config
// strophe 依赖此属性
window.DOMParser = xmldom.DOMParser
// 模拟document对象
let document = window.document = new DOMParser().parseFromString("<?xml version='1.0'?>\n", 'text/xml')
// 建立连接
WebIM.conn = new WebIM.connection({
  isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
  https: WebIM.config.https,
  url: WebIM.config.xmppURL,
  isAutoLogin: false,
  heartBeatWait: WebIM.config.heartBeatWait,
  autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
  autoReconnectInterval: WebIM.config.autoReconnectInterval
})

第5步:集成具体功能

请参考Web IM 集成文档集成登录、注册、好友、群组、聊天等具体功能。