我的组件上有一个标题，左边是“后退”图标，右边是“搜索”图标。在标题的中心，我想放置视图框，使其部分位于标题的边界之外。请查看我上传的图像。
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 放在页眉顶部，部分 View 位于页眉边界之外？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47937041/