双曲线边界半径 - React Native

问题描述

TL;DR，是一种在 React Native 中使用公式以数学方式生成 borderRadius 的方法：

y=ax+q

设计

我最近在 Dribbble 上遇到了 this 设计，希望改进我的应用程序的设计。

在 CSS 中，border-radius 属性允许为元素添加圆角。同样，React Native 具有 borderRadius 属性，以及各个角（即 borderRadiusTopLeft & borderRadiusTopRight、borderRadiusBottomLeft & borderRadiusBottomright）。

borderRadius 半径设置为 15 的元素产生以下结果：

问题

但是，我想添加一个几乎双曲线的缓和边界半径，例如：

经过进一步调查和检查（使用 Adob​​e Illustrator），我能够确定角的边界半径不是完美的半径，如下所示：

我已经尝试了下面的“电视形状”来制作我想要的东西，但是，它覆盖了几个元素。

const TvScreen = () => {
  return (
    <View style={styles.tvscreen}>
      <View style={styles.tvscreenMain} />
      <View style={styles.tvscreenTop} />
      <View style={styles.tvscreenBottom} />
      <View style={styles.tvscreenLeft} />
      <View style={styles.tvscreenRight} />
    </View>
  );
};

StyleSheet.create({
  tvscreen: {},tvscreenMain: {
    width: 150,height: 75,backgroundColor: "red",borderTopLefTradius: 15,borderTopRighTradius: 15,borderBottomrighTradius: 15,borderBottomLefTradius: 15,},tvscreenTop: {
    width: 73,height: 70,position: "absolute",top: -26,left: 39,borderRadius: 35,transform: [{ scaleX: 2 },{ scaleY: 0.5 }],tvscreenBottom: {
    width: 73,bottom: -26,tvscreenLeft: {
    width: 20,height: 38,left: -7,top: 18,transform: [{ scaleX: 0.5 },{ scaleY: 2 }],tvscreenRight: {
    width: 20,right: -7,});

产生[糟糕]：

这很接近，但使用多个元素来生成 1 个元素（对于卡片或按钮等元素不太理想）。

我的问题是，有没有办法使用以下公式在数学上产生边界半径：

y=ax+q

或者使用 Microsoft's React Native SVG 库来实现上述目的？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）