React Native中HeaderConfig渲染报错：元素类型无效问题求助

错误信息 #

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 'HeaderConfig'.

问题代码 #

import { useState } from 'react'
// react-native components 
import { Text, View, ScrollView, SafeAreaView } from 'react-native'
// like react router
import { Stack, useRouter } from 'expo-router'

// import contants to style 
import { COLORS, icons, images, SIZES } from '../constants'

// import components. cmd+click to confirm scope 
import { Nearbyjobs, Popularjobs, ScreenHeaderBTN, Welcome } from '../components'

// const home = functional component where we can return view with text inside
const Home = () => {
    const router = useRouter();
        return (
            <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.lightWhite }}>
                <Stack.Screen
                    options={{
                        headerStyle: { backgroundColor: COLORS.lightWhite },
                        headerShadowVisible: false,
                        headerLeft: () => (
                            <ScreenHeaderBTN iconUrl={icons.menu} dimension='60%' />
                        ),
                        headerRight: () => (
                            <ScreenHeaderBTN iconUrl={icons.profile} dimension='100%' />
                        )
                    }}
                />
            </SafeAreaView>
        )
}

export default Home;

解决方法 #

• 检查ScreenHeaderBTN的导出与导入匹配

  • 若ScreenHeaderBTN组件是默认导出（export default ScreenHeaderBTN），需修改导入语句为import ScreenHeaderBTN from '../components/ScreenHeaderBTN'，而非当前的命名导入。
  • 若为命名导出（export const ScreenHeaderBTN = () => {...}），确认../components/index.js中已正确导出该组件（例如export { ScreenHeaderBTN } from './ScreenHeaderBTN'），避免漏导出导致导入为undefined。

• 验证组件文件路径与存在性

  • 确认../components/ScreenHeaderBTN.js（或.tsx）文件存在，路径拼写无错误，大小写匹配（部分系统区分文件名大小写）。

• 检查组件定义有效性

  • 打开ScreenHeaderBTN组件文件，确保它是一个合法的React函数/类组件，没有语法错误，且返回有效的JSX元素（而非undefined）。

内容的提问来源于stack exchange，提问作者codereyes