Android APP 集成
目前,环信的 React Native Android Demo 已经提供登录、注册、好友、群组、聊天等功能。您可以在您的 React Native 项目中集成 Android Demo,以便直接获得即时通讯功能。
Demo 及源码下载
Demo 下载
在环信官网扫码下载,然后按照指示安装。
Demo 源码下载
GitHub 下载地址:https://github.com/easemob/webim-react-native
搭建开发环境
基础环境安装
1. 安装 ios 和 android 开发环境。React-Native官方文档:https://facebook.github.io/react-native/docs/getting-started.html
2. 安装 Android SDK。可以通过brew install android-sdk
命令安装,或者通过Android Studio的SDK Manager安装。
3. 将以下代码添加到 ~/.bashrc 配置文件里。
// zshrc 依照个人环境不同配置
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_112.jdk/Contents/Home/
// 配置完成记得
source .bashrc
模拟器安装
参考:https://developer.android.com/studio/run/managing-avds.html
- react-native 支持 api 最低到 16
- 建议通过$ android 管理API和镜像的安装
- 根据自己平台测试需求安装对应的API和Image
- 安装成功之后才能去AVD Mannger创建镜像
- 必装 Android xx (API xx)
- SDK Platform
- Google APIS Intel x86 Atom System Image
- 建议通过Android studio 管理镜像的创建和运行 (也可用 $ android avd )
- 打开任意项目 → Tools → Android → AVD Mannger / SDK Manager
初始化
注意:以下步骤,集成 iOS 和 Android 时,只执行一次即可。
1. 解压缩 Demo 源码,进入项目所在文件夹,执行如下命令,进行项目初始化。
$ npm run newclear
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版本会无法正常运行。
2. 关于node_modules文件夹。
初始化时,在根目录下执行npm run newclear
后,会生成node_modules文件夹,是项目运行所需要的基础依赖包。
由于node_modules比较大,400mb左右, 安装时耗时比较久,所以已经install过node_modules的项目,可以备份node_modules。当安装新的项目的时候,拷贝node_modules到新项目,并运行npm install
, 如果此步无法正常运行项目再执行上面的“初始化”流程。
调试与发布
模拟器测试
- 运行任意Image
- emulator -avd <avd name>
- 根目录 $ npm start 启动server
- 根目录 $ react-native run-android,会将app安装到Image当中(如果连接真机也会安装到真机)
- 可能会有一些权限之类的错误,可以用sudo
- 一旦app正常安装且运行,以后不需要每次都编译,因为内容是通过main.jsbundle加载的
- 运行后
- ctr + m or cmd + m 调出控制
- 如果按键无效:模拟器 → settings → send keyboards shortcuts to → Emulator controls(default)
- 模拟正式环境测试:$ react-native run-android –variant=release
第4步:正式(签名)版
https://facebook.github.io/react-native/docs/signed-apk-android.html
按照上述步骤添加签名
- build.gradle 位于android/app目录
- 编译 $ cd android && ./gradlew assembleRelease
第5步:安装到设备
有3种方式:
- $ react-native run-android –variant=release
- $ npm run android:install
- 先删除手机上已经安装的包
- $ npm run android:build
- 到 android/app/build/outpus/apk 执行 adb install xx.apk,保证只有一个device正在运行
- 下载 Android File Transfer, 连接设备后会自动弹出上传界面(设备需要解锁、允许USB调试、非充电模式)
log
$ npm run android:logcat
程序异常终止也可以通过此命令查看,需要设备和本地在同网络下。
常用命令
$ npm start
$ android
$ android avd
$ emulator -avd n4-768
$ react-native run-android
$ react-native run-android --variant=release
$ npm run android:install
$ npm run android:build
$ npm run android:logcat
$ ./gradlew assembleRelease
$ ./gradlew installRelease
$ cd android/app/build/outpus/apk && adb install app-release.apk
注:很多快捷命令见根目录 package.json scripts 内容。
常见问题
Q: 模拟器报错:Object.freeze can only be called on Object
A: 使用Cmd+m
调出控制台,选择Debug JS Remotely
。
Q: 直接在Android Studio运行项目时报错:Could not get BatchedBridge, make sure your bundle is packaged correctly
A: 关闭 Android Studio 里的项目,在terminal进入项目根目录,执行命令 react-native start
,然后在 Android Studio 运行该项目。
Q: 模拟器第一次可以正常启动,以后均启动失败
A: 删除镜像文件,重新创建,并运行。
Q: 真机总是安装失败
A: 尝试删除已经安装的app。参考:https://github.com/facebook/react-native/issues/2720
上一页:iOS APP 集成