react-native - 适合包含视图的图像,而不是整个屏幕尺寸
react-native - Fit Image in containing View, not the whole screen size
我正在尝试使图像适合它们包含的视图,以便我可以获得无缝的图像网格。问题是 resizeMode='contain'
似乎适合屏幕宽度或至少一些更高级别的容器,我需要图像适合每个列表项的大小。
这是样式和生成的网格的一个非常丑陋的示例:
样式:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'blue'
},
item: {
flex: 1,
overflow: 'hidden',
alignItems: 'center',
backgroundColor: 'orange',
position: 'relative',
margin: 10
},
image: {
flex: 1
}
})
布局:
<TouchableOpacity
activeOpacity={ 0.75 }
style={ styles.item }
>
<Image
style={ styles.image }
resizeMode='contain'
source={ temp }
/>
</TouchableOpacity>
结果(resizeMode='contain'
):
结果(resizeMode='cover'
):
如您所见,cover
ed 图像非常大,与整个屏幕一样宽,不适合立即包含的视图。
更新 1:
通过对图像应用缩放变换并从中心缩小它,我能够获得接近我正在寻找的结果:
变换:
transform: [{ scale: 0.55 }]
生成的布局(没有边距或填充):
我无法让示例使用 Image
的 resizeMode
属性工作,但是因为图像都是正方形的,所以有一种方法可以使用 [=25] 的尺寸来实现=] 和 flexbox 一起。
设置flexDirection: 'row'
,flexWrap: 'wrap'
,那么只要维度相同,就会全部排成一行。
我设置好了here
https://snack.expo.io/HkbZNqjeZ
"use strict";
var React = require("react-native");
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
Dimensions,
ScrollView
} = React;
var deviceWidth = Dimensions.get("window").width;
var temp = "http://thumbs.dreamstime.com/z/close-up-angry-chihuahua-growling-2-years-old-15126199.jpg";
var SampleApp = React.createClass({
render: function() {
var images = [];
for (var i = 0; i < 10; i++) {
images.push(
<TouchableOpacity key={i} activeOpacity={0.75} style={styles.item}>
<Image style={styles.image} source={{ uri: temp }} />
</TouchableOpacity>
);
}
return (
<ScrollView style={{ flex: 1 }}>
<View style={styles.container}>
{images}
</View>
</ScrollView>
);
}
});
我认为这是因为您没有指定 item
的宽度和高度。
如果你只想让 2 张图片连续,你可以尝试这样的方法而不是使用 flex:
item: {
width: '50%',
height: '100%',
overflow: 'hidden',
alignItems: 'center',
backgroundColor: 'orange',
position: 'relative',
margin: 10,
},
这对我有用,希望对您有所帮助。
将尺寸设置为 View 并确保 Image 的样式设置为 'undefined' 就像下面的例子:
<View style={{width: 10, height:10 }} >
<Image style= {{flex:1 , width: undefined, height: undefined}}
source={require('../yourfolder/yourimage')}
/>
</View>
这将确保您的图像缩放并完美适合您的视图。
如果您知道纵横比,例如,如果您的图像是方形的,您可以设置 height
或 width
来填充容器,并让另一个由 aspectRatio
属性
如果您希望 height
自动设置,请使用以下样式:
{
width: '100%',
height: undefined,
aspectRatio: 1,
}
注意:height
必须是undefined
编辑(基于@rob-art 的评论):
如果您的图像的纵横比与您要在样式中设置的纵横比不同,您可以使用 resizeMode
来控制图像的显示方式。使用 resizeMode:'contain'
确保您的图片未被裁剪。
有关详细信息,请参阅 documentation
简单地说,您需要像这样传递 resizeMode 以适合包含视图的图像
<Image style={styles.imageStyle} resizeMode={'cover'} source={item.image}/>
const style = StyleSheet.create({
imageStyle: {
alignSelf: 'center',
height:'100%',
width:'100%'
},]
})
图像有一个 属性 命名的 Style(像大多数 react-native Components)
对于图像样式,有一个名为 resizeMode 的 属性,其值如下:
包含、覆盖、拉伸、居中、重复
大多数情况下,如果您使用中心,它就会为您工作
这里的任何人如果希望他的图像在没有任何裁剪的情况下适合全屏(纵向和横向模式),请使用此:
image: {
flex: 1,
width: '100%',
height: '100%',
resizeMode: 'contain',
},
这对我有用,
<Image style={styles.imageStyle} resizeMode="cover" source={imageSource} />
const styles = StyleSheet.create({
imageStyle: {
width: undefined,
height: '100%',
aspectRatio: 1,
alignSelf: 'center',
},
});
您可以使用始终修复图像缩放比例的“Resize Matters”库。
import { scale, verticalScale } from 'react-native-size-matters';
export const Component = props =>
<Image style={{
width: scale(30),
height: verticalScale(50)
}}/>;
在这里你会很开心:https://github.com/nirsky/react-native-size-matters
我正在尝试使图像适合它们包含的视图,以便我可以获得无缝的图像网格。问题是 resizeMode='contain'
似乎适合屏幕宽度或至少一些更高级别的容器,我需要图像适合每个列表项的大小。
这是样式和生成的网格的一个非常丑陋的示例:
样式:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'blue'
},
item: {
flex: 1,
overflow: 'hidden',
alignItems: 'center',
backgroundColor: 'orange',
position: 'relative',
margin: 10
},
image: {
flex: 1
}
})
布局:
<TouchableOpacity
activeOpacity={ 0.75 }
style={ styles.item }
>
<Image
style={ styles.image }
resizeMode='contain'
source={ temp }
/>
</TouchableOpacity>
结果(resizeMode='contain'
):
结果(resizeMode='cover'
):
如您所见,cover
ed 图像非常大,与整个屏幕一样宽,不适合立即包含的视图。
更新 1:
通过对图像应用缩放变换并从中心缩小它,我能够获得接近我正在寻找的结果:
变换:
transform: [{ scale: 0.55 }]
生成的布局(没有边距或填充):
我无法让示例使用 Image
的 resizeMode
属性工作,但是因为图像都是正方形的,所以有一种方法可以使用 [=25] 的尺寸来实现=] 和 flexbox 一起。
设置flexDirection: 'row'
,flexWrap: 'wrap'
,那么只要维度相同,就会全部排成一行。
我设置好了here
https://snack.expo.io/HkbZNqjeZ
"use strict";
var React = require("react-native");
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
Dimensions,
ScrollView
} = React;
var deviceWidth = Dimensions.get("window").width;
var temp = "http://thumbs.dreamstime.com/z/close-up-angry-chihuahua-growling-2-years-old-15126199.jpg";
var SampleApp = React.createClass({
render: function() {
var images = [];
for (var i = 0; i < 10; i++) {
images.push(
<TouchableOpacity key={i} activeOpacity={0.75} style={styles.item}>
<Image style={styles.image} source={{ uri: temp }} />
</TouchableOpacity>
);
}
return (
<ScrollView style={{ flex: 1 }}>
<View style={styles.container}>
{images}
</View>
</ScrollView>
);
}
});
我认为这是因为您没有指定 item
的宽度和高度。
如果你只想让 2 张图片连续,你可以尝试这样的方法而不是使用 flex:
item: {
width: '50%',
height: '100%',
overflow: 'hidden',
alignItems: 'center',
backgroundColor: 'orange',
position: 'relative',
margin: 10,
},
这对我有用,希望对您有所帮助。
将尺寸设置为 View 并确保 Image 的样式设置为 'undefined' 就像下面的例子:
<View style={{width: 10, height:10 }} >
<Image style= {{flex:1 , width: undefined, height: undefined}}
source={require('../yourfolder/yourimage')}
/>
</View>
这将确保您的图像缩放并完美适合您的视图。
如果您知道纵横比,例如,如果您的图像是方形的,您可以设置 height
或 width
来填充容器,并让另一个由 aspectRatio
属性
如果您希望 height
自动设置,请使用以下样式:
{
width: '100%',
height: undefined,
aspectRatio: 1,
}
注意:height
必须是undefined
编辑(基于@rob-art 的评论):
如果您的图像的纵横比与您要在样式中设置的纵横比不同,您可以使用 resizeMode
来控制图像的显示方式。使用 resizeMode:'contain'
确保您的图片未被裁剪。
有关详细信息,请参阅 documentation
简单地说,您需要像这样传递 resizeMode 以适合包含视图的图像
<Image style={styles.imageStyle} resizeMode={'cover'} source={item.image}/>
const style = StyleSheet.create({
imageStyle: {
alignSelf: 'center',
height:'100%',
width:'100%'
},]
})
图像有一个 属性 命名的 Style(像大多数 react-native Components) 对于图像样式,有一个名为 resizeMode 的 属性,其值如下: 包含、覆盖、拉伸、居中、重复
大多数情况下,如果您使用中心,它就会为您工作
这里的任何人如果希望他的图像在没有任何裁剪的情况下适合全屏(纵向和横向模式),请使用此:
image: {
flex: 1,
width: '100%',
height: '100%',
resizeMode: 'contain',
},
这对我有用,
<Image style={styles.imageStyle} resizeMode="cover" source={imageSource} />
const styles = StyleSheet.create({
imageStyle: {
width: undefined,
height: '100%',
aspectRatio: 1,
alignSelf: 'center',
},
});
您可以使用始终修复图像缩放比例的“Resize Matters”库。
import { scale, verticalScale } from 'react-native-size-matters';
export const Component = props =>
<Image style={{
width: scale(30),
height: verticalScale(50)
}}/>;
在这里你会很开心:https://github.com/nirsky/react-native-size-matters