图片包含＆＃39; resizeMode无效反应原生

Question

我在真正的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'
      }          
    } />
}

我在设备上获得以下结果：

正如您所看到的那样，整个背景都是黄色的，因此告诉我们图像元素确实占据了整个屏幕尺寸。但这只是错误的。 ＆＃39;封面＆＃39; resizeMode按预期工作（＆＃39; stretch＆＃39;模式）也是如此。 这是包含＆＃39;无效的模式（从我的角度来看最重要的模式）。 将图像放在ListView上时问题变得更加严重，因为图像甚至都没有显示。

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

更新2 好消息。我现在正在使用React Native v0.24.1，而且图像似乎包含＆＃39;模式现在按预期工作，即使实际图像大小小于其容器。 zvona的解决方案很好（尽管你需要记住，onLayout会为你提供图像渲染的图像视图大小，但不是正在加载的实际图像大小）。至于现在，我不知道有什么办法可以找出实际的图像尺寸（假设你是从网络资源中检索图像而你不知道尺寸，这可能是如果你想计算它的宽高比，这一点非常重要。）

Answer 1

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

<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
  }          
});

Answer 2

这是最新的解决方案：

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

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

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

Answer 3

这对我来说最新的反应原生0.37：

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

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

对于本地图像，一种没有记录的方法来计算大小从而计算宽高比是使用resolveAssetSource这是一个反应原生模块（不需要外部库）：

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

Answer 4

这是窍门：

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

    );
  }

Answer 5

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

我认为“掩护”应该做你想要达到的目标。但是，由于图像的大小，当它被放大时它看起来不会很好。 在这里举了一个例子：https://rnplay.org/apps/X5eMEw

Answer 6

添加宽高比对我有用：

import Constants from 'expo-constants';
console.log(Constants.manifest.extra.buildDate);