iOS APP 集成

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

Demo 及源码下载

Demo 下载

环信官网扫码下载,然后按照指示安装。

注意:安装后需要添加企业信任才能正常运行(设置 → 通用 → 设备管理 → EaseMob Inc → 点击信任)。

Demo 源码下载

搭建开发环境

基础环境安装

安装 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 源码,进入项目所在文件夹,执行如下命令,进行项目初始化。

$ npm run newclear

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

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

function isStandardBrowserEnv() {
  return false;
}

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

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

//修改后: 
const char *boundaryChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

注意事项

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。

react-native run-ios --simulator "iPhone 7"

模拟器运行时的操作:

  • 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 生成方式
    • 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模式可以晃动手机调出控制台。

常用命令

$ 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

常见问题

注意事项:

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

Q: 如果编译不生效,怎么办?

A: 可以尝试先clean(在 Xcode 中,选择“Product → Clean”),关掉package控制台,再run。