How to remove bottom line of Header and top line of Footer in Native Base?

问题

as the image can show it , my app shows a line at the top of my Footer and at the bottom of my Header. Its seems a common thing in Native Base. I have checked out the native-base theme but I can´t find some to fix this error.

Code:

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

回答1:

Just override the borderBottomWidth for Header and borderTopWidth for Footer:

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

...

<Footer style={{borderTopWidth: 0}}>
  ...
</Footer>

回答2:

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

This worked for me. If you're using Android you must add elevation: 0.

回答3:

You just need to set border color which you are using in the header or footer background.

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

    }}></Header>

回答4:

The top answer doesn't work for android as you also need: elevation:0

So @ap003's answer is more complete.

This worked for me for footer on android:

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

You can use the same logic for header (replace borderTopWidth with borderBottomWidth)

...

Sorry for separate comment as I'm unable to comment on existing posts (new user huhu).

回答5:

Just use following style to remove bottom border line.

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

来源：https://stackoverflow.com/questions/42989251/how-to-remove-bottom-line-of-header-and-top-line-of-footer-in-native-base

标签

react-native

native-base