React native TypeError:undefined不是对象（评估'；资产.比例'；）

我对React Native非常陌生，但我正在尝试使用

ImageBackground

组件添加png作为背景图像。我的项目目录中的“资产”文件夹中有png。当我在iPhone上运行带有Expo的应用程序时，出现以下错误：

这是我的代码：

import React, {useState, Component} from 'react';
import {StyleSheet, Text, View, TextInput, TouchableOpacity, Image} from 'react-native';
import * as Font from "expo-font";
import {ImageBackground} from "react-native-web";

class LoginPage extends Component {

    state = {
        fontLoaded: false,
    };


    async componentDidMount() {
        await Font.loadAsync({
            'Veles-Regular' : require("./assets/fonts/Veles-Regular.otf"),
        });
        console.log('HI');
        this.setState({fontLoaded: true});
    }


    render() {
        return (
            <ImageBackground source={require('./assets/login_splash.png')} style={{width: 100, height: 100}}>
                <View style={styles.loginScreen}>
                    <View style={{flex: 1, justifyContent: 'center'}}>
                        {
                            this.state.fontLoaded ? (
                                <Text style={{fontSize: 60, color: 'white', fontFamily: 'Veles-Regular'}}>App Name</Text>
                            ) : null
                        }
                    </View>
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', width: '85%'}}>
                        <TextInput style={[styles.loginInput, {marginBottom: 5}]} placeholder=' username'
                                   placeholderTextColor={'rgba(255,255,255,0.3)'} textAlign='center'/>
                        <TextInput style={[styles.loginInput, {marginTop: 5, marginBottom: 5}]} placeholder=' password'
                                   placeholderTextColor={'rgba(255,255,255,0.3)'} textAlign='center'/>
                        <View style={{height: 15}}/>
                        <TouchableOpacity onPress={() => {
                        }}>
                            <Text style={{color: 'white', fontWeight: 'bold', fontSize: 24}}>Log in</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={{flex: 2, justifyContent: 'center'}}>
                        <View style={{flex: 9}}/>
                        <Text style={{flex: 1, fontSize: 24, color: 'white', textAlign: 'center'}}>Don't have an
                            account?</Text>
                        <TouchableOpacity style={{color: 'white', fontWeight: 'bold', fontSize: 24}}>
                            <Text style={{color: 'white', fontWeight: 'bold', fontSize: 24, textAlign: 'center'}}>Sign
                                Up</Text>
                        </TouchableOpacity>
                        <View style={{height: 30}}/>
                    </View>
                </View>
            </ImageBackground>
        );
    }
}


const styles = StyleSheet.create({
    loginScreen: {
        flex: 1,
        paddingTop: 50,
        alignItems: 'center',
        justifyContent: 'center',
    },
    loginInput: {
        width: '100%',
        backgroundColor: 'rgb(40,40,40)',
        height: 44,
        fontSize: 24,
        color: 'white',
        borderWidth: 1,
        borderColor: 'rgb(60,60,60)',
        borderRadius: 25
    },
});

export default LoginPage;

import React，{useState，Component}来自'React'；
从“react native”导入{样式表、文本、视图、文本输入、TouchableOpacity、图像}；
从“expo字体”导入*作为字体；
从“react native web”导入{ImageBackground}；
类LoginPage扩展组件{
状态={
错误:，
};
异步组件didmount（）{
等待Font.loadAsync({
“Veles Regular”：要求（“./assets/font/Veles Regular.otf”），
});
console.log（'HI'）；
this.setState（{fontLoaded:true}）；
}
render（）{
返回(
{
这是州政府吗(
应用程序名称
)：null
}
{
}}>
登录
没有一个
账户
签名
向上的
);
}
}
const styles=StyleSheet.create({
登录筛选：{
弹性：1，
paddingTop:50，
对齐项目：“居中”，
为内容辩护：“中心”，
},
登录输入：{
宽度：“100%”，
背景颜色：“rgb（40,40,40）”，
身高：44，
尺寸：24，
颜色：'白色'，
边框宽度：1，
边框颜色：“rgb（60,60,60）”，
边界半径：25
},
});
导出默认登录页面；

我也有类似的问题，包括“图像”组件和类似的错误“TypeError:undefined不是对象（评估“asset.scales”）。 这个问题的解决方案非常简单，更改：

import {ImageBackground} from "react-native-web";

致：

看起来我们从错误的包中导入了组件：）

import React, {useState, Component, ImageBackground} from 'react';