TypeError：未定义不是对象（评估“asset.scales”）答案

【问题标题】：TypeError: undefined is not an object (evaluating 'asset.scales')TypeError：未定义不是对象（评估“asset.scales”）
【发布时间】：2020-02-09 10:41:04
【问题描述】：

我对 React Native 很陌生，但我正在尝试使用 ImageBackground 组件添加一个 png 作为背景图像。我在项目目录的“资产”文件夹中有 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;

【问题讨论】：

标签： react-native

【解决方案1】：

我有类似的问题，“Image”组件和类似的错误“TypeError: undefined is not an object (evalating 'asset.scales')”。这个问题的解决方法很简单，改一下：

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

到：

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

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

【讨论】：

【解决方案2】：

最好使用下面的代码

import {ImageBackground} from "react-native";

只需从导入行中删除 -web

【讨论】：