ImageBackground不会出现

Question

我一直在尝试渲染一个背景图像，它运行了，但什么也没有出现。我在Windows上通过Android运行这个程序。代码如下：

import React, { Component } from 'react';

从‘react-native’导入{视图，图像，文本，ImageBackground }；

class Background extends Component {
    render() {
        return (
      <ImageBackground
        source={{uri: 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg'}}
        style={{flex: 1, width: '100%'}}

      >
        <View >
          <Text>Test</Text>
        </View>
      </ImageBackground>
        );
    }
  }

导出默认背景；

我不确定是代码本身没有正确地拉动图像本身，还是样式需要调整。谢谢你的帮助！

Answer 1

ImageBackground组件的样式属性中需要一个高度值。RN对此很挑剔。

Answer 2

将您的ImageBackground组件包装在容器组件中。

class Background extends Component {
    render() {
        return (
      <Container>
        <ImageBackground
        source={{uri: 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg'}}
        style={{flex: 1, width: '100%'}}>
         <View >
           <Text>Test</Text>
         </View>
       </ImageBackground>
      </Container>
        );
    }
  }

Answer 3

对我来说只在我使用

require()

喜欢这篇文章ImageBackground not working when i call source from state

source={require( 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg')}

(我试图导入图像并调用内部源代码，但没有出现，甚至在样式高度和宽度中声明，只有在使用require()之后才出现，为什么？我不知道)