简介
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 冲突的详细解决方案 http://t.cn/RKqQPI6 :
- <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 https://developer.android.com/tools/building/multidex.html
- 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
复制代码
来源: https://juejin.im/entry/5b42b9a45188251ace75a826