React native 底部选项卡导航器的组件错误

我一直在对自己制作的应用程序进行重新工具化，开始使用类和更多面向对象的样式，并为页面使用单独的文件，而不仅仅是在主文件中的函数中添加所有内容

这是App.js

import 'react-native-gesture-handler';
import React , {Component} from 'react';
import {Button, Text, View, SafeAreaView} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import {homeScreen} from './Screens/Home';
import {addAsset} from './Screens/AddAsset';

const Tab = createMaterialBottomTabNavigator();

class App extends Component {

  render() {
    return(
      <View>

      <Text>Yeet</Text>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Home" component={homeScreen} />
          <Tab.Screen name="Add" component={addAsset} />
        </Tab.Navigator> 
      </NavigationContainer>
      </View>
    );
  }
}

export default App;

导入“反应本机手势处理程序”；
从“React”导入React，{Component}；
从“react native”导入{按钮、文本、视图、安全区域视图}；
从'@react-navigation/native'导入{NavigationContainer}；
从“@react navigation/material bottom tabs”导入{createMaterialBottomTabNavigator}；
从“/Screens/Home”导入{homeScreen}；
从“./Screens/addAsset”导入{addAsset}；
const Tab=createMaterialBottomTabNavigator（）；
类应用程序扩展组件{
render（）{
返回(
耶特
);
}
}
导出默认应用程序；

这里是一个示例屏幕，我正在尝试显示

import 'react-native-gesture-handler';
import React , {Component} from 'react';
import {Button, Text, View, SafeAreaView} from 'react-native';






class homeScreen extends Component {
    render() {
      return(
        <View>
          <Text>Main Page</Text>
        </View>
      );
    }
  }

  export default homeScreen;

导入“反应本机手势处理程序”；
从“React”导入React，{Component}；
从“react native”导入{按钮、文本、视图、安全区域视图}；
类主屏幕扩展组件{
render（）{
返回(
主页
);
}
}
导出默认主屏幕；

我一直收到一个错误，说它找不到一个组件或获取主屏幕的组件道具

---

谁能解释我做错了什么？在这一点上仍然是新的。

您已经完成了一个默认的导出，所以您应该像下面那样导入，这将导致一个未定义的被传递到选项卡导航并导致错误

import homeScreen from './Screens/Home';

去掉花括号可以解决这个问题

另一个建议是使用大写字母（如主屏幕）开始组件名称