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

Question

在寻找用户体验网站时，我发现了一些有趣的 ui 聊天气泡。即，
Chat Bubble UI ref

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

我应该计算消息行宽（绝对），但是这里的问题是每种语言都有不同的字符集，我应该如何知道每个字母的宽度并进行正确的计算。
在拦截气泡的边缘不应该有圆角，我解决这个问题的方法是将每一行划分为单独的组件，保持线宽以上和线宽以下比较并给出动态样式该组件如：

{ borderTopRightRadius : 5, borderBottomRightRadius:0 } 等等。该解决方案中的问题是我将有大量的组件用于每一行和这么多的参考。当我考虑性能问题时，我有点气馁。

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

Answer 1

这真是个有趣的问题。对 web 和 React（而不是 React Native）有了更多的经验，我将描述我在浏览器中解决它的方式。

渲染线，但使其不可见（opacity: 0 或 visibility: none）
获取它的大小并确定它是否比前一个兄弟更宽
在此基础上应用 CSS class。特定的 CSS classes 将具有边框半径和伪元素 (::before)，这将是很好的 "transition" 部分（肯定是 SVG）。
显示行。我什至会将它渲染在已经渲染的下方，并在这一步中将组动画化到顶部。

我认为您必须为每一行创建元素（我再次谈论网络）。边框半径不应造成性能问题。

告诉我你的想法，我有时间可以给你做一个小例子。

Answer 2

你可以试试：

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

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

Chat bubble (react or react-native) component styling

css

frontend

stylesheet

reactjs

react-native