31

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

我在我的设备上得到以下结果： screenshot_2016-04-05-11-05-41

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

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

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

4

6 回答 6

12

这是诀窍：

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

    );
  }
于 2019-05-25T07:32:39.927 回答
9

这是最新的解决方案：

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

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

<Image source={image} resizeMode={ImageResizeMode.contain} />
于 2018-11-15T06:42:20.603 回答
8

这就是最新的 react-native 0.37 对我有用的：

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

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

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

let resolveAssetSource = require('resolveAssetSource')
let { width, height } = resolveAssetSource(image_source)
let aspectRatio = width / height
于 2016-11-13T21:44:29.470 回答
6

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

<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
  }          
});
于 2016-04-06T08:13:16.130 回答
1

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

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

于 2016-04-05T21:13:38.433 回答
0

添加纵横比对我有用：

<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"
/>
于 2021-01-30T16:14:38.013 回答