react-native - 图像 'contain' resizeMode 在 native react 中不起作用

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

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


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

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

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

Answer 1

这就是诀窍:

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

    );
  }