React Native中StackNavigator渲染警告排查：登录页无法正常显示

每次运行代码都会收到如下警告：

Warning: React.jsx: 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 StackNavigator.

代码本该显示登录页面，请问问题出在哪里？

App.js #

//import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import React, { useState, useEffect } from 'react';
import { firebase } from './config';

//import HomeScreen from './Screens/Home'
//import SettingsScreen from './Screens/Settings'
import Login from "./Screens/Login";
import Registration from "./Screens/Registration";
import Dashboard from "./Screens/Dashboard";

import Header from "./comp/Header";



//const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();



function App() 
{
  const [initializing, setinitializing] = useState(true);
  const [user, setUser] = useState();


  // Handle user state changes 
  function onAuthStateChanged(user) {
    setUser(user);
    if (initializing) setinitializing(false)
  }

  useEffect(() => {
    const subscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber;
  }, []);

  if (initializing) return null;

  if (!user) {
    return (
      <Stack.Navigator>
      <Stack.Screen
          name="Login"
          component={Login}
          options={{
            headerTitle: () => <Header name="Steven McWilliams " />,
            headerStyle: {
              height: 150,
              borderBottomLeftRadius: 50,
              borderBottomRightRadius: 50,
              backgroundColor: '#00e4d0',
              shadowColor: '#000',
              elevation: 25
            }
          }}
        />
        
        <Stack.Screen
          name="Registration"
          component={Registration}
          options={{
            headerTitle: () => <Header name="Steven McWilliams " />,
            headerStyle: {
              height: 150,
              borderBottomLeftRadius: 50,
              borderBottomRightRadius: 50,
              backgroundColor: '#00e4d0',
              shadowColor: '#000',
              elevation: 25
            }
          }}
        />
      </Stack.Navigator>
    );
  }

  return (
    <Stack.Navigator>
      <Stack.Screen
          name="Dashboard"
          component={Dashboard}
          options={{
            headerTitle: () => <Header name="Dashboard " />,
            headerStyle: {
              height: 150,
              borderBottomLeftRadius: 50,
              borderBottomRightRadius: 50,
              backgroundColor: '#00e4d0',
              shadowColor: '#000',
              elevation: 25
            }
          }}
        />
    </Stack.Navigator>
  );
}
      
export default () => {
  return (
    <NavigationContainer>
      <App />
    </NavigationContainer>
  )
}

Header.js #

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <View>
        <Text> Header </Text>
      </View>
    );
  }
}

export default Header;

问题原因与修复方案 #

这个警告的核心是某个被StackNavigator引用的组件实际是undefined，结合代码来看，问题大概率出在以下几点：

1. 登录/注册/仪表盘组件未正确导出 #

你在App.js中导入了Login、Registration、Dashboard三个组件，但未提供它们的代码。请检查这三个文件：

• 确保每个组件都使用export default导出（比如Login组件末尾必须有export default Login;）
• 示例正确的Login组件写法：

import React from 'react';
import { View, Text, TextInput, Button } from 'react-native';

const Login = () => {
  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <Text>登录页面</Text>
      {/* 这里添加登录相关的输入框、按钮等 */}
    </View>
  );
};

export default Login;

2. 组件文件路径错误 #

确认./Screens/Login、./Screens/Registration、./Screens/Dashboard这些路径是否与实际文件位置一致：

• 检查文件夹名称是否正确（比如是否是Screens而非screen，大小写敏感）
• 检查文件是否存在于对应目录下

3. 其他排查点 #

• Header组件的导入路径./comp/Header是否正确，确认comp文件夹存在且Header.js在其中（你的Header代码导出正确，这部分大概率没问题）
• 确认React Navigation版本兼容性：你的createStackNavigator写法符合v5+版本要求，如果是更旧版本可能需要调整，但这个可能性较低

按照以上步骤排查后，组件就能被正确识别，警告会消失，登录页面也能正常显示。

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