如何构建你的聊天界面

如果你想使用 React-Native 开发一款聊天应用,你很可能会了解或者使用 react-native-gifted-chat 这个库,这是一个很优秀的库,使用灵活基本能够满足大部分开发者的 IM 项目需求。

我的项目就使用这个库,很不错,基本能够满足了我所有的 IM 需求。不过最近我也发现了一些问题,迫使我寻找替代方案。

事情的起因是:我的应用早期只有单聊功能,一个会话显示的消息内容一般不会超过 100 条消息,所以用 gifted chat 一直还不错。但最近应用更新,添加了群聊功能后,我的用户开始抱怨 手机发烫厉害,直觉告诉我这是「消息列表中的消息数量太多」导致的(ReactNative 在处理长列表问题一直有这个问题)。
于是我进行了测试,在应用中发送 300~400 条图文消息,此时能够感觉到应用有明显的图片卡顿和自定义消息无法及时渲染,并且手机开始发烫。我试图优化处理这个问题,优化了很久但效果也不尽如人意。

我在网上搜索了很久的解决方案,无意中在 Facebook 群组 中看到有人推荐
aurora-imui-react-native 这个库。这个库也是一个聊天 UI 库。

我尝试使用这个库,测试该库在显示几百条消息时依然能够流畅的运行,并且手机也没有出现发烫的问题。以下我对两个库进行具体的比较。

性能测试

我在 iOS 平台下对两个 Demo 项目进行测试,分别测试了内存和能耗。

内存

文本消息测试:
分别发送 100、200、300、400 条文本消息,监测内存的使用情况。

下图是 gifted-chat 的使用情况:

react-native-gifted-chat

下图是 aurora-imui 的使用情况:

两个库的内存使用都在 100MB 以内,且没有出现卡顿渲染慢的情况,表现都不错。

图片消息测试:
分别发送 100、200、300、400、500 条图片消息,监测内存使用情况。

下图是 gifted-chat 的使用情况:

react-native-gifted-chat

下图是 aurora-imui 的使用情况:

aurora-imui-react-native

可以看到随着图片的增加 gifted-chat 消耗的内存在不断的增加,而
aurora-imui 在发送500 张图片后,内存依然能够保持在 33MB 左右。

能耗

gifted-chat 大概发送到 300 张图片的时候,能够明显感觉到手机在发烫,渲染速度跟不上。


react-native-gifted-chat
aurora-imui-react-native

不足

当然 aurora-imui 也有它的问题,自定义 UI 能力有所欠缺,由于这个库是使用原生代码构建的 UI 模块,所以不能随意在 JS 端调整内部样式,需要通过 aurora-imui 提供 Props 来自定义样式。

小结

两个库应该如何抉择

下面这种情况建议选择 aurora-imui-react-native

  • 对性能要求较高(低能耗)
  • 需要处理大量聊天消息(群聊)
  • 对媒体消息要求较高(图片、表情、视频)

下面这种情况建议选择 react-native-gifted-chat

  • 对自定义要求比较高,aurora-imui-react-native 提供的配置项无法满足界面需求的时候。
  • 不需要处理大量消息。
  • 业务只需要处理文本消息。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,475评论 4 372
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,744评论 2 307
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 112,101评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,732评论 0 221
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,141评论 3 297
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,049评论 1 226
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,188评论 2 320
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,965评论 0 213
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,716评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,867评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,341评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,663评论 3 263
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,376评论 3 244
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,200评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,990评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,179评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,979评论 2 279

推荐阅读更多精彩内容