React Native App.js渲染错误求助：react-navigation导航栏问题

报错信息 #

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, 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 App.,
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)

问题原因 #

1. 导入导出不匹配：MainContainer是默认导出，App.js中误用了命名导入方式，导致组件无法正确加载。
2. 变量名大小写不一致：MainContainer.js中定义的屏幕名称变量为HomeScreenName、HistoryName，但使用时错误写成小写的homeName、historyName，导致Tab.Screen的name属性为undefined，触发渲染错误。

修复方案 #

修改App.js代码 #

将命名导入改为默认导入：

import * as React from 'react';
import { View, Text } from 'react-native';
// 修正导入方式
import MainContainer from './navigation/MainContainer';

function App(){
  return(
    <MainContainer/>
  );
}

export default App;

修改MainContainer.js代码 #

统一变量名大小写，确保使用的变量与定义一致：

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer, TabActions} from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons'
//Screens
import HistoryScreen from './screens/HistoryScreen';
import HomeScreen from './screens/HomeScreen';
import LocationScreen from './screens/LocationScreen';
//ScreenNames
const HistoryName='HistoryScreen';
const HomeScreenName='HomeScreen';  
const LocationName='LocationScreen';

const Tab= createBottomTabNavigator();
export default function MainContainer(){
    return(
        <NavigationContainer>
            <Tab.Navigator
            initialRouteName={HomeScreenName}
            screenOptions={({route}) => ({
                tabBarIcon: ({focused,color,size}) => {
                    let iconName;
                    let rn=route.name;
                    // 修正变量名匹配
                    if(rn === HomeScreenName){
                        iconName = focused ? 'home' : 'home-outline';
                    }
                    else if (rn === HistoryName){
                        iconName = focused ? 'history' : 'history-outline';
                    }
                    else if (rn ===  LocationName){
                        iconName = focused? 'location' : 'location-outline';
                    }
                  return <Ionicons name={iconName} size={size} color={color}/>
                },
            })}
            >
            {/* 修正变量名匹配 */}
            <Tab.Screen name={HomeScreenName} component={HomeScreen}/>
            <Tab.Screen name={HistoryName} component={HistoryScreen}/>
            <Tab.Screen name={LocationName} component={LocationScreen}/>
            </Tab.Navigator>
            
        </NavigationContainer>
    )
}

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