图片不符合约束条件

Question

According to the documentation on Image , you can use resizeMode to have the image be contained within its container (in this case, a View).

The code I have is this:

  <View style={{backgroundColor: '#ccf'}}>
    <Image
      resizeMode={Image.resizeMode.contain}
      source={require('../../../assets/ste-logo.png')}
    />
  </View>

Yet what I get is this:

I would expect the logo to shrink down to fit within the purple box. I can fix this by specifying a hard width on the image, but I don't want to do that as it should look good on all phone sizes. I basically want the image to stretch to 100% of its containing View. How do I do this?

Answer 1

The Image component is itself a view (or box with regard to the box model layout). Since you didn't give it a size it just grows to fit it's contents. In this case it's then to big to fit it's parent and overflows.

So you either you explicitly give the Image the desired width and hight or you use flex: 1. In that case have to give the container a flexDirection: 'row'.