react-native之View 上的弧形底部
davidwang456
阅读:44
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>
);
}
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。