渲染错误元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义

Question

我正在尝试从 assets 文件夹中导入 react-native 上的图像（包含所有图像）。但是，当我在 IOS 模拟器上导出图像时，图像并没有编译。我认为添加我的assets 文件（包含所有图像）是一个只读文件很重要。我在资产文件夹的底部附加了一张图片。除了那张图片，我还附上了我在使用 IOS 模拟器时遇到的两个错误的屏幕截图。

感谢您的宝贵时间！

现在，为了更清楚，这里是我的代码：

import React from 'react';

import  { ImageBackround, StyleSheet, View, Image, Text} from 'react-native';

function WelcomeScreen(props){
    return(
        <>
        <ImageBackround
        style={styles.background}
        source={require('./assets/icon.png')}
        >
        <View style={styles.logoContainer}>

        <Image style={styles.logo} source={require('./assets/favicon.png')}/>
        <Text> Sell what you dont need!</Text>
        </View>
        <View style ={styles.registerButton}></View>
        < View style= {styles.loginButton}></View>
        </ImageBackround>
        </>
    )
}
const styles = StyleSheet.create({
    background: {
        flex:1,
        alignItems: "center" ,
    
    },
    loginButton: {
        width: "100%",
        height: 70,
        backgroundColor: "#4ecdc4",

    },
    logo: {
        width: 100,
        height: 100,

    },
    logoContainer: {
        position: "absolute",
        top: 70,
        alignItems:"center",
    
    },
    registerButton: {
        width: "100%",
        height: 70,
        backgroundColor: "#4ecdc4"
    },
});



export default WelcomeScreen;

这里按顺序附上assets 文件的图像，以及 Ios 模拟器给我的 2 个错误：

Answer 1

您能否尝试在资产中创建一个文件来导出所有图像并从您的 WelcomeScreen 调用它。

像这样在 assets 文件夹中创建 index.js 文件

export const Images ={
   adaptive:require('./adaptive.png'),
   favicon:require('./favicon.png'),
   icon:require('./icon.png'),
   splash:require('./splash.png')
}

并像这样更改您的 WelcomeScreen

import React from 'react';
import  { ImageBackround, StyleSheet, View, Image, Text} from 'react-native';
import {Images} from './assets';

function WelcomeScreen(props){
    return(
        <>
        <ImageBackround
        style={styles.background}
        source={Images.icon}
        >
        <View style={styles.logoContainer}>

        <Image style={styles.logo} source={Images.favicon}/>
        <Text> Sell what you dont need!</Text>
        </View>
        <View style ={styles.registerButton}></View>
        < View style= {styles.loginButton}></View>
        </ImageBackround>
        </>
    )
}
const styles = StyleSheet.create({
    background: {
        flex:1,
        alignItems: "center" ,
    
    },
    loginButton: {
        width: "100%",
        height: 70,
        backgroundColor: "#4ecdc4",

    },
    logo: {
        width: 100,
        height: 100,

    },
    logoContainer: {
        position: "absolute",
        top: 70,
        alignItems:"center",
    
    },
    registerButton: {
        width: "100%",
        height: 70,
        backgroundColor: "#4ecdc4"
    },
});



export default WelcomeScreen;