如何構建你的聊天介面

Aurora_極光開發者發表於2017-12-05

如果你想使用 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 提供的配置項無法滿足介面需求的時候
  • 不需要處理大量訊息
  • 業務只需要處理文字訊息

作者:Aceyclee
原文:How to build your chat UI

相關文章