Question

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

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>
);}

请建议我的解决方案。提前致谢

Answer 1

我认为你应该在标题组件中执行类似的操作：

.container {
 overflow: visible;
}

.center-logo {
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 height: 150px; (or more)
}

Answer 2

试试这样：

HTML：

<header>
     <back></back>
     <logo></logo>
     <search></search>
<header>

CSS：

/* let logo display in center, and other use float */
/* for alternative way, use flex box and justify-content: space-between */
header { overflow: visible; text-align: center; }
back { float: left; }
/* decrease logo high and overflow it */
logo { margin-bottom: -20px; }
search { float: right; }

如何在Header顶部放置一个视图，其中一部分位于标题后面的边界之外？

2 个答案: