聊天气泡（react 或 react-native）组件样式

Question

当我在寻找用户体验网站时，我发现了一些有趣的聊天气泡用户界面。也就是，
Chat Bubble UI ref

经过几天的头脑风暴，我不知道如何开发它。但我找到了一些解决该问题的方法，希望得到您的建议：

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

2. 在气泡拦截的边缘不应该有圆角，我解决这个问题的方法是将每条线划分为单独的组件，保持高于线宽和低于线宽的比较，并为该组件提供动态样式，例如：

   { 边界TopRightRadius : 5, 边框底部右半径：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'
}