react-native - 类型错误 : undefined is not an object (evaluating 'asset.scales' )

Question

我是 React Native 的新手，但我正在尝试使用 ImageBackground 添加一个 png 作为背景图片成分。我的项目目录中的“ Assets ”文件夹中有 png。当我在 iPhone 上使用 Expo 运行该应用程序时，出现此错误:
TypeError: undefined is not an object (evaluating 'asset.scales')

这是我的代码:

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;

Answer 1

我有类似的问题，“图像”组件和类似的错误“类型错误:未定义不是一个对象(评估'asset.scales')”。
这个问题的解决方法很简单，改成:

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

到:

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

看起来我们从错误的包中导入组件:)