图像'包含'resizeMode在反应原生中不起作用
use*_*841 24 react-native react-native-listview
我在真正的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 正如弗雷德里克所指出的,"包含"仅在图像大于容器大小时才有效.那么我们怎样才能让图像在保持纵横比的同时占据整个容器的大小？React中的样式尚不支持百分比,并且我不知道如何在加载图像后获取图像宽度和高度属性.与Image组件关联的任何事件都不提供该信息.
更新2 好消息.我现在正在使用React Native v0.24.1,现在看起来图像'包含'模式正如预期的那样工作,即使实际图像大小小于其容器.zvona的解决方案很好(尽管你需要记住,onLayout会给你渲染图像的图像视图大小,但不是正在加载的实际图像大小).至于现在,我不知道有什么方法可以找出实际的图像大小(让我们假设你是从网络资源中检索图像而你不知道大小,如果你想计算它可能非常重要它的宽高比).
Sag*_*ada 10
这是最新的解决方案：
Image.resizeMode.contain不能与最新版本的react native一起使用，所以我这样使用它：
import ImageResizeMode from 'react-native/Libraries/Image/ImageResizeMode'
<Image source={image} resizeMode={ImageResizeMode.contain} />
- 只需为Image分配'resizeMode =“ contain”'同样适用于RN 0.57。resizeMode样式似乎不再被识别。 (2认同)
Rah*_*ogi 10
这是诀窍：
render() {
return (
<Image
style={{ flex: 1, height: undefined, width: undefined }}
source={require("../../resource/image/bg_splash.jpg")}
resizeMode="contain"
/>
);
}
我对UPdATED部分问题的回答:
<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
}
});
这就是最新的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
- 这在 React Native 0.57 'Image.resizeMode' 未定义中不再适用。 (2认同)
仅当图像尺寸大于您尝试容纳它的容器时，“包含”才会调整图像的大小。在这种情况下，您的容器是全屏的。您通过 URL 加载的图像要小得多，因为它只有 53 x 77 像素。所以它不会调整大小。
我认为“封面”应该达到你想要实现的目标。不过，由于图像尺寸的原因，这样放大后看起来就不太好看了。在这里举个例子： https: //rnplay.org/apps/X5eMEw