大小未知的View中的本机图像大小

Question

React-Naive suggests developers to state image dimension before runtime. I know this is a good practice. My question is... How about if I want to resize an <Image> to the same width as its contained <View> with unknown width?

For example, I have an <Image> in a <View> with rowDirection: 'row', flex: 0.8 . In different device I have different screen width. How do I know the actual width of 80% of the device?

PS I have tried all resizeMode but no luck.

Can anyone help me thanks!

UPDATE 1

I have tried this snippet

<View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#CCF' }}>
    <Image
        source={require('../resources/images/side-menu-header.png')}
        style={{ width: null, height: null, flex: 0.8 }} />
    <View style={{ flex: 0.2 }} />
</View>

Result image of above code

However, yes, this image is now set to 0.8 in width, but some its area has been cropped. This is not what I want to get. Therefore, I set its resizeMode to contain as below snippet

<View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#CCF' }}>
    <Image
        resizeMode='contain'
        source={require('../resources/images/side-menu-header.png')}
        style={{ width: null, height: null, flex: 0.8 }} />
    <View style={{ flex: 0.2 }} />
</View>

Result image of above code

This is not what I expected too! As you see, the image is now become 0.8 in width and the whole image is shown, but the top and bottom space is occupied by its original dimension. (The Original image dimension is large)

I think I can simplify this question in few words: How do I show a full width image in my app? I cannot set its width to 1080 since not all device has a width of 1080 pixel.

Answer 1

Use Dimensions API for making image size dynamic.

Sample code:

const { width, height } = Dimensions.get('window');
<Image
    source={{uri: `${url}`}}
    style={{ width: width * 0.8, height: height * 0.8 }}
/>

The width * 0.8 and height * 0.8 is the 80 percentage for your screen size width and height respectively.

Answer 2

将null的width和height传递给style道具，如下所示：

<Image resizeMode='cover' source={{ uri: 'image.png' }} style={{ width: null, height: null, flex: 0.8 }} />

Answer 3

As far as i'm concerned, what you need is a api to get the size of device.

Try Dimensions, use like this:

 let {height, width} = Dimensions.get('window');