React Navigation: прозрачный заголовок не имеет высоты

Если я установлю headerTransparent: true, другой контент, который обычно отображался ниже, перемещается под ним. Как я могу этого избежать?

Мой код:

export class RegisterScreen extends Component {
  static navigationOptions = {
    title: strings.header,
    headerTitleStyle: { color: '#fff' },
    headerTintColor: '#fff',
    headerTransparent: true,
  };
  render() {
    return <Display onSignUpPressed={() => {}} onHelpPressed={() => {}} />;
  }
}

С прозрачным заголовком (перекрывается :( ):

введите описание изображения здесь

Без прозрачного заголовка:

введите описание изображения здесь

Я хотел бы, чтобы содержимое было выровнено, как если бы заголовок имел высоту. Поэтому я хочу, чтобы содержимое было как на второй картинке, но с прозрачным заголовком, как на первой.


react-native react-navigation react-navigation-stack
person J. Hesters    schedule 28.05.2019    source источник
comment
Добавьте ‹View style={styles.statusBar} /›, где стиль может быть: statusBar: { backgroundColor: #C2185B, width: 100%, height: Constants.statusBarHeight}   -  person ashishdhiman2007    schedule 28.05.2019
comment
Попробуйте это: github.com/react-navigation/react-navigation /проблемы/   -  person Zaytri    schedule 28.05.2019
comment
попробуйте добавить заголовокBackground   -  person Medet Tleukabiluly    schedule 07.06.2019

Ответы (5)


arrow_upward
1
arrow_downward

Заголовок перекрывается содержимым под ним, если установлено headerTransparent: true. Вам нужно вручную добавить верхнее поле или отступ в соответствии с вашей ситуацией для вашего контента, если вы не хотите, чтобы он перекрывался. React Navigation не будет делать это автоматически, но он предоставляет хук, который получает высоту заголовка.

import { useHeaderHeight } from '@react-navigation/stack';

Теперь вы можете получить высоту в своем компоненте следующим образом:

const headerHeight = useHeaderHeight();
person Khim Bahadur Gurung    schedule 13.09.2020

arrow_upward
0
arrow_downward

Вам нужно будет дать компоненту экрана верхний отступ, эквивалентный высоте заголовка,

person Jimmy Obonyo Abor    schedule 25.06.2020

arrow_upward
0
arrow_downward

Теперь вы можете использовать свойство headerStyle, чтобы придать заголовку прозрачный фон, сохраняя при этом его высоту:

static navigationOptions = {
    title: strings.header,
    headerTitleStyle: { color: '#fff' },
    headerTintColor: '#fff',
    headerStyle: { backgroundColor: 'transparent' },
  };
person omerts    schedule 23.01.2021

arrow_upward
-2
arrow_downward

Добавить headerBackground в параметры навигации, подобные этому

static navigationOptions = {
    title: strings.header,
    headerTitleStyle: { color: '#fff' },
    headerTintColor: '#fff',
    headerTransparent: true,
    headerBackground: Platform.select({
        ios: <BlurView style={{ flex: 1 }} intensity={98} />,
        android: (
          <View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.7)' }} />
    ),
  }),
};
person Aleksey Shulga    schedule 28.05.2019
comment
Это похоже только на обходной путь, тем более что вы все еще визуализируете что-то с интенсивностью 98. - person J. Hesters; 28.05.2019
comment
@J.Hesters, согласно документации по навигации по реакции, вы должны указать headerStyle или headerBackground при использовании headerTransparent: true. Проверьте это - reactnavigation.org/docs/en/ - person Dinith Minura; 04.06.2019

arrow_upward
-2
arrow_downward

Мы можем сделать заголовок прозрачным с помощью

заголовокПрозрачный: правда

но при этом нам также нужно указать headerStyle, чтобы сделать заголовок прозрачным.

static navigationOptions = {
headerTransparent: true,
headerStyle: { borderBottomWidth: 0 }
};

В моем случае я делаю это возможным, добавляя этот стиль к своему заголовку.

style:{ position: 'absolute', backgroundColor: 'transparent', zIndex: 100, top: 0, left: 0, right: 0}

person jatin.7744    schedule 08.06.2019