javascript - 在 View 上 react native 半椭圆

我是本机新手，我想在底部创建一个半椭圆形的视图。我可以使用CSS来解决此问题，但是我不能在react-native中使用它，因为它只接受单个数字。

结果示例

.halfOval {
    background-color: #a0C580;
    width: 400px;
    height: 20px;
    border-radius:  0 0 50% 50% / 0 0 100% 100%;
}

<div class="halfOval"></div>

最佳答案

我可以说的一种解决方案是创建一个半圆并根据您的设备分辨率对其进行缩放。示例代码如下

<View style={styles.ovalBgH}>
    <View style={styles.ovalBg}>
    </View>
</View>

样式表代码

ovalBgH:{
    overflow: 'hidden',
    width : 50,
    height:25,
    position : 'absolute',
    borderBottomEndRadius:25,
    borderBottomLeftRadius:25,
    left:-25,
    top:10,
    backgroundColor:'transparent',
    transform: [
    {scaleX: 7}
    ]
},
ovalBg:{
    backgroundColor: '#a0c580',
    width : 50, height:50,
    transform: [
    {scaleX: 7}
    ]
}

屏幕截图如下

关于javascript - 在 View 上 react native 半椭圆，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59187909/