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

【问题标题】：How to display images in react native android app?如何在反应原生 android 应用程序中显示图像？
【发布时间】：2018-09-24 12:21:19
【问题描述】：

我想让图像占据设备屏幕的整个宽度。我尝试了多个 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 不起作用，我在图像右侧出现空白，请参阅屏幕截图：

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

【问题讨论】：

你有一个围绕的不需要。
@MikeM 我想问你。我已经为图像添加了后缀，例如：@2x 、@3x 等，所以它是正确的方法，或者只是添加 rectangle.png 就足够了，但它能够显示在小/大屏幕设备上吗？
你可以只使用 rectangle.png。如果您有多个尺寸的图像（例如，100x100、200x200、300x300），那么是的，@2x 和 @3x 将提供更好的分辨率。不确定是否支持 @4x 和 @5x。

标签： javascript css reactjs react-native

【解决方案1】：

试试这个：

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

【讨论】：

@mojtbaba 我想问我是否为图像添加了后缀，那么它不会选择最适合屏幕的图像吗？