如何将图像宽度设置为100％，高度自动设置为原生？

我想显示滚动视图中的图像列表。宽度应该是100％，而高度应该是自动的，保持宽高比。如何将图像宽度设置为100％，高度自动设置为原生？

我所做的搜索指出了各种解决方案，给出全屏背景风格。

const styles = StyleSheet.create({ 
    image: { 
     width: null, 
     height: 300, 
     resizeMode: 'cover' 
    } 
}); 

<ScrollView style={{flex: 1}}> 
    <Image style={styles.image} source={require('../../../images/collection-imag1.png')}/> 
    <Image style={styles.image} source={require('../../../images/collection-imag2.png')}/> 
</ScrollView>

我试图宽度的各种组合：空，高度：空，挠曲：1，alignSelf等。上述溶液几乎工作，除了高度不是动态的。部分图像不可见。

来源

2016-09-22 Prabhakar Bhat

看一看[反应 - 本机可扩展的图像（https://www.npmjs.com/package/react-native-scalable-image） –

"resizeMode"不是样式属性。应该像下面的代码一样移动到Image组件的Props。

const win = Dimensions.get('window'); 

const styles = StyleSheet.create({ 
    image: { 
     flex: 1, 
     alignSelf: 'stretch', 
     width: win.width, 
     height: win.height, 
    } 
}); 

... 
    <Image 
     style={styles.image} 
     resizeMode={'contain'} /* <= changed */ 
     source={require('../../../images/collection-imag2.png')} /> 
...

来源

2016-09-22 07:01:50

它是在图像的样式属性，根据https://facebook.github.io/react-native/docs/image.html。将其更改为属性也不起作用。 –

你应该在你的问题中添加错误日志。 –

您总是需要设置Image的宽度和高度。它不会为你自动调整大小。 React Native文档says so。

您应该使用onLayout来测量ScrollView的总高度，并根据它设置Image的高度。如果您使用的cover它将保持您的Image的纵横比，但它显然会裁剪它们，如果它比容器大。

来源

2016-09-22 17:23:12 rclai

自动大小调整仅适用于远程图像。 OP引用的是本地静态图像文件，用React Native _“可以自动调整尺寸，因为它们的尺寸在安装时立即可用。”_ – PowerOfM

所以思考了一段时间后，我能够实现身高：自动反应原生图像。你需要知道你的图片的尺寸才能使这个黑客工作。只需在任何图像查看器中打开图像，即可在文件信息中获取图像的尺寸。仅供参考我使用的图像大小为541 X 362个

首次进口尺寸反应母语

import { Dimensions } from 'react-native';

，那么你必须得到窗口的尺寸现在

const win = Dimensions.get('window');

计算比例为

const ratio = win.width/541; //541 is actual image width

现在为您的图像添加样式Ë作为

imageStyle: { 
    width: win.width, 
    height: 362 * ratio, //362 is actual height of image 
}

来源

2018-02-06 19:34:10

如何将图像宽度设置为100％，高度自动设置为原生？

回答

相关问题