Как удалить нижнюю строку заголовка и верхнюю строку нижнего колонтитула в Native Base?

как показано на изображении , мое приложение показывает строку в верхней части нижнего колонтитула и внизу моего заголовка. Кажется, это обычное дело в 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>
    );
  }
}

react-native native-base
person Fernando Ontiveros    schedule 24.03.2017    source источник
comment
Для заголовка вы можете добавить noShadow. Например. ‹Заголовок noShadow›, для футера я не нашел ничего похожего.   -  person Nick    schedule 05.08.2018

Ответы (6)


arrow_upward
12
arrow_downward

Просто переопределите borderBottomWidth вместо Header и borderTopWidth вместо Footer:

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

...

<Footer style={{borderTopWidth: 0}}>
  ...
</Footer>
person max23_    schedule 24.03.2017

arrow_upward
5
arrow_downward 

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

Это сработало для меня. Если вы используете Android, вы должны добавить высота: 0.

person ap003    schedule 06.06.2018

arrow_upward
1
arrow_downward

Вам просто нужно установить цвет границы, который вы используете в верхнем или нижнем колонтитуле фона.

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

    }}></Header>
person Amit Padmani    schedule 01.08.2018

arrow_upward
1
arrow_downward

Верхний ответ не работает для Android, так как вам также нужно: elevation:0

Так что ответ @ ap003 более полный.

Это сработало для меня для нижнего колонтитула на Android:

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

Вы можете использовать ту же логику для заголовка (замените borderTopWidth на borderBottomWidth)

...

Извините за отдельный комментарий, так как я не могу комментировать существующие сообщения (новый пользователь huhu).

person clever_username    schedule 26.09.2019

arrow_upward
1
arrow_downward

Для React Navigation v5 добавьте shadowColor: 'transparent' в 'headerStyle' в файле options props.

person Harvey Kadyanji    schedule 31.07.2020

arrow_upward
0
arrow_downward

Просто используйте следующий стиль, чтобы удалить нижнюю границу.

<Header style = {{elevation: 0}} />
person tech js    schedule 19.11.2019