Question

as the image can show it ，我的应用在我的页脚顶部和标题底部显示一行。它在Native Base中似乎很常见。我已经检查了本机主题但我找不到一些来修复此错误。

代码：

import React, { Component } from 'react';
import { Container, Content, Footer, FooterTab, Button, Icon, Text, Header, Title, Left, Right, Body, } from 'native-base';
export default class FooterTabsExample extends Component {
  render() {
    return (
          <Container>
              <Header>
                <Left>
                    <Button transparent>
                        <Icon name='arrow-back' />
                    </Button>
                </Left>
                <Body>
                    <Title>Header</Title>
                </Body>
                <Right>
                    <Button transparent>
                        <Icon name='menu' />
                    </Button>
                </Right>
              </Header>
              <Content style={{backgroundColor:'black'}}/>

              <Footer >
                  <FooterTab>
                      <Button>
                          <Icon name="apps" />
                          <Text>Apps</Text>
                      </Button>
                      <Button>
                          <Icon name="camera" />
                          <Text>Camera</Text>
                      </Button>
                      <Button active>
                          <Icon active name="navigate" />
                          <Text>Navigate</Text>
                      </Button>
                      <Button>
                          <Icon name="person" />
                          <Text>Contact</Text>
                      </Button>
                  </FooterTab>
              </Footer>
          </Container>
    );
  }
}

Answer 1

只需覆盖borderBottomWidth的{{1}}和Header的{{1}}：

borderTopWidth

Answer 2

<Header style={{borderBottomWidth: 0, shadowOffset: {height: 0, width: 0}, 
shadowOpacity: 0, elevation: 0}}>

这对我有用。如果您使用的是Android，则必须添加高程：0。

Answer 3

最佳答案不适用于android，因为您还需要：elevation:0

因此@ ap003的答案更加完整。

这对于我在android上的页脚有效：

<Footer style = {{borderTopWidth: 0, elevation: 0,}} />

您可以对标题使用相同的逻辑（将borderTopWidth替换为borderBottomWidth）

...

很抱歉无法单独发表评论，因为我无法评论现有帖子（新用户huhu）。

Answer 4

您只需要设置在页眉或页脚背景中使用的边框颜色。

<Header style={{
        backgroundColor:'#141414',
        borderColor: "#141414",

    }}></Header>

Answer 5

只需使用以下样式即可删除底部边框线。

<Header style = {{elevation: 0}} />

Answer 6

对于React Navigation v5，在shadowColor: 'transparent'的'headerStyle'中添加options props。

如何删除Native Base中页眉的底线和页脚顶行？

6 个答案: