React Native 背景图片只是一个白屏答案

【问题标题】：React native background image is just a white screenReact Native 背景图片只是一个白屏
【发布时间】：2020-12-18 01:04:29
【问题描述】：

我正在使用从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，但没有成功。

【问题讨论】：

这段代码在哪个文件中？在你的 Github 存储库中？
@MarcusMelodious components/soundboard.js 抱歉
尝试直接在 ImageBackground 组件中设置： source={require('../assets/images/default_seal.jpg')} 并查看它是否显示图像。认为问题出在第 222 行： this.backgroundImage = {image:{uri: images[Math.floor(Math.random() * 16)]}} 不确定为什么在构造函数中有这样的内容。看起来您正在将数组而不是字符串传递给 uri。
其实我只是在你的组件中看到了图片文件。如果您要传递图片网址。您必须像这样设置它：source={{ uri: this.backgroundImage }}。

标签： javascript reactjs react-native imagebackground

【解决方案1】：

查看源代码后编辑答案。让你的构造函数像这样：

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

你的 ImageBackground 组件是这样的：

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

【讨论】：

【解决方案2】：

<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 
},

【讨论】：

我的代码已经是这样了，我只是把那个样式保存在styles.container