反应原生-显示视图与它们之间的弯曲边界

Question

有什么主意如何创建两个充满屏幕的视图，并且两个视图之间有弯曲的边框？
在下面的示例中，顶部的一个（红色）应该具有凹形边框，另一个（蓝色的）应该具有凸形边框？

使用答案中建议的代码（60而不是60％，这是行不通的），结果如下：

不幸的是，不是我想要的东西...

Answer 1

测试此代码并签出。

<View>
    <View style={{width: "100%", height: 100, backgroundColor: 'skyblue'}} />
    <View style={{position:"absolute",top:50,width: "100%", height: 100, backgroundColor: 'steelblue',borderRadius:"60%"}} />
    <View style={{width: "100%", height: 100, backgroundColor: 'steelblue',}} />
</View>

上面的代码与您要实现的代码有点相似。但是，最好的选择是在背景中使用图像。

Answer 2

在另一个Stack问题中，按照Vishal的回答：Using SVG

结果：