react-native - 图像调整封面 - 保留图像的左上角

Question

我有一张需要在某些设备上裁剪的大图片，但保持图片左上角的原样非常重要，因为它包含一些重要内容。

 <View style={{flex:1}}>
     <Image source={MY_IMAGE} 
        resizeMode="cover"
        style={{
          flex: 1.8,
          width: null,
          height: null
        }}
    />
    <View style={{ flex: 1 }}>
      //other content
    </View>
 </View>

^这非常接近我想要的，但默认情况下它看起来像 resizeMode:"Cover"只是放大图像的中心，切断我的重要内容。

有什么方法可以根据 x:0, y: screenHeight 之类的东西来完成图像大小调整，以便它保持图像的左上角并从右下角调整大小？

Answer 1

导入必要的包

import { StyleSheet, Image, Dimensions } from 'react-native';

你的 img 元素

<Image style={styles.images} resizeMode="stretch" source={{ uri: 'src here' }} />

在底部添加这个样式

const styles = StyleSheet.create({
    images: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').width / 2
    }
});

试试这个，即使您旋转设备，图像宽度也会动态设置。