聊天气泡（反应或反应原生）组件样式

Question

当我在寻找ux网站时，我发现了一些有趣的ui用于聊天气泡。这是，
Chat Bubble UI ref

经过几天的头脑风暴，我无法弄清楚如何发展它。但是我找到了一些解决这个问题的方法，我想要你的建议：

1. 我应该计算消息行宽度（绝对），但是这里的问题是每种语言都有不同的字符集，我应该如何知道每个字母宽度并进行正确的计算。

2. 在气泡拦截的边缘不应该是圆角，我对这个问题的处理是将每条线分成单独的组件，保持在线宽和线宽之上。低于线宽比较并为该组件提供动态样式，如：

   {     borderTopRightRadius：5，     borderBottomRightRadius：0 } 该解决方案的问题是我将为每一行提供大量组件和许多参考。当我考虑性能问题时，我对此感到气馁。

我邀请你做一些头脑风暴（不编码）并找到解决问题的有效方法。非常感谢，花时间阅读。

Answer 1

这是一个非常有趣的问题。我有更多的网络经验和反应（而不是本地反应），我将描述我在浏览器中解决它的方式。

1. 渲染线，但保持不可见（opacity: 0或visibility: none）
2. 获取它的大小并确定它是否比之前的兄弟更宽
3. 基于它应用CSS类。特定的CSS类将具有边界半径和伪元素（::before），这将是很好的转换＆＃34;部分（SVG肯定）。
4. 显示该行。我甚至会将它渲染到已经渲染过的那些下面，并在此步骤中将组动画为顶部。

我认为你必须为每一行创建元素（我再次谈论网络）。边界半径不应该产生性能问题。

让我知道你的想法，当我赶上时间时，我可以为你做一个小例子。

Answer 2

您可以尝试：

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