ImageBackground 不会出现答案

【问题标题】：ImageBackground won't appearImageBackground 不会出现
【发布时间】：2018-05-14 17:07:35
【问题描述】：

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

import React, { Component } from 'react';

从 'react-native' 导入 { View, Image, Text, 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>
        );
    }
  }

导出默认背景；

我不确定代码本身是否没有正确拉取图像，或者是否需要调整样式。感谢您的帮助！

【问题讨论】：

我可能错了，但我猜你错过了height: '100%'。在您的 ImageBackground 组件中。请检查一下好吗？

标签： react-native react-native-android

【解决方案1】：

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

【讨论】：

啊，谢谢！没想到这么挑剔，现在正常显示了。

【解决方案2】：

将您的 ImageBackground 组件包装在 Container 组件中。

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>
        );
    }
  }

【讨论】：

【解决方案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（）之后才声明样式高度和宽度，为什么？我不知道）

【讨论】：