javascript - 如何使用 flexbox 和 React-Native 使裁剪后的图像填充所有视图?
问题描述
我想制作一个裁剪图像来填充我的应用程序中的所有视图。
我的代码现在是正确的:
但我希望这个荷马吃甜甜圈的小方块填满整个屏幕,就像我做的这个模拟一样:
这是我的代码:
import * as React from 'react';
import { View, Image, StyleSheet } from 'react-native';
export default class CroppedImage extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.cropped}>
<Image
style={styles.image}
source={{
uri:
'https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png'
}}
/>
</View>
</View>
);
}
}
const OFFSET_LEFT = 0;
const OFFSET_TOP = 0;
const IMAGE_WIDTH = 239 * 1.5;
const IMAGE_HEIGHT = 391 * 1.5;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#6699CC'
},
bg: {
opacity: 0.25,
width: IMAGE_WIDTH,
height: IMAGE_HEIGHT
},
image: {
marginLeft: -OFFSET_LEFT,
marginTop: -OFFSET_TOP,
width: IMAGE_WIDTH,
height: IMAGE_HEIGHT
},
cropped: {
width: 150,
height: 150,
overflow: 'hidden',
position: 'absolute'
}
});
这里有什么帮助吗?
解决方案
尝试将属性 resizeMode 添加到 Image 中,如下所示:
<Image
style={styles.image}
source={{
uri:'https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png'
}}
resizeMode:'contain'
/>
让我知道它是否有效!