如何在本机反应中制作一个挖角答案

【问题标题】：How to make a scooped corner in react native如何在本机反应中制作一个挖角
【发布时间】：2021-05-11 06:28:23
【问题描述】：

我正在开发 react 原生聊天功能，我需要帮助来为消息框制作挖角。像下面的图片

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
如果有任何想法，我永远不会在这里发布我的问题。顺便说一句，我搜索它并找到了 HTML css 示例，但反应原生样式不同，我无法将其转换为反应原生 css

标签： css react-native styles

【解决方案1】：

有很多方法可以为气泡创建 CSS。许多人似乎使用 CSS 边框来绘制三角形。并且较旧的示例至少倾向于使用固定单位。

这里是一个语音气泡的 CSS，它尝试响应，但不允许字体大小变得太小。

半径、填充等CSS变量可以独立设置。代码所做的是以标准方式设置带有引号的矩形，然后添加一个 after 伪元素以使用线性渐变作为背景图像来绘制三角形。如果需要，也可以更改这个“尖头”的尺寸，例如使其更长。

.speech-bubble {
    --background: navy;
    --paddingsides: max(1.5vw, 20px);
    --paddingtopbottom: max(1vw, 10px);
    --radius: max(0.5vw, 5px);
    color: lightBlue;
    background-color: var(--background);
    border-radius: var(--radius);
    font-size: max(1.5vw, 20px);
    font-family: Arial, Helvetica, sans-serif;
    padding: var(--paddingtopbottom) var(--paddingsides) var(--paddingtopbottom) var(--paddingsides);
    position: absolute;
}

.speech-bubble::after {
    --h: max(0.75vw, 10px);
    height: var(--h);
    width: var(--h);
    background: linear-gradient(to top right, transparent 0%, transparent 50%, var(--background) 50%, var(--background) 100%);
    top: 100%;
    right: max(var(--paddingsides), var(--radius));
    position: absolute;
    content: "";    
}

    <div class="speech-bubble">
      Lorem ipsum dolor sit amet.
    </div>

【讨论】：

谢谢，但我的问题是如何将其转换为反应原生 css，因为反应原生样式不同反应原生不支持：after 和许多其他 css 属性
哎呀，对不起，我没有仔细阅读这个问题。
至少你给出答案没关系，不像其他批评的那样。谢谢
我对 React 原生的限制知之甚少。我想我们必须使用两个 div 而不是一个？那当然不会那么好。是否有关于支持和不支持的明确描述，我找不到任何完全官方的内容。
stackoverflow.com/questions/39021886/… github.com/vhpoet/react-native-styling-cheat-sheet