图像“包含”resizeMode 在本机反应中不起作用答案

【问题标题】：Image 'contain' resizeMode not working in react native图像“包含”resizeMode 在本机反应中不起作用
【发布时间】：2016-07-26 00:24:24
【问题描述】：

我在真正的 Android 设备上使用 React Native。当在主应用组件上仅使用以下渲染函数创建一个非常简单的应用时...

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'
      }          
    } />
}

我在我的设备上得到以下结果：

你可以看到整个背景是黄色的，这告诉我们图像元素确实占据了整个屏幕大小。但它只是呈现错误。 'cover' resizeMode 确实按预期工作（'stretch' 模式也是如此）。不起作用的是“包含”模式（从我的角度来看，这是最重要的一种）。将图像放在 ListView 上时问题会变得更糟，因为图像甚至不显示。

更新 1 正如 Frederick 指出的那样，“包含”仅在图像大于容器大小时才有效。那么我们怎样才能让图像占据整个容器的大小，同时保持它的纵横比呢？ React 中的样式尚不支持百分比，并且我不知道如何在加载图像后获取图像的宽度和高度属性。与 Image 组件关联的所有事件都没有提供该信息。

更新 2 好消息。我现在正在使用 React Native v0.24.1，看起来图像“包含”模式现在可以按预期工作，即使实际图像大小小于其容器。 zvona 的解决方案很好（虽然你需要记住 onLayout 会给你图像渲染的图像视图大小，但不是加载的实际图像大小）。至于现在，我不知道有什么方法可以找出实际的图像大小（假设您正在从网络资源中检索图像并且您不知道大小，如果您想计算，这可能非常重要它的纵横比）。

【问题讨论】：

标签： react-native react-native-listview

【解决方案1】：

这就是诀窍：

 render() {
    return (
        <Image
          style={{ flex: 1, height: undefined, width: undefined }}
          source={require("../../resource/image/bg_splash.jpg")}
          resizeMode="contain"
        />

    );
  }

【讨论】：

【解决方案2】：

这是最新的解决方案：

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

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

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

【讨论】：

简单地将 'resizeMode="contain"' 分配给图像对我来说也适用于 RN 0.57。 resizeMode 样式似乎不再被识别。
@JoeyT 我使用的是 RN 0.62.2，这种风格似乎对我有用。

【解决方案3】：

这对我来说是最新的 react-native 0.37：

<Image source={require('../images/my-image.png')} resizeMode={Image.resizeMode.center} />

回答问题的更新部分。您可以使用Image.getSize 获取外部图像的图像大小。

对于本地图像，计算大小并由此计算纵横比的一种未记录的方法是使用 resolveAssetSource，它是一个 react-native 模块（不需要外部库）：

let resolveAssetSource = require('resolveAssetSource')
let { width, height } = resolveAssetSource(image_source)
let aspectRatio = width / height

【讨论】：

这是给我的，文档让它看起来好像 resizeMode 值是在 style 属性中设置的。至少我是这么读的。
我确实在样式中设置了 resizeMode 并且它也有效
这对我来说不再适用于 react native 0.57 'Image.resizeMode' 未定义。

【解决方案4】：

我对已更新部分问题的回答：

<Image source={{uri:'...'}} onLayout={this.onImageLayout} />

地点：

onImageLayout: function(data){
  console.log('layout', data.nativeEvent.layout);
}

这些应该与设备宽度 + 高度成比例，您可以使用：

const {
  Dimensions,
  .
  .
  .
} = React;

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

如果你想在样式中获得宽度/高度的百分比，你只需定义例如：

const styles = StyleSheet.create({
  image: {
    width: windowWidth * 0.75,
    height: windowHeight * 0.33
  }          
});

【讨论】：

【解决方案5】：

“包含”仅在图片大小大于您尝试放入的容器时调整图片大小。在这种情况下，您的容器是全屏。您通过 URL 加载的图像要小得多，因为它只有 53 x 77 像素。所以它不会调整大小。

我认为“封面”应该做你想要达到的目标。但是，由于图像的大小，这样放大后看起来不会很好。这里举个例子：https://rnplay.org/apps/X5eMEw

【讨论】：

该死！你完全正确！我忘记了。 React 的问题是你不能在宽度和高度样式属性中使用百分比......所以现在我只是不知道如何让图像在保持其纵横比的同时占据整个容器大小！！！
这不是“封面”应该做的吗？来自文档：'cover'：统一缩放图像（保持图像的纵横比），使图像的两个尺寸（宽度和高度）都等于或大于视图的相应尺寸（减去填充)。

【解决方案6】：

添加宽高比对我有用：

<Image
  source={item.imageUrl && item.imageUrl != '' ? { uri: item.imageUrl } : require('../../assets/images/no-image-icon-15.png')}
  style={{
      flex: 1,
      aspectRatio: 1.5,
      height: undefined,
      width: undefined
  }}
  resizeMode="contain"
/>

【讨论】：