用半圆形制作卡片反应原生

【问题标题】：Make card with semi circle react native用半圆形制作卡片反应原生
【发布时间】：2021-01-29 19:18:29
【问题描述】：

我是 react native 开发的新手，我想制作一张像这样的半圆形卡片：

我尝试了一些东西：

 borderRadius:'45%',
 bottom:10,
 right:10,

得到这个结果，但这不是我需要的

【问题讨论】：

标签： css react-native styles

【解决方案1】：

你可以做到这一点

      <View style={{
        width: '90%',
        height: 160,
        backgroundColor: 'white',
        elevation: 4,
        borderRadius: 40,
        overflow: 'hidden',
        alignSelf: 'center'
      }}>
        <View style={{
          width: 100,
          height: 100,
          justifyContent: 'center',
          alignItems: 'center',
          borderBottomRightRadius: 80,
          borderTopRightRadius: 80,
          backgroundColor: '#f29a50',
          elevation: 4,
        }}>
          {/* Your Icon */}
        </View>
      </View>


  [1]: https://i.stack.imgur.com/4tcEh.png

【讨论】：

【解决方案2】：

将overflow: "hidden" 放在父视图上解决了覆盖问题。

【讨论】：