[英]Resize image into view - react native
I'm wondering if it's possible to resize an image to fit it inside a view. 我想知道是否可以调整图像大小以使其适合视图。
This is what I have now 这就是我现在拥有的
<View style={styles.container}>
<View style={styles.header}>
<Image
source={headerImage}
/>
</View>
<Text style={styles.basicText}>text</Text>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
},
header: {
height: 200,
backgroundColor: 'red'
},
background: {
width: null,
height: null
},
image: {
}
I want to make the image fit into the header view. 我想让图像适合标题视图。
Adding to Moti Azu's answer, you need to also set the resizeMode. 添加到Moti Azu的答案,您还需要设置resizeMode。
image: {
flex:1,
height: null,
resizeMode: 'contain',
width: null,
}
If it does not seem to work, make sure that your View
with style container
has a width. 如果它似乎不起作用,请确保
View
with style container
具有宽度。
Add flex:1 to the image, it will stretch all over it's container. 将flex:1添加到图像中,它将遍布整个容器。
image: {
flex: 1
}
Try below style 尝试以下风格
<View style={styles.container}>
<View style={styles.header}>
<Image style={styles.image}
source={headerImage}
/>
</View>
<Text style={styles.basicText}>text</Text>
</View>
Style 样式
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
},
header: {
height: 200,
backgroundColor: 'red'
},
background: {
width: null,
height: null
},
image: {
width: 50,
height: 50
}
})
Refer the react native image property 请参阅react native image属性
http://facebook.github.io/react-native/releases/0.42/docs/image.html#props http://facebook.github.io/react-native/releases/0.42/docs/image.html#props
or use resizeMode in image Props 或者在图片道具中使用resizeMode
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.