Css 如何使用React Native实现类似的功能

如何制作这样的组件：

到目前为止，我一直在努力：

下面是我的代码的样子：

viewStyle: {
        backgroundColor: color.bgColor,
        alignSelf: 'center',
        width: 100,
        height: '100%',
        top: '30%',
        transform: [{ scaleX: 4 }],
        zIndex: 1,
        borderTopEndRadius: 20,
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20
    },

---

使用图像更容易。 但是你可以试着用它

您正在搜索的形状可能尚未生成，因此您可以先学习如何生成矩形和圆形，如下所示：

导入Svg{
圆圈
椭圆，
G
文本，
茨潘，
文本路径，
路径
多边形，
多段线，
行,，
直肠，
使用，
形象,，
符号，
藐视，
线性梯度，
径向梯度，
停止
克利帕斯，
图案
面具，
}来自“react native svg”；
/*如果您正在使用Expo，请使用此选项
从“react native Svg”导入*作为Svg；
const{Circle，Rect}=Svg；
*/
从“React”导入React；
从“react native”导入{View，StyleSheet}；
导出默认类SvgExample扩展React.Component{
render（）{
返回(
);
}
}

以下是输出：

您要搜索的内容可能会更长，并且需要许多精确的配置：

位置

颜色

边框

等等

---

但是如果你不想使用图像，可以使用react native svg制作。

你能分享一下你在零食中做了什么吗？我的回答对你有帮助吗？@WiliamBrochensquejunior不，我不能做出像上图那样的尖锐曲线