Реагирующая навигация: прозрачный заголовок не имеет высоты

Question

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

Мой код:

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

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

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

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

Answer 1

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

headerTransparent: true

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

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

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

стиль: {позиция: 'абсолютная', фоновый цвет: 'прозрачная', zIndex: 100, сверху: 0, слева: 0, справа: 0}

Answer 2

Добавить 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)' }} />
    ),
  }),
};