React Native报错：Element type is invalid 问题求助

报错信息 #

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.

排查及修复方案 #

1. 修复NativeBase组件版本不兼容问题（核心原因） #

你使用NativeBaseProvider说明是NativeBase v3+版本，但代码里用了v2的Container、Header(searchBar)等废弃组件，这些组件在v3中已被移除，导致导入后为undefined，引发报错。

修改ProductContainer.js的NativeBase相关代码，适配v3：

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, ActivityIndicator, FlatList } from 'react-native';
import { Box, HStack, Input, Icon, Text } from 'native-base';
import Ionicons from '@expo/vector-icons/Ionicons'; // 先执行安装：expo install @expo/vector-icons

import ProductList from './ProductList';

const data = require('../../assets/data/products.json');

const ProductContainer = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        setProducts(data);
        return () => setProducts([]);
    }, []);

    return (
        <Box flex={1}>
            {/* 自定义搜索栏替代旧版Header searchBar */}
            <Box bg="blue.500" p={3}>
                <HStack alignItems="center" bg="white" borderRadius={5} px={2}>
                    <Icon as={Ionicons} name="ios-search" color="gray.500" />
                    <Input placeholder="Search" flex={1} ml={2} />
                </HStack>
            </Box>
            <Box p={4}>
                <Text fontSize="lg">Product Container</Text>
                <Box mt={12}>
                    <FlatList
                        data={products}
                        numColumns={2}
                        renderItem={({ item }) => <ProductList key={item.id} item={item} />}
                        keyExtractor={(item) => item.name}
                    />
                </Box>
            </Box>
        </Box>
    );
};

export default ProductContainer;

2. 检查自定义Header组件（App.js中导入的Header） #

打开./Shared/Header.js，确认组件导出方式：

• 若为默认导出，确保结尾有export default Header;，导入方式import Header from './Shared/Header';正确
• 若为命名导出，需改为import { Header } from './Shared/Header';，且组件导出为export const Header = () => {...}

3. 确认ProductList组件的导出逻辑 #

• 打开ProductList.js，检查导出语句：
  • 默认导出：export default ProductList; → 导入import ProductList from './ProductList';
  • 命名导出：export const ProductList = () => {...} → 导入import { ProductList } from './ProductList';

4. 清理项目缓存 #

执行以下命令重启项目，消除缓存导致的异常：

# Expo项目
expo start --clear

# 纯React Native项目
npx react-native start --reset-cache

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