聊天氣泡（反應或反應原生）組件樣式

Question

當我在尋找 ux 網站時，我發現了一些有趣的聊天氣泡 ui。 即，
聊天氣泡 UI 參考

經過幾天的頭腦風暴，我無法弄清楚如何開發它。 但是我找到了一些解決這個問題的方法，我希望得到您的建議：

1. 我應該計算消息行寬（絕對），但是這里的問題是每種語言都有不同的字符集，我應該如何知道每個字母的寬度並進行正確的計算。

2. 在氣泡攔截的邊緣不應該有圓角，我解決這個問題的方法是將每條線划分為單獨的組件，保持高於線寬和低於線寬的比較，並為該組件提供動態樣式，例如：

   { borderTopRightRadius : 5, borderBottomRightRadius:0 } 等等。這個解決方案的問題是我將有大量的組件用於每一行和這么多的參考。 當我考慮性能問題時，我有點氣餒。

我邀請您進行一些頭腦風暴（而不是編碼）並找到解決我的問題的有效方法。 非常感謝，誰花時間閱讀。

Answer 1

這真是一個有趣的問題。 對 web 和 react（而不是 react native）有更多的經驗，我將描述我在瀏覽器中解決它的方式。

1. 渲染線，但保持不可見（ opacity: 0或visibility: none ）
2. 獲取它的大小並確定它是否比前一個兄弟節點寬
3. 基於此應用 CSS 類。 特定的 CSS 類將具有邊框半徑和偽元素（ ::before ），這將是很好的“過渡”部分（當然是 SVG）。
4. 顯示線。 我什至會將它渲染在已經渲染的下面，並在這一步中將組設置為頂部。

我認為你必須為每一行創建元素（我再次談論網絡）。 邊界半徑不應造成性能問題。

讓我知道你的想法，我有空的時候可能會為你做一個小例子。

Answer 2

你可以試試：

bubbleChat: {
    borderRadius: 15,
    borderTopLeftRadius: 0, 
    display: 'flex',
    paddingLeft: 15,
    minWidth: 50
},
bubbleWrapper: {
    flexDirection: 'row'
}