如何構建你的聊天界面

若是你想使用 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 的使用狀況：

下圖是 aurora-imui 的使用狀況：

兩個庫的內存使用都在 100MB 之內，且沒有出現卡頓渲染慢的狀況，表現都不錯。

圖片消息測試: 分別發送 100、200、300、400、500 條圖片消息，監測內存使用狀況。

下圖是 gifted-chat 的使用狀況：

下圖是 aurora-imui 的使用狀況：

能夠看到隨着圖片的增長 gifted-chat 消耗的內存在不斷的增長，而 aurora-imui 在發送500 張圖片後，內存依然可以保持在 33MB 左右。

能耗

gifted-chat 大概發送到 300 張圖片的時候，可以明顯感受到手機在發燙，渲染速度跟不上。

不足

固然 aurora-imui 也有它的問題，自定義 UI 能力有所欠缺，因爲這個庫是使用原生代碼構建的 UI 模塊，因此不能隨意在 JS 端調整內部樣式，須要經過 aurora-imui 提供 Props 來自定義樣式。

##小結

兩個庫應該如何抉擇

下面這種狀況建議選擇 aurora-imui-react-native ：

• 對性能要求較高（低能耗）
• 須要處理大量聊天消息（羣聊）
• 對媒體消息要求較高（圖片、表情、視頻）

下面這種狀況建議選擇 react-native-gifted-chat：

• 對自定義要求比較高，aurora-imui-react-native 提供的配置項沒法知足界面需求的時候
• 不須要處理大量消息
• 業務只須要處理文本消息

---

做者：Aceyclee
原文：How to build your chat UI