错误：元素类型无效：应为字符串

Question

我创建了一个待办事项应用程序，但是当我在我的应用程序中显示虚拟数据时，它显示了这个错误。

 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `MainScreen`.

This error is located at:
    in RCTView (at View.js:34)
    in View (at MainScreen.js:72)
    in RCTView (at View.js:34)
    in View (at MainScreen.js:71)
    in RCTView (at View.js:34)
    in View (at MainScreen.js:67)
    in MainScreen (at App.js:18)
    in App (at renderApplication.js:47)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40)

我检查了我的导入，但我未能解决错误。这是我的主屏幕代码

import React, {useState} from 'react'
import {ScrollView, FlatList, View, Text, StatusBar, StyleSheet} from 'react-native'
import {MaterialCommunityIcons, AntDesign} from 'react-native-vector-icons'
import {} from 'react-native-gesture-handler'

import Colors from '../constants/Colors'
import Task from '../components/Task'

const tasks = [{
    task: "Morning Walk",
    icon: "hiking",
    theme: "#008b8b",
    stamp: "Today . 8am"
}, 
{
    task: "Meet with HR",
    icon: "account-tie",
    theme: "#37003c",
    stamp: "Today . 12 pm"
}, 
{
    task: "Shopping with Family",
    icon: "cart",
    theme: "#fed132",
    stamp: "Tomorrow . 3pm"
},
{
    task: "Time for Gym",
    icon: "weight",
    theme: "#008b8b",
    stamp: "Saturday . 4pm"
}]

var Task = ({task, icon, theme, stamp}) => {
    return(
        <View style = {styles.task}> 
            <View style = {{flexDirection: "row", alignItems: 'center'}}> 
                <MaterialCommunityIcons 
                    name = {icon}
                    size = {30} 
                    style = {{color: theme, marginRight: 5, }}
                />
                <View> 
                    <Text style = {{ fontSize: 16 }}>{task}</Text> 
                    <Text style = {{ color: Colors.greyish}}>{stamp}</Text>
                </View>
            </View>
            <View style = {{flexDirection: "row"}}>
                <MaterialCommunityIcons 
                    name = 'pencil'
                    size = {30} 
                    style = {{color: theme}}
                />
                <MaterialCommunityIcons 
                    name = 'trash-can'
                    size = {30} 
                    style = {{color: theme, marginLeft: 5}}
                />
            </View>
        </View>
    )
}

export default function MainScreen(){
    const [todos, setTodos] = useState([])
    return(
        <View
            style = {styles.container}
        >
            <StatusBar barStyle = 'light-content' backgroundColor = {Colors.themeColor}></StatusBar>
            <View style = {styles.view1}>
                <View 
                    style = {styles.view2}
                >
                    <MaterialCommunityIcons 
                        name = 'text' 
                        size = {30} 
                        style = {{color: Colors.whites}}/>
                    <View 
                        style = {{flexDirection: 'row'}}
                    >
                        <AntDesign 
                            name = 'user' 
                            size = {30} 
                        />

                    </View>    
                </View>
                <View style = {styles.view4}>
                    <Text  
                        style = {{
                            color: Colors.white, 
                            fontSize: 30
                        }}
                    >
                        {"Hello, /nBenjamin"}
                    </Text>
                    <View style = {styles.textInput}>
                        <MaterialCommunityIcons 
                            name = 'magnify' 
                            size = {30} 
                        />
                        <View style = {{flexDirection: 'row'}}>   
                        <MaterialCommunityIcons 
                            name = 'microphone' 
                            size = {30} 
                        />
                        <MaterialCommunityIcons 
                            name = 'tune' 
                            size = {30}
                        />
                        </View>
                    </View>
                </View>
            </View>
            <View style = {styles.taskView}>
                <Text style = {{fontSize: 24}}>Tasks</Text>
                <MaterialCommunityIcons 
                    name = 'plus' 
                    size = {40}
                />
            </View>
            <ScrollView nestedScrollEnabled={true}>
                <FlatList
                    style={{ flex: 1 }}
                    data={tasks}
                    keyExtractor={(item) => item.id}
                    renderItem={({ item }) => <Task 
                                                task = {item.task}  
                                                icon = {item.icon} 
                                                theme = {item.theme}
                                                stamp = {item.stamp}
                                            />
                                            }
                />
            </ScrollView>
        </View>
    )
}

请告诉我我做错了什么，因为我是一个相对初学者反应原生并且未能理解这个错误。

Answer 1

我理解我的错误。我以错误的方式导入矢量图标。我正在像这样导入它们

import {MaterialCommunityIcons, AntDesign} from 'react-native-vector-icons'

虽然他们应该像这样导入

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import AntDesign from 'react-native-vector-icons/AntDesign'

谢谢！

Answer 2

当我遇到这种情况时，我是从 react native 而不是 react native 元素库中导出 Input 组件。

import { View, ActivityIndicator, Input } from 'react-native';
import { Input, Button } from 'react-native-elements';