React native 通用即时通讯UI之Aurora-imui

转载http://techblog.sishuxuefu.com/atricle.html?5b42b8adfe88c20035f12765

简介

Aurora IMUI 是个通用的即时通讯（IM）UI 库，不特定于任何 IM SDK。

本 UI 库提供了消息列表、输入视图等常用组件，支持常见的消息类型：文字、图片、语音、视频等。默认包含多套界面风格，也能根据自己的需要自定义。

同步支持 Android、iOS 和 React Native。

功能

可以基于本 UI 库实现的功能：

消息列表的展示
- 支持多种消息类型；
- 对每种消息类型的点击、长按处理；
- 支持用户头像。
消息输入：
- 支持多种消息类型；
- 语音输入组件；
- 相册照片选取组件；
- 视频拍摄。

当前支持展示与输入的消息类型：

文字
图片
语音
视频
自定义

安装 aurora-imui-react-native

aurora-imui-react-native 是 aurora-ui 的 react-native 版本。

$ yarn add aurora-imui-react-native

自动link

$ react-native link aurora-imui-react-native

手动link【可选】

如果自动link 安卓失败，你就只能选择手动link

1.修改一下 android/settings.gradle 中的引用路径：

include ':app', ':aurora-imui-react-native'
project(':aurora-imui-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/aurora-imui-react-native/ReactNative/android')

在 android/app/build.gradle 中引用

dependencies {
  compile project(':aurora-imui-react-native')
}

在 android/app/src/main/java/com/.../MainApplication.java 引入 Package

import cn.jiguang.imui.messagelist.ReactIMUIPackage;
...

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new ReactIMUIPackage()
  );
}

Android 配置

Android release(打包 Relaese apk)

需要添加混淆代码到 android/app/proguard-rules.pro 文件中：

-keep class cn.jiguang.imui.** { *; }

修复 Manifest Merge 冲突

E:\react-native\myReactNativeApp\android\app\src\main\AndroidManifest.xml:19:7-34 Error:
  Attribute application@allowBackup value=(false) from AndroidManifest.xml:19:7-34
  is also present at [cn.jiguang.imui:messagelist:0.7.3] AndroidManifest.xml:12:9-35 value=(true).
  Suggestion: add 'tools:replace="android:allowBackup"' to <application> element at AndroidManifest.xml:15:5-35:19 to override.

See http://g.co/androidstudio/manifest-merger for more information about the manifest merger.

打包的时候，会报以上的错误，大概意思是 android\app\src\main\AndroidManifest.xml 这个文件的 android:allowBackup 配置冲突了，解决办法是通过 tools:replace 来解决，参考了有关项目依赖包发生 Manifest Merge 冲突的详细解决方案：

扫描二维码关注公众号，回复： 2129859 查看本文章

<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools" // here
  package="com.myreactnativeapp">
...
<application
  tools:replace="android:allowBackup"
>
...

修复配置方法数超过 64K

D8: Cannot fit requested classes in a single dex file. Try supplying a main-dex list.
The number of method references in a .dex file cannot exceed 64K.
  Learn how to resolve this issue at https://developer.android.com/tools/building/multidex.html

如果您的 minSdkVersion 设置为 21 或更高值，您只需在模块级 build.gradle 文件中将 multiDexEnabled 设置为 true，如此处所示：

android {
  defaultConfig {
    ...
    minSdkVersion 21
    targetSdkVersion 26
    multiDexEnabled true // here
  }
  ...
}

iOS 配置

找到 PROJECT -> TARGETS -> General -> Embedded Binaries 然后添加 RCTAuroraIMUI.framework。
找到 PROJECT -> TARGETS -> Build Phases -> Target Dependencies 添加 RCTWebSocket。

安装 react-native-fs

这里是简单的配置，详细的配置参考：https://github.com/itinance/react-native-fs

$ yarn add react-native-fs
$ react-native link react-native-fs