学问Chat UI(4)
前言
写这个组件是在几个月前，那时候是因为老大讲RN项目APP的通讯聊天部分后面有可能自己实现，让我那时候尝试着搞下Android通讯聊天UI实现的部分，在这期间，找了不少的Android原生项目：蘑菇街的TeamTalk，ChatDemo，EmojiChat，考虑到扩展性与改造复杂度，选择了学习融云 IM 界面组件。其实一直想写这个项目介绍，学习需要思考与总结，如果学了以后没有总结或者思考，慢慢地时间会磨平他们。
AuroraChat
AuroraChat 是个基于融云UI库的即时通讯（IM）RN UI组件。
本 UI 组件提供了消息列表、输入视图等常用组件，支持常见的消息类型：文字、图片、语音等。
支持 Android，暂不支持iOS 平台。
功能
可以基于本 UI 库实现的功能：
- 消息列表的展示；
- 支持多种消息类型；
- 对每种消息类型的点击处理；
- 支持用户头像。
- 消息输入：
- 支持多种消息类型；
- 语音输入组件；
- 相册照片选取组件；
当前支持展示与输入的消息类型：
- 文字
- 图片
- 语音
使用
当前提供的组件：
Android
- EditExtension (关于输入组件的布局)
- AutoRefreshListView (关于消息如何适配ListView)
React Native
ChatView for React Native
配置
- 用法
import {DeviceEventEmitter} from "react-native";
import ChatView from "../rychatview";数据格式
加载消息列表UI,需要传递一定格式的消息对象
message对象格式:
message = { // text message
"type": "text",
"own": false,//是否为当前用户
"content": "发送文本内容",
"ts": "发送时间",
"uid": "当前用户id",
"msgid": "消息uid",
"senduserinfo": "发送者信息"
}
message = { // image message
"type": "image",
"own": false,//是否为当前用户
"content": "图片URL",
"ts": "发送时间",
"uid": "当前用户id",
"msgid": "消息uid",
"senduserinfo": "发送者信息"
}
message = { // voice message
"type": "voice",
"own": false,//是否为当前用户
"duration": "50",//时长 单位：秒
"content": "语音URL",
"ts": "发送时间",
"uid": "当前用户id",
"msgid": "消息uid",
"senduserinfo": "发送者信息"
}
message = { // chatInfo message
"userid": "用户id",
"name": "昵称",
"portraitUri": "头像URL",
"chattype": "聊天类型",//群组 私聊
"targetid": "目标id"
}ChatView介绍
Props 属性
chatInfo
PropTypes.object:登录聊天服务器后设置初始化
curChatInfo: {
"userid": "1001",
"name": "golike",
"portraitUri":"http://img0.imgtn.bdimg.com/it/u=651843754,4204488972&fm=213&gp=0.jpg",
"chattype": "priv",
"targetid": "1002"
}isOnRefresh
PropTypes.bool:下拉刷新的标识符
OnRefresh
PropTypes.function: () => {//重新网络请求 }
DeviceEventEmitter监听 uploadMsg事件
监听来自原生的不同消息
componentDidMount() {
//设置来自原生的消息的监听
this.subscription = DeviceEventEmitter.addListener('uploadMsg', this.onUpdateMessage);
}
componentWillUnmount() {
//移除监听器
this.subscription.remove();
}组件内的方法
getHistoryMessage
PropTypes.function:加载历史消息
historyMsgs = [ 前面消息类型中的消息,*,...]
(historyMsgs) => {//连接消息服务器成功后获取的历史消息列表,发送给原生};sendTextMsg
PropTypes.function:
(msg) => {//从js构造文本数据发送给原生};sendRichTextMsg
PropTypes.function:未实现
(msg) => {//从js构造富文本数据发送给原生};sendPicMsg
PropTypes.function:
(msg) => {//从js构造图片数据发送给原生};sendVoiceMsg
PropTypes.function:
(msg) => {//从js构造语音数据发送给原生};举报
腾讯云开发者
