React 本机背景图片只是一个白屏

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

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

如果您单独渲染图像属性是否绝对正确？例如

{this.backgroundImage}

在chrome是图片在网络选项卡加载，否则显示错误

页面上有 css 吗？如果是这样，您可以删除它并 re-test 它。另一种选择：

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

风格：

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

Answer 2

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

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

你的 ImageBackground 组件是这样的：

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

React 本机背景图片只是一个白屏

React native background image is just a white screen

javascript

reactjs

react-native

imagebackground