前言
写这个组件是在几个月前，那时候是因为老大讲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
ChatView for React Native
配置
用法
import {DeviceEventEmitter} from "react-native";
import ChatView from "../rychatview";
ChatView
Props 属性
chatInfo
style
isOnRefresh
OnRefresh
DeviceEventEmitter监听 uploadMsg事件
组件内的方法
getHistoryMessage
sendTextMsg
sendRichTextMsg
sendPicMsg
sendVoiceMsg
数据格式
加载消息列表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":"upload/201712121437223706.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构造语音数据发送给原生};
原创http://www.cnblogs.com/lmf-techniques/p/8006072.html
