在React Native

Question

问题

我正在使用React Native中的应用程序，我需要一个图像，即它的高度为宽度的一定百分比。

代码

在图片中，背景是带有另一个图像的图像。我使用的是样式组件。

export const ImageWithButtonStyled = styled.TouchableOpacity`
  padding: ${Spacing.XLarge}
  alignItems: center
  width: 50%
`;

export const ImageWithButtonImageContentStyled = styled.View`
`;

export const ImageWithButtonBackgroundStyled = styled.Image`
  marginLeft: ${Spacing.Large}
  marginRight: ${Spacing.Large}
  backgroundColor: ${Color.GrayLight}
  borderWidth: 1
  borderColor: ${Color.Gray}
  justifyContent: center
  alignItems: center
  width: 100%
`;

export const ImageWithButtonButtonContentStyled = styled.View`
 alignSelf: stretch
 alignContent: center
`;

这是在组件render()方法中使用它们的方式：

  render() {
    return (
      <ImageWithButtonStyled>
        <ImageWithButtonBackgroundStyled source={null}>
          <Image source={require('../assets/ic_photo/ic_photo.png')}/>
        </ImageWithButtonBackgroundStyled>
        <ImageWithButtonButtonContentStyled>
          <LinkButton text={this.props.buttonText} />
        </ImageWithButtonButtonContentStyled>
      </ImageWithButtonStyled>
    );
  }

我正在寻找

我正在寻找的结果是：

但无需硬编码任何尺寸，只需使用百分比并将高度设置为宽度的百分比，以便灰色框在任何屏幕中保持我定义的宽高比，相应地缩放。所以，如果我说高度是1.4宽度，那么这个方面将保留在任何屏幕上。

非常感谢任何帮助，谢谢。

Answer 1

由于react-native中的宽度和高度值是无单位的，并且您无法使用width: 50%之类的内容，因此您应该在应用中使用Dimension。您可以使用下面的代码获取屏幕的尺寸，并使用width: width/2

之类的方式为您的组件设置样式

import {Dimensions} from 'react-native'
...
let {height, width} = Dimensions.get('window')