用背景图像反应本机样式标题

Question

我需要一些帮助。我正在尝试使用背景图像来设置屏幕标题。但是背景图形的样式不正确，我尝试同时使用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

也许您可以这样设置宽度

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

react native dimensions

Answer 2

您可以在HeaderBackground组件中将宽度设置为“ 100％”。