图像调整大小封面 - 保持图像的左上角

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：“封面”只是放大图像的中心，切断了我的重要内容。

有没有办法根据像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
    }
});

尝试此操作即使您旋转设备，图像宽度也会动态设置。