图像'包含'resizeMode无法在React Native中工作 [英] Image 'contain' resizeMode not working in react native

问题描述

我在真正的Android设备上使用React Native. 当在主应用程序组件上仅使用以下呈现功能创建一个非常简单的应用程序时...

I am using React Native on a real Android device. When creating a really simple app with just the following render function on the main app component...

render() {
  <Image
    source={{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}}
    style={
      {
        flex: 1,
        resizeMode: 'contain',
        backgroundColor: 'yellow'
      }          
    } />
}

我在设备上得到以下结果:

I get the following result on my device:

您可以看到整个背景为黄色，这告诉我们图像元素确实占据了整个屏幕尺寸.但这只是错误的. 'cover'resizeMode确实按预期方式工作("stretch"模式也是如此). 这是包含"模式不起作用的(从我的角度来看，最重要的一种). 将图像放置在ListView上时，问题甚至变得更加严重，因为图像甚至无法显示.

As you can see the whole background is yellow so that tells us the image element is taking the whole screen size indeed. But it is just rendered wrong. The 'cover' resizeMode does work as expected (and so does the 'stretch' mode). It is the 'contain' mode that is not working (the most important one from my point of view). The problem gets even worse when placing the image on a ListView since the image does not even show.

更新1 正如Frederick指出的那样，包含"仅在图像大于容器大小时才起作用.那么，如何在保持宽高比的同时使图像占据整个容器的大小呢? React中的样式尚不支持百分比，并且在加载图像后，我不知道如何获取图像的width和height属性.没有与图像"组件关联的事件提供该信息.

UPDATE 1 As Frederick points out, 'contain' only works when the image is larger than the container size. So how can we make the image take the whole container size while keeping its aspect ratio? Percentages are not supported yet by styles in React, and I don't know how to get the image width and height properties once the image is loaded. None of the events associated with the Image component provide that info.

更新2 好消息.我现在正在使用React Native v0.24.1，似乎图像包含"模式现在可以按预期工作，即使实际图像大小小于其容器也是如此. zvona的解决方案很好(尽管您需要记住，onLayout将为您提供渲染图像时的图像视图大小，而不是实际加载的图像大小).到目前为止，我不知道有什么方法可以找到实际的图像大小(假设您正在从网络资源中检索图像，而您又不知道大小，这对于您要进行计算非常重要)其长宽比).

UPDATE 2 Good news. I am now using React Native v0.24.1 and it seems the image 'contain' mode now works as expected, even when the actual image size is smaller than its container. zvona's solution is good (although you need to bear in mind that onLayout will give you the image view size the image is rendered in, but NOT the actual image size being loaded). As for now, I don't know of any way to find out the actual image size (let's suppose you are retrieving the image from a network resource and you don't know the size, which could be very important if you want to calculate its aspect ratio).

推荐答案

这是最新的解决方案:

Image.resizeMode.contain 不适用于最新版本的react native，所以我这样使用它:

Image.resizeMode.contain is not working with latest version of react native so i use it like this:

import ImageResizeMode from 'react-native/Libraries/Image/ImageResizeMode'

<Image source={image} resizeMode={ImageResizeMode.contain} />

这篇关于图像'包含'resizeMode无法在React Native中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！