如何解决React Navigation中「找不到组件、getComponent或子元素」错误？

解决expo-font的Font.loadAsync渲染Ionicons的原有错误后，出现了「无法找到屏幕对应的组件、getComponent或子元素」错误。已确认所有组件路径配置正确，自行排查及借助AI协助后问题仍未解决。预期修正语法后错误消失并正常显示图标，但实际未达预期。

相关代码 #

App.js导航代码

// import { StatusBar } from 'expo-status-bar';
import * as Font from "expo-font"
import { StyleSheet,
  Text,
  Platform, 
  View, 
  SafeAreaView, 
  Button, 
  Alert,
  Dimensions} from 'react-native';
import {useDeviceOrientation, useDimensions} from '@react-native-community/hooks'
import React, {useCallback} from "react";
import WelcomeScreen from './app/assets/screens/WelcomeScreen';
import SigningInFirst from "./app/assets/screens/SigningInFirst";
import SettingsScreen from "./app/assets/screens/SettingsScreen";
import {useNavigation, NavigationContainer} from "@react-navigation/native"
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import SecondLoginScreen from './app/assets/screens/SecondLoginScreen';
import ThirdSignStep from './app/assets/screens/ThirdSignStep';
import LoginScreen from './app/assets/screens/LoginScreen';
import MapScreen from './app/assets/screens/MapScreen';
import BottomTabNavigation from './app/assets/screens/BottomTabNavigation';
import MessagingScreen from './app/assets/screens/MessagingScreen'
import Profile from './app/assets/screens/Profile'
const Stack = createNativeStackNavigator();
export default function App() {
// const orient  = useDeviceOrientation();
// const handlePress = () => console.log("ArrivTrack")
// const navigation = useNavigation();


  return (
    // <WelcomeScreen />
    // <SignInJs />
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name = "WelcomeScreen" component={WelcomeScreen} options={{headerShown:false}} />
        <Stack.Screen name = "Message" component={MessagingScreen} options={{headerShown:false}} />
        <Stack.Screen name = "Profile" component={Profile} options={{headerShown:false}} />
        <Stack.Screen name = "Step1" component={SignInJs} options={{headerShown:false}} />
        <Stack.Screen name = "Step2" component={SecondLoginScreen} options={{headerShown:false}} />
        <Stack.Screen name = "Step3" component={ThirdSignStep} options={{headerShown:false}} />
        <Stack.Screen name = "LoginPage" component={LoginScreen} options={{headerShown:false}} />
        <Stack.Screen name = "MapScreen" component={MapScreen} options={{headerShown:false}} />
        <Stack.Screen name = "SettingsScreen" component={SettingsScreen} options={{headerShown:false}} />
        <Stack.Screen name = "BottomTabNavigation" component={BottomTabNavigation} options={{headerShown:false}}/>
      </Stack.Navigator>
    </NavigationContainer>
    
  );
}

const stylesContainer = {backgroundColor:"black"}
const textStyles = {color:"white"}
const buttonStyles = {color:"white", backgroundColor:"dodgerblue"}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    paddingTop: Platform.OS === 'android' ? 20: 0,
    justifyContent: "center",
    alignItems: "center",
    // color: "white",
  },
});

字体加载代码

import * as Font from "expo-font";
export async function loadFontsAsync(){
    await Font.loadAsync({
        ionicons:require("./Ionicons.ttf")
        
    })
}

Profile页面代码

import * as React from 'react';
import { View, Text, Ionicons } from 'react-native';
import { loadFontsAsync } from './loadFonts';

const Profile = () => {
  const [fontsLoaded, setFontsLoaded] = React.useState(false);

  React.useEffect(() => {
    const loadFonts = async () => {
      await loadFontsAsync();
      setFontsLoaded(true);
    };

    loadFonts();
  }, []);

  if (!fontsLoaded) {
    return <Text>Loading fonts...</Text>; // Or render a loading indicator
  }

  return (
    <View>
      <Ionicons fontFamily="ionicons" name="person" color="red" size={36} />
      {/* Other components */}
    </View>
  );
};

export default Profile;

错误提示 #

屏幕显示「无法找到屏幕对应的组件、getComponent或子元素」

解决方案 #

1. 修复导航组件引用错误

App.js中导入了SigningInFirst组件，但导航配置里错误使用了不存在的SignInJs，直接导致导航找不到对应组件。修改导航配置：

// 原错误代码
<Stack.Screen name = "Step1" component={SignInJs} options={{headerShown:false}} />
// 修改后
<Stack.Screen name = "Step1" component={SigningInFirst} options={{headerShown:false}} />

2. 优化Ionicons使用方式

expo内置了@expo/vector-icons包，无需手动加载字体文件，直接使用更稳定：

• 安装依赖（未安装时执行）：

npx expo install @expo/vector-icons

• 修改Profile页面代码：

import * as React from 'react';
import { View, Text } from 'react-native';
import Ionicons from '@expo/vector-icons/Ionicons';

const Profile = () => {
  return (
    <View>
      <Ionicons name="person" color="red" size={36} />
      {/* 其他组件 */}
    </View>
  );
};

export default Profile;

3. （可选）全局字体加载优化

若需加载自定义字体，建议在App层级全局加载，避免页面重复请求：

import * as Font from "expo-font";
import { useState, useEffect } from "react";
// ...其他导入

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    async function loadFonts() {
      await Font.loadAsync({
        // 此处添加自定义字体，Ionicons无需在此加载
        // customFont: require('./path/to/your-font.ttf')
      });
      setFontsLoaded(true);
    }
    loadFonts();
  }, []);

  if (!fontsLoaded) {
    return <Text>加载中...</Text>;
  }

  // 导航代码...
}

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