时间戳

首页 > 解决方案 > React Native 背景图片只是一个白屏

javascript - React Native 背景图片只是一个白屏

问题描述

我正在使用从 导入的 ImageBackground 组件，react-native但没有显示图像。只是背景中的白屏

constructor(props){
    super(props)
    this.backgroundImage = {image: {uri: "https://i.myImage.com"}}
}

......

<ImageBackground style={styles.container} resizeMode="stretch" source={this.backgroundImage} onError={this.onError.bind(this)}>
    <AdUnit style={styles.bannerAd} />
    <Board  />
</ImageBackground>

我试过this.backgroundImage改成{image: require('../assets/images/default_seal.jpg')}

我尝试使用此答案指定的 resizeMode 属性，但它不起作用。

标签： javascriptreactjsreact-nativeimagebackground

解决方案

<ImageBackground
  source={yourSourceFile}
  style={{width: '100%', height: '100%'}}
> 
    <....yourContent...>
</ImageBackground>

如果您自己渲染图像属性，它绝对正确吗？例如

{this.backgroundImage}

在 chrome 中是在网络选项卡中加载的图像，或显示错误

页面上有css吗？如果是这样，您可以将其删除并重新测试。另一种选择：

<ImageBackground style={ styles.imgBackground } 
                 resizeMode='cover' 
                 source={require('./Your/Path.png')}>
</ImageBackground>

样式：

imgBackground: {
        width: '100%',
        height: '100%',
        flex: 1 
},

推荐阅读