React-Native, проблемы с импортом и использованием ImageBackground

Question

Я изучаю React Native, и для одного из моих первых приложений я хочу, чтобы вы включили фоновое изображение, поэтому я включаю import {ImageBackground} from 'react-native', чтобы использовать его.

Когда я пытаюсь использовать его в своем код, мой android эмулятор запускает эту ошибку:

Инвариантное нарушение: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получили : undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

Это весь мой код, как видите, у меня нет слишком много, поэтому я не знаю, в чем проблема.

import React from 'react'
import {Platform, View, Text, ImageBackground, StyleSheet} from 'react-native'
import {Button} from 'native-base'

var myImage = require('./assets/icon/landing.jpg')

export default class App extends React.Component{
  render(){
    return(
      <View style = {styles.container}>
        <ImageBackground source = {myImage} style = {styles.bgImage}>
          <Text>The button is right bellow</Text>
          <Button><Text>Hello World</Text></Button>
        </ImageBackground>
      </View>
    );
  }
}

const styles = StyleSheet.create ({
  container: {
    borderWidth: 1,
    flex: 1,
    marginTop: Platform.OS === "android" ? 24 : 0
  },
  bgImage: {
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center'
  }
});

Я пытаюсь следовать документации React Native на их официальной странице, но не вижу ошибки: https://reactnative.dev/docs/imagebackground#__docusaurus

Я использую expo для создания проекта.

Answer 1

Эта ошибка не вызвана ImageBackground. Проверяя ваш код, я понял, что вы пытаетесь использовать StyleSheet, но забыли импортировать его из react-native.

Попробуйте следующее:

import {Platform, View, Text, ImageBackground, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
    container: {
      borderWidth: 1,
      flex: 1,
      marginTop: Platform.OS === "android" ? 24 : 0
    }
});

Answer 2

Согласно документации response-native ImageBackground, вы должны указать некоторые атрибуты ширины и высоты для работы ImageBackground.