React Native报错：元素类型无效，请求排查TopNavigation组件问题

报错信息 #

ERROR 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 <TopNavigation>

问题定位与修复步骤 #

1. 修正 TopNavigation 组件的导出方式 #

你的组件导出写法在严格模式下可能导致导出未正确绑定，出现undefined的情况。

原代码：

export default TopNavigation = ({ navigation, page }) => {

修改为以下两种写法之一：

写法一：先声明组件再导出

import { StyleSheet, View, Image } from 'react-native'
import React from 'react'
import logo from '../../assets/Logo.png';
import { icons1, logo2 } from '../Styles/styles';
import { Ionicons } from 'react-native-vector-icons';
import { Entypo } from 'react-native-vector-icons';

const TopNavigation = ({ navigation, page }) => {
    return (
        <View style={page === 'home' ? styles.container : {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: '100%',
            paddingVertical: 10,
            position: 'absolute',
            top: 0,
            zIndex: 100,
            backgroundColor: 'black',
        }}>
            <Entypo name="camera" size={24} color="black" style={icons1}
                onPress={() => navigation.navigate('c')}
            />
            {
                page === 'home' ? <Image source={logo} style={logo2} /> : null
            }
         
            {
                page === 'profile' &&
                <Ionicons name="settings-sharp"
                    size={24}
                    color="black"
                    style={styles.icons11}
                    onPress={() => navigation.navigate('settings')}
                />
            }
        </View>
    )
}

// 补充你遗漏的样式定义
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        paddingVertical: 10,
        // 根据需求补充home页面的其他样式
    },
    icons11: {
        // 补充对应的样式属性
    }
})

export default TopNavigation;

写法二：直接导出函数组件

import { StyleSheet, View, Image } from 'react-native'
import React from 'react'
import logo from '../../assets/Logo.png';
import { icons1, logo2 } from '../Styles/styles';
import { Ionicons } from 'react-native-vector-icons';
import { Entypo } from 'react-native-vector-icons';

export default function TopNavigation({ navigation, page }) {
    return (
        <View style={page === 'home' ? styles.container : {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: '100%',
            paddingVertical: 10,
            position: 'absolute',
            top: 0,
            zIndex: 100,
            backgroundColor: 'black',
        }}>
            <Entypo name="camera" size={24} color="black" style={icons1}
                onPress={() => navigation.navigate('c')}
            />
            {
                page === 'home' ? <Image source={logo} style={logo2} /> : null
            }
         
            {
                page === 'profile' &&
                <Ionicons name="settings-sharp"
                    size={24}
                    color="black"
                    style={styles.icons11}
                    onPress={() => navigation.navigate('settings')}
                />
            }
        </View>
    )
}

// 补充你遗漏的样式定义
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        paddingVertical: 10,
        // 根据需求补充home页面的其他样式
    },
    icons11: {
        // 补充对应的样式属性
    }
})

2. 修复 Home 组件的遗漏导入 #

你的Home组件中使用了AsyncStorage但未导入，这会引发另一个运行时错误，需要添加导入语句：

import AsyncStorage from '@react-native-async-storage/async-storage';

修改后的Home组件开头：

import { StyleSheet, View, StatusBar } from 'react-native';
import React, { useEffect, useState, useCallback } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import BottomNavigation from '../../Components/BottomNavigation';
import TopNavigation from '../../Components/TopNavigation';

3. 额外优化建议 #

• 你在TopNavigation中当page !== 'home'时渲染了空的<Image />组件，建议替换为null，避免不必要的组件挂载
• 确保../Styles/styles中的icons1、logo2样式是正确定义的，避免样式失效

验证修复 #

完成上述修改后，重新打包运行应用，该报错应该会消失。

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