Question

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

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属性specified by this answer，但没有用。

Answer 1

在查看源代码之后编辑答案。使您的构造函数如下：

 constructor(props){
        super(props)
        this.backgroundImage = images[Math.floor(Math.random() * 16)]

以及您的ImageBackground组件如下：

<ImageBackground source={{uri: this.backgroundImage}}>

Answer 2

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

如果单独渲染image属性，那绝对正确吗？例如

{this.backgroundImage}

在chrome中，图片是在“网络”标签中加载的，还是显示错误

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

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

样式：

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

反应本机背景图像只是一个白屏

2 个答案: