我的组件有一个标题,左侧是后退图标,右侧是搜索图标。在标题的中心,我想放置 View 框,使其部分位于标题的边界之外。请看我上传的图片。
render() {
return (
<Conatiner>
<Header style={{backgroundColor: '#009688'}}>
<Left>
<Button transparent onPress={Actions.pop}>
<Icon name='arrow-back' style={{color: '#ffffff'}}/>
</Button>
</Left>
<Body>
<View style={{width: 20, height: 100, backgroundColor: 'red')}}/>
</Body>
<Right>
<Button transparent>
<Icon name='md-search' style={{color: '#ffffff'}}/>
</Button>
</Right>
</Header>
<View>// other code</View>
</Container>
);}
请给我建议解决方案。提前致谢
最佳答案
我认为你应该在你的头部组件中做这样的事情:
.container {
overflow: visible;
}
.center-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 150px; (or more)
}
关于css - 如何将 View 放在标题顶部,其中一部分位于标题后面的边界之外?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47937041/