react-native - View 上的弧形底部

Question

如何在 native View 中将弯曲的底部添加到 View ？ See curved example

我试图添加这样的第二个 View :

headerBottom:{
宽度:宽度/2，
高:宽度/2，
backgroundColor:“红色”，
位置:“绝对”，
底部:-35，
左:宽度/4-15
borderRadius:宽度/4，
转换: [
{scaleX:2}，
{scaleY:0.25}
]
}，

我已经能够超越上面，但是在同一个 View 中有一个较差的解决方案，而不是在第二个 View 中的示例中。

Answer 1

这是结果。我在这里使用了Dimensions(const window = Dimensions.get('window');)，以使其在不同的屏幕尺寸下更加动态。

const styles = StyleSheet.create({
containerStyle: {
    alignSelf: 'center',
    width: window.width,
    overflow: 'hidden',
    height: window.width / 1.7
},
sliderContainerStyle: {
    borderRadius: window.width,
    width: window.width * 2,
    height: window.width * 2,
    marginLeft: -(window.width / 2),
    position: 'absolute',
    bottom: 0,
    overflow: 'hidden'
},
slider: {
    height: window.width / 1.7,
    width: window.width,
    position: 'absolute',
    bottom: 0,
    marginLeft: window.width / 2,
    backgroundColor: '#9DD6EB'
}});


render() {
  return(
    <View style={styles.containerStyle} >
      <View style={styles.sliderContainerStyle} >
        <Slider/>
      </View>
    </View>
  );
}