学问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

ChatView for React Native

配置

用法

代码语言：javascript复制

import {DeviceEventEmitter} from "react-native";
import ChatView from "../rychatview";

ChatView
Props 属性
- chatInfo
- style
- isOnRefresh
- OnRefresh
DeviceEventEmitter监听 uploadMsg事件
组件内的方法
- getHistoryMessage
- sendTextMsg
- sendRichTextMsg
- sendPicMsg
- sendVoiceMsg

数据格式

加载消息列表UI,需要传递一定格式的消息对象

message 对象格式:

代码语言：javascript复制

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:登录聊天服务器后设置初始化

代码语言：javascript复制

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事件

监听来自原生的不同消息

代码语言：javascript复制

  componentDidMount() {
        //设置来自原生的消息的监听
        this.subscription = DeviceEventEmitter.addListener('uploadMsg', this.onUpdateMessage);
    }

  componentWillUnmount() {
        //移除监听器
        this.subscription.remove();
    }

组件内的方法

getHistoryMessage

PropTypes.function:加载历史消息

代码语言：javascript复制

  historyMsgs = [ 前面消息类型中的消息,*,...]
 (historyMsgs) => {//连接消息服务器成功后获取的历史消息列表,发送给原生};

sendTextMsg

PropTypes.function:

代码语言：javascript复制

 (msg) => {//从js构造文本数据发送给原生};

sendRichTextMsg

PropTypes.function:未实现

代码语言：javascript复制

 (msg) => {//从js构造富文本数据发送给原生};

sendPicMsg

PropTypes.function:

代码语言：javascript复制

 (msg) => {//从js构造图片数据发送给原生};

sendVoiceMsg

PropTypes.function:

代码语言：javascript复制

 (msg) => {//从js构造语音数据发送给原生};

android react listview

0 人点赞