По какой-то причине мое фоновое изображение не отображается

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

Вы пытались импортировать компонент Image в BackGroundImage и BackGroundImage в TestBackgroundImage?

// 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 2

Вместо использования изображения используйте ImageBackGround напрямую

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

Answer 3

Это может быть потому, что вы устанавливаете ширину и высоту null.высота и ширина должны иметь значение, иначе изображение не отображается.Пожалуйста, попробуйте присвоить значение высоты и ширины, например,

backgroundImage: {
 flex: 1,
 width: 50,
 height: 50,
 resizeMode: 'cover'
},