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

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

I get the following result on my device:

正如您所看到的，整个背景是黄色的，这告诉我们图像元素确实占据了整个屏幕尺寸。但它只是被渲染为错误的。 “覆盖”调整大小模式确实按预期工作（“拉伸”模式也是如此）。 这是“包含”模式不起作用（从我的角度来看，这是最重要的模式）。 当将图像放置在 ListView 上时，问题会变得更糟，因为图像甚至不显示。

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

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

这就是窍门：

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

    );
  }