Question

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

import React, { Component } from 'react';

导入{View，Image，Text，ImageBackground}来自＆＃39; react-native＆＃39;;

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组件包装在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>
        );
    }
  }

ImageBackground不会出现

2 个答案: