如何将图像宽度设置为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等。上述溶液几乎工作,除了高度不是动态的。部分图像不可见。
"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')} />
...
它是在图像的样式属性,根据https://facebook.github.io/react-native/docs/image.html。将其更改为属性也不起作用。 –
你应该在你的问题中添加错误日志。 –
所以思考了一段时间后,我能够实现身高:自动反应原生图像。 你需要知道你的图片的尺寸才能使这个黑客工作。只需在任何图像查看器中打开图像,即可在文件信息中获取图像的尺寸。 仅供参考我使用的图像大小为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
}
看一看[反应 - 本机可扩展的图像(https://www.npmjs.com/package/react-native-scalable-image) –