如何在React Native Android App中显示图像？

Question

我希望图像占据设备屏幕的整个宽度。我尝试了多个CSS代码，但并没有占用整个屏幕的宽度。

代码：

<View style={styles.container}>
                <View>
                    <Image source={require('./Images/rectangle/rectangle.png')}  style={styles.backgroundImage}>

                    </Image>

                </View>
            </View>

const styles = StyleSheet.create({
    container: {
       flex: 1
    },
    backgroundImage: {
        height: 200,
        flexDirection: 'column',
        alignSelf: 'stretch'
    }
});

css上方不起作用，图像右侧出现空白，请参见屏幕截图：

我还添加了带有不同后缀的图像，以使其适用于不同的屏幕，请参见以下屏幕截图：

Answer 1

尝试一下：

backgroundImage:{
  width: Dimension.get('window').width ,
  alignSelf: 'center',
  height: 200,
}