====== iOS APP 集成 ======

目前，环信的 React Native iOS Demo 已经提供登录、注册、好友、群组、聊天等功能。您可以在您的 React Native 项目中集成 iOS Demo，以便直接获得即时通讯功能。

===== Demo 及源码下载 =====

=== Demo 下载 ===

在[[http://www.easemob.com/download/im|环信官网扫码下载]]，然后按照指示安装。

注意：安装后需要添加企业信任才能正常运行（设置 -> 通用 -> 设备管理 -> EaseMob Inc -> 点击信任）。

=== Demo 源码下载 ===

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

===== 搭建开发环境 =====

=== 基础环境安装 ===

安装 iOS 和 android 的开发环境。React Native 官方文档：https://facebook.github.io/react-native/docs/getting-started.html

=== 模拟器安装 ===

打开 Xcode，安装 iOS 模拟器。

xcode -> Preferences-> Components -> iOS x.x Simulator

===== 初始化 =====

**注意：以下步骤，集成 iOS 和 Android 时，只执行一次即可。**

1. 解压缩 Demo 源码，进入项目所在文件夹，执行如下命令，进行项目初始化。

<code>$ npm run newclear</code>

初始化完成后，项目下会自动生成node_modules文件夹。

2. 修改 node_modules/axios/lib/utils.js 文件。

<code>
function isStandardBrowserEnv() {
  return false;
}
</code>

3. 去工程Libraries中找到：RCTNetwork.xcodeproj / RCTNetworking.mm / RCTGenerateFormBoundary，去掉特殊字符 ''/ .'' 等；或者去 node_modules/react-native/Libraries/Network/RCTNetworking.mm 修改。

因为上传文件时服务端rest服务会限制content-type不能出现特殊字符。

<code>
//修改后： 
const char *boundaryChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
</code>

===== 注意事项 =====

1. **默认没有添加签名的情况下请编译debug版本，直接编译release版本会无法正常运行。**
  * 使用Xcode打开项目，选择 app，在 info 页签，选择 Use Debug for command-line builds。
  * 在Xcode项目中，选择 Product -> Scheme -> Edit Scheme (cmd + <)，打开 Run 页签，将 Build Configuration 设置为 Debug。

2. **目前代码版本0.2.0，请看项目目录下package.json -> version属性，如果不是，请更新代码，并保留node_modules文件夹。**

3. **0.2.0版本部分依赖的模块升级请先运行`npm install`安装升级包，安装完成后，清理缓存。**
  * ''npm run clean''
  * 打开xcode项目，选择product -> clean
  * 如果之前有编译时自动打开的终端，请关闭终端

4. 关于node_modules文件夹。

初始化时，在根目录下执行''npm run newclear''后，会生成node_modules文件夹，是项目运行所需要的基础依赖包。
 
由于node_modules比较大，400mb左右, 安装时耗时比较久，所以已经install过node_modules的项目，可以备份node_modules。当安装新的项目的时候，拷贝node_modules到新项目，并运行''npm install'', 如果此步无法正常运行项目再执行上面的“初始化”流程。

===== 调试与发布 =====

==== 模拟器测试 ====

执行如下命令，在模拟器中运行 iOS Demo。

<code>react-native run-ios --simulator "iPhone 7"</code>

模拟器运行时的操作：

  * cmd + d 调出控制台
  * cmd + r reload

**注意：**如果执行命令时报“CFBundleIdentifier” Does Not Exist这个错误，请参考下一步先配置Xcode。

==== 真机测试 ====

1. 配置 Xcode。

  * Targets -> app -> General -> Signing ->添加一个个人icloud账户
  * 添加team，并定义一个唯一的Bundle Identifier 如：org.reactjs.native.example.app.lwz
    * Targets -> app -> General -> Signing -> Team
    * Targets -> app -> General -> Signing -> Signing Certificate
    * Targets -> app -> General -> Identity -> Bundle Identifier -> 修改唯一id标示
    * Targets -> appTests -> General -> Signing -> Team
    * Targets -> appTests -> General -> Signing -> Signing Certificate
    * 选择 Product -> Scheme -> Edit Scheme (cmd + <)，打开 Run 页签，将 Build Configuration 设置为 Release。
 
2. Xcode 保证app/main.jsbundle可用，没有自行添加索引。

  * main.jsbundle 生成方式
    * curl的方式打包 https://github.com/facebook/react-native/issues/5747
    * react-native bundle --dev false --platform ios --entry-file ./index.ios.js --bundle-output ./ios/app/main.jsbundle
      * 此种方式打包不支持npm link， 需要先npm unlink easemob-websdk

3. 关掉npm start启动的控制台。

  * 因为打包时会判断是否有packager在运行，有的话直接使用。
  * 但是打包用的是release版本， 非dev，打包后会报babel的错，如上。

4. 在xcode通过正常run编译到手机。

在 Xcode 中，选择设备，然后点击 Run。

  * 没有packager启动时，会自动启动一个packager，这时打包的即为发布版本。
  * 注意：跟本地之前引入的main.jsbundle没有关系，打包文件并不会更新到本地。

5. 信任证书：

选择“ios设备 -> General -> Device Management -> persion Certificate -> trust it”。

成功运行后，如果是debug模式可以晃动手机调出控制台。

==== 常用命令 ====

<code>
$ npm start
$ react-native run-ios --simulator "iPhone 7"
$ react-native run-ios
$ react-native bundle --dev false --platform ios --entry-file ./index.ios.js --bundle-output ./ios/app/main.jsbundle
</code>

===== 常见问题 =====

**注意事项：**

  * 切换debug 或 release 版本都需要关闭控制台。
  * 执行''react-native run-ios --simulator "iPhone 7"''命令时，需保证没有真机连接到电脑。如果有真机连接到电脑，那么多个设备均可以编译成功，但是无法正常启动。

**Q: 如果编译不生效，怎么办？**

A: 可以尝试先clean（在 Xcode 中，选择“Product -> Clean”），关掉package控制台，再run。

----
<WRAP group>
<WRAP half column>
上一页：[[im:react-native|React Native Demo 介绍]]
</WRAP>

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