javascript - 如何在反应原生 android 应用程序中显示图像？

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 不起作用，我在图像右侧得到空白，请参见屏幕截图：

我还添加了具有不同后缀的图像，以便它适用于不同的屏幕，请参见下面的屏幕截图：

标签： javascriptcssreactjsreact-native

Answer 1

试试这个：

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