如何在React Native中实现border-radius特殊值得到蛋形元素样式

React Native 原生样式系统暂不支持Web CSS中borderRadius的斜杠分隔水平/垂直半径语法，要实现border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;的蛋形效果，可以参考以下两种常用方案：

方案1：拆分圆角属性实现（适合简单场景，无需额外依赖） #

通过分别设置四个角的圆角数值，结合固定宽高即可近似实现蛋形效果，示例代码如下：

import { View, StyleSheet } from 'react-native';

const Egg = () => {
  return <View style={styles.egg} />
}

const styles = StyleSheet.create({
  egg: {
    // 按照你需要的比例设置宽高，蛋形高度通常是宽度的1.2~1.4倍
    width: 200,
    height: 260,
    backgroundColor: '#fff',
    // 水平半径统一为宽度的50%即100，垂直半径上半部分按60%、下半部分按40%换算数值
    borderTopLeftRadius: 100,
    borderTopRightRadius: 100,
    borderBottomLeftRadius: 80,
    borderBottomRightRadius: 80,
  }
})

你可以根据自己需要的蛋形比例微调四个圆角的数值，直到匹配预期效果。

方案2：SVG绘制（精度最高，全版本兼容） #

如果对形状精度要求高，不需要适配不同RN版本的样式差异，直接用SVG绘制蛋形是最稳妥的方案，示例代码如下：

import Svg, { Path } from 'react-native-svg';

const Egg = () => {
  return (
    <Svg width="200" height="260" viewBox="0 0 200 260">
      {/* 调整Path的曲率参数可以1:1还原你需要的CSS蛋形效果 */}
      <Path 
        d="M100 0 C155 0 200 78 200 130 C200 210 150 260 100 260 C50 260 0 210 0 130 C0 78 45 0 100 0Z" 
        fill="#fff" 
      />
    </Svg>
  )
}

内容的提问来源于stack exchange，提问作者Vrba