Question

出于某种原因，所有问题或在线在线视频都无法帮助我解决问题。这是我下面的代码，它仍然显示我的页面而没有图像。如果有人可以帮助我看看有什么毛病，那将是很好的。

import { Image, Text } from 'react-native';
import React, { Component } from 'react';
class BackgroundImage {
render() {
    return (
        <Image source={require('../../images/showcase.jpg')} style= 
{styles.backgroundImage}>
            {this.props.children}
        </Image>
    );
}
}

class TestBackgroundImage extends Component {
render() {
    return (
        <BackgroundImage>
            <Text style={styles.text}>Fullscreen!</Text>
        </BackgroundImage>
    );
}
}

const styles = StyleSheet.create({
backgroundImage: {
    flex: 1,
    width: 50,
    height: 50,
    resizeMode: 'cover'
},

text: {
    textAlign: 'center',
    color: 'white',
    backgroundColor: 'rgba(0,0,0,0)',
    fontSize: 32
}
});

const Home = () => (
<div>
    <h2>Home page</h2>
</div>
);

export default Home;

Answer 1

这可能是因为您正在设置宽度和高度ViewController。高度和宽度必须有值，否则图像不会显示。请尝试分配高度和宽度值，例如

null

Answer 2

您是否尝试过将BackGroundImage中的Image组件和TestBackgroundImage中的BackGroundImage导入？

// In BackGroundImage.js
import Image from 'path';
// In TestBackgroundImage.js
import BackGroundImage from 'path';

我想，您想在Home组件中显示所有组件。所以

//import all components in Home.js
const Home = ()=> {
 return {
   <BackgroundImage/>
   <TestBackgroundImage/>
 }
}

Answer 3

代替使用图像，直接使用ImageBackGround

      class BackgroundImage {
          render() {
                return (
                   <ImageBackground source={require('../../images/showcase.jpg')} style= 
               {styles.backgroundImage}>
        {this.props.children}
    </ImageBackground>
      );
    }
 }

由于某种原因，我的背景图片未显示

3 个答案: