iOS APP 集成
目前,环信的 React Native iOS Demo 已经提供登录、注册、好友、群组、聊天等功能。您可以在您的 React Native 项目中集成 iOS Demo,以便直接获得即时通讯功能。
Demo 及源码下载
Demo 下载
在环信官网扫码下载,然后按照指示安装。
注意:安装后需要添加企业信任才能正常运行(设置 → 通用 → 设备管理 → 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 源码,进入项目所在文件夹,执行如下命令,进行项目初始化。
$ 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。
下一页:Android APP 集成