3

如图所示，我的应用程序在页脚顶部和页眉底部显示一行。它在 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>
    );
  }
}
4

6 回答 6

12

只需覆盖borderBottomWidthforHeader和borderTopWidthfor Footer：

<Header style={{borderBottomWidth: 0}}>
  ...
</Header>

...

<Footer style={{borderTopWidth: 0}}>
  ...
</Footer>
于 2017-03-24T04:16:01.453 回答
6 
<Header style={{borderBottomWidth: 0, shadowOffset: {height: 0, width: 0}, 
shadowOpacity: 0, elevation: 0}}>

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

于 2018-06-06T17:46:55.963 回答
1

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

所以@ap003 的回答更完整。

这对我来说适用于android上的页脚：

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

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

...

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

于 2019-09-26T07:44:42.310 回答
1

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

<Header style = {{elevation: 0}} />
于 2019-11-19T18:58:29.257 回答
1

对于 React Navigation v5 shadowColor: 'transparent'，在options props.

于 2020-07-31T08:49:08.160 回答
1

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

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

    }}></Header>
于 2018-08-01T14:00:16.043 回答