css - 如何将 View 放在标题顶部,其中一部分位于标题后面的边界之外?

标签 css react-native

我的组件有一个标题,左侧是后退图标,右侧是搜索图标。在标题的中心,我想放置 View 框,使其部分位于标题的边界之外。请看我上传的图片。 enter image description here

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/

相关文章:

html - Bootstrap 多个 float div 垂直居中

javascript - 无法使用从 GraphQL Codegen 类型导入的枚举值

ios - React Native ios 选择器始终打开

html - Wordpress "Widgets on Pages"和 "Mailchimp Form"- 样式问题

css - Z-Index 绝对定位 - 使用 Z-Index 在面板位于后面时始终显示在顶部

javascript - 运行一次查询后按钮禁用

javascript - react 添加滑动 Pane 有一些问题

javascript - Android的String.includes()和String.startsWith()的区别

html - 如何为 iPad 和 iPad Pro 设置相同的布局?

html - 将鼠标悬停在菜单上会显示子菜单,内容会向下滑动。如何不向下滑动内容和子菜单重叠内容?