聊天组件 aurora-imui-react-native

聊天组件 aurora-imui-react-native

React Native组件

安装

npm instaill aurora-imui-react-native

react-native link

如果 link 安卓失败,需要手动修改一下 settings.gradle 中的引用路径:

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

然后在 app 的 build.gradle中引用:

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

注意:Android中需要将build.gradle中的buildToolVersion和compileSdkVersion改为25以上

配置;

Android:

引入Package:

MainApplication.java

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

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

Android release (打包 Release apk)

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

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

ios

找到 PROJECT -> TARGETS -> General -> Embedded Binaries 然后添加 RCTAuroraIMUI.framework。

找到 PROJECT -> TARGETS -> Build Phases -> Target Dependencies 添加 RCTWebSocket。

API

用法:

image.png

MessageListVIew

image.png

InputView

image.png

AuroraIMUIController:插入,更新,增加消息到 MessageList

appendMessages:添加消息到 MessageList 底部,顺序为数组顺序。参数:[{message}]

updateMessage:更新消息,可以使用该方法更新消息状态。参数:[{message}]

nsertMessagesToTop:将消息列表插入到聊天列表顶部。被插入的消息列表必须按照时间顺序排序。参数:[{message}]

message : status 必须为以下四个值之一: "sendsucceed", "sendfailed", "sendgoing", "downloadfailed",如果没有定义这个属性, 默认值是 "sendsucceed".

removeMessage:根据消息 id 删除消息

removeAllMessage:清空所有消息

hidenFeatureView:隐藏 inputView 的展开视图。

stopPlayVoice:停止正在播放的音频,这里会停止所有的声音,包括 ChatInput 和 MessageList 正在播放的声音。

MessageList

onAvatarClick:点击头像触发。

onMsgClick:点击消息气泡触发。

例子:

image.png

onStatusViewClick:点击消息状态按钮触发。

(在消息发送失败时使用)

image.png

onPullToRefresh:滚动 MessageList 到顶部时,下拉触发

image.png

onTouchMsgList:点击消息列表触发。

onBeginDragMessageList (iOS only) :开始滑动消息列表的时候触发,用于调整布局。

自定义样式:

sendBubbleTextColor(string):设置发送消息的文本颜色

receiveBubbleTextColor(string):设置接收消息的文本颜色

sendBubbleTextSize(number):设置发送消息的文本大小

receiveBubbleTextSize(number):设置接收消息的文本大小

sendBubblePadding(object) :发送消息泡泡的内边距

receiveBubblePadding(object):接收消息泡泡的内边距

dateTextSize(number):消息时间文字的尺寸大小

dateTextColor(string):消息时间文字的颜色

datePadding(object):设置时间的内边距

dateBackgroundColor(string):设置时间的背景颜色。

dateCornerRadius(number):设置时间的背景圆角大小。

avatarSize(object):头像宽高:{width:number,height:number}

avatarCornerRadius(number):设置头像圆角半径。

isShowDisplayName(bool):是否显示昵称(包括接收方和发送方)

(isShowIncomingDisplayName(bool):设置是否显示接收方昵称。

isShowOutgoingDisplayName(bool):设置是否显示发送方昵称。

displayNameTextSize(number):设置昵称文字大小。

displayNameTextColor(string):设置昵称的文字颜色。

displayNamePadding(object):设置昵称内边距。

messageListBackgroundColor(string):设置消息列表背景颜色。

maxBubbleWidth(number):设置气泡的最大宽度。值为屏幕宽度的百分比。

例: maxBubbleWidth={0.7} 表示设置气泡的最大宽度为屏幕宽度的 70%

messageTextLineHeight(number):设置文字消息的行间距。

isAllowPullToRefresh(bool):是否开启下拉刷新功能

ChatInput

customLayoutItems(iOS Only):自定义 ChatInput 组件和布局。

chatInputBackgroupColor(string):设置输入组件背景颜色。

showSelectAlbumBtn(Android Only)(bool):设置选择相册按钮的可见性。

inputPadding(object):设置输入框内边距。

inputTextColor(string):设置输入框文字颜色。

inputTextSize(number):设置输入框文字大小。

inputTextLineHeight(number):设置输入框行间距。

onSendText:输入文字后点击发送按钮触发

image.png

onSendGalleryFiles:选中视频或图片后点击发送按钮触发

image.png

onTakePicture:点击拍照按钮触发

image.png

onStartRecordVideo:点击录制视频按钮触发

onFinishRecordVideo:完成录制视频触发

image.png

onCancelRecordVideo:取消录制视频触发。

onStartRecordVoice:点击录音按钮触发。

onFinishRecordVoice:录音完成后松开手指触发

image.png

onCancelRecordVoice:手指移动到取消录音区域后,抬起手指触发。

onSwitchToMicrophoneMode:点击菜单栏麦克风按钮触发。

onSwitchToGalleryMode:点击菜单栏图片按钮触发。

onSwitchToCameraMode:点击菜单栏拍照按钮触发。

onSwitchToEmojiMode:点击菜单栏表情按钮触发。

onSizeChange:输入组件尺寸变更时触发 (建议使用这个方法来处理 inputView 的尺寸变化)。

onFullScreen:当摄像机全屏的时候触发这个回调(例如:可以在摄像机全屏的时候隐藏系统状态栏)

image.png

onRecoverScreen:摄像机取消全屏的时候触发这个回调

onClickSelectAlbum(Android only):点击选择相册按钮触发

onTouchEditText:点击输入框触发。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容