React native 包含图像比率的全宽图像不会在本机中拉伸

我试图添加一个总是100%宽度的图像，但是高度被拉伸，包含图像的比率

我正在容器中添加图像：

 <View style={styles.imageContainer}>
     <Image style={styles.image} source={require('../../assets/images/image.png')}/>
 </View>

图像背景显示图像为100%宽度（红色背景），但源未拉伸。实现以下结果的正确方法是什么

试试：

import {Dimensions} from 'react-native';

const deviceWidth = Dimensions.get('window').width;

.............
.............

const styles = StyleSheet.create({

    image: {
        ....
        width: deviceWidth,
        resizeMode: 'stretch',
        .....
    }
}

---

您可以从导入此库开始：

import Dimensions from 'react-native';

然后全局定义：

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

编写代码的正确方法是：

const styles = StyleSheet.create({
    imageContainer: {
        flex: 1,
        height: height,
    },

    image: {
        width: width,
        resizeMode: 'contain',
        backgroundColor: 'red',
    }
}

---

我现在明白你的意思了。你能试试resizeMode:“拉伸”吗。如果不起作用，您可能必须手动将

marginRight:-20

和

marginLeft:-20

添加到图像容器中。如果拉伸图像，则图像的底部会被剪切。哦，我跳过了“拉伸”部分。很有效，谢谢！如您所见，图像宽度已经是全宽（红色背景）。所以它不会改变任何事情。

const styles = StyleSheet.create({
    imageContainer: {
        flex: 1,
        height: height,
    },

    image: {
        width: width,
        resizeMode: 'contain',
        backgroundColor: 'red',
    }
}