React native - 显示视图之间带有弯曲边框的视图

Posted 2021-04-29

任何想法我怎么能创建两个填充屏幕的视图，它们之间有一个弯曲的边框？ 在下面的例子中，顶部的一个（红色）应该有一个凹面边框，另一个（蓝色）应该是凸面边框？

使用答案中建议的代码（60而不是60％，这不起作用），给出以下内容：

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

答案

测试此代码并检查。

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

上面的代码与您想要实现的内容略有相似之处。然而，最好的选择是在后台使用图像。