====== Android APP 集成 ======

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

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

=== Demo 下载 ===

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

=== 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 配置文件里。

<code javascript>
    // 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
</code>
=== 模拟器安装 ===

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

<code>$ npm run newclear</code>

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版本会无法正常运行。**

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 ====

<code>$ npm run android:logcat</code>

程序异常终止也可以通过此命令查看，需要设备和本地在同网络下。

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

<code>
$ 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
</code>

注：很多快捷命令见根目录 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


----
<WRAP group>
<WRAP half column>
上一页：[[im:react-native:ios-app|iOS APP 集成]]
</WRAP>

<WRAP half column>
下一页：[[im:react-native:sdk-integration|React Native SDK集成]]
</WRAP>
</WRAP>