在视图上反应原生半椭圆形答案

【问题标题】：React Native Half oval on View在视图上反应原生半椭圆形
【发布时间】：2019-12-05 03:42:39
【问题描述】：

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

示例结果

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

&lt;div class="halfOval"&gt;&lt;/div&gt;

【问题讨论】：

标签： javascript css reactjs react-native

【解决方案1】：

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

<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}
    ]
}

截图如下

【讨论】：

scaleX 值应根据设备宽度而变化，但在这里您可以概括使用宽度的缩放值。要了解不同屏幕尺寸的缩放，请参阅链接 medium.com/soluto-engineering/size-matters-5aeeb462900a 中的方法 3：缩放实用程序。所以你可以做 scale(50) 并调整 scaleX 值以适合你的设备，因此你会得到一个独特的椭圆设计视图，如果你遇到任何困难，请告诉我，谢谢 :)

【解决方案2】：

尝试使用这种风格可能会满足您的要求。

https://snack.expo.io/HkfD57Ipr

style={{
         width: 100,
         height: 50,
         backgroundColor: '#a0C580',
         borderBottomEndRadius: 100,
         borderBottomStartRadius: 100,
         transform: [{ scaleX: 3 }],
      }}

【讨论】：