react-native之View 上的弧形底部

davidwang456 阅读:7 2024-02-27 23:08:18 评论:0

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

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

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

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

请您参考如下方法:

这是结果。我在这里使用了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> 
  ); 
} 


标签:React
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号