====== React Native SDK集成 ======

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

===== 第1步：下载Demo源码 =====

GitHub 下载地址：https://github.com/easemob/webim-react-native

===== 第2步：添加SDK相关文件 =====

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

  * App/Sdk 目录
  * App/Lib 目录下，WebIM.js 和 WebIMConfig.js 文件

===== 第3步：安装xmldom依赖 =====

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

<code>npm install --save xmldom</code>

===== 第4步：初始化 =====

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

<code>
// 此处的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')
</code>

<code>
// 建立连接
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
})
</code>

===== 第5步：集成具体功能 =====

请参考[[im:400webimintegration:10webimintro|Web IM 集成文档]]集成登录、注册、好友、群组、聊天等具体功能。

----
<WRAP group>
<WRAP half column>
上一页：[[im:react-native:android-app|Android APP 集成]]
</WRAP>

<WRAP half column>
下一页：[[im:react-native:release-note|React Native Demo 更新日志]]
</WRAP>
</WRAP>