我想在不影响其质量的情况下在View
中使用Image
。我不想裁剪图像或拉伸它。我也尝试使用ImageBackground
.
这是我的项目:
https://snack.expo.io/r1kJ_rD5V?fbclid=IwAR0CVRu3YyQnbdVo9t2Vy1ygN-fGapT5coCQe-JUARJ3KNkkFNpx0KIh-OI
我怎样才能做到这一点?
首先,我们需要获取屏幕宽度的屏幕尺寸;
const { width } = Dimensions.get('window');
之后,我们需要指定一个图像画布来绘制我们的图像,并设置resizeMode = {"contain"}
以保持图像的纵横比。
_renderItem = item => {
return (
<Image
style={{
width: width, // We need to give specific width to place images
height: '100%', // We need to set height to 100%
}}
source={item.images}
resizeMode={'contain'}
/>
);
};
现在我们需要将屏幕高度划分为 70:30
;
return (
<View style={styles.container}>
<FlatList
style={{ height: '70%' }} // We need to share the screen height with the View("A small view")
data={images}
renderItem={({ item }) => this._renderItem(item)}
horizontal={true}
showsHorizontalScrollIndicator={false}
pagingEnabled={true}
/>
<View style={{ height: '30%' }}>
<Text>A small view</Text>
</View>
</View>
);
最后一件事是设置一个填充值以将视图与状态栏分开;
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20, // Just for iOS
},
});
你试过调整大小模式="包含"还是"封面">
https://facebook.github.io/react-native/docs/image.html#resizemode