Android APP 集成

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

Demo 及源码下载

Demo 下载

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

Demo 源码下载

搭建开发环境

基础环境安装

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 集成