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

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），这将是很好的“过渡”部分（肯定是SVG）。
4. 显示该行。我甚至会将它渲染到已经渲染过的那些之下，并在此步骤中将组动画为顶部。

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

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