Реагировать на родной стиль заголовка с фоновым изображением

Question

Мне нужна помощь. Я пытаюсь стилизовать заголовок экрана с изображением на заднем плане. Но фоновый рисунок c работает неправильно, я попытался использовать оба, Image и ImageBackground. Изображение должно соответствовать ширине и быть на заднем плане.

вот так оно должно выглядеть:

вот так оно выглядит сейчас:

когда я устанавливаю ширину на 100% или ширину окна, это то, что я получаю, Изображение обрезается снизу:

Вот мой код:

ArtistProfile.tsx

import React, { Component } from "react";
import { Content } from "native-base";
import styled from "styled-components/native";
import ScreenLayout from "../layout/ScreenLayout";

interface ArtistProfileProps {
  componentId: string;
}

class ArtistProfile extends Component<ArtistProfileProps> {
  render() {
    return (
      <ScreenLayout componentId={this.props.componentId}>
        <ArtistProfileContent>
          <HeaderBackground
            source={require("../../assets/img/header-bg.png")}
          />
        </ArtistProfileContent>
      </ScreenLayout>
    );
  }
}
export default ArtistProfile;

const ArtistProfileContent = styled(Content)`
  flex: 1;
`;

const HeaderBackground = styled.Image`
  flex: 1;
  align-self: center;
  margin: 0;
  padding: 0;
`;

ScreenLayout.tsx

import React, { Component } from "react";
import theme from "../../theme/Theme";
import styled, { ThemeProvider } from "styled-components/native";
import { Container } from "native-base";
import FooterNavigation from "../../components/footer/Footer";

interface ScreenLayoutProps {
  componentId: string;
}

class ScreenLayout extends Component<ScreenLayoutProps> {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <ScreenLayoutContainer>{this.props.children}</ScreenLayoutContainer>
        <FooterNavigation componentId={this.props.componentId} />
      </ThemeProvider>
    );
  }
}
export default ScreenLayout;

const ScreenLayoutContainer = styled(Container)`
  flex: 1;
`;

Answer 1

Вы можете установить ширину '100%' в компоненте HeaderBackground.

Answer 2

Может быть, вы можете установить ширину вот так

import {Dimensions} from 'react-native';
const windowWidth = Dimensions.get('window').width;

реагировать на собственные размеры