反应页面之间的导航

Question

我收到组件异常错误。找不到屏幕“主页”的“组件”、getComponent 或“儿童”道具。

我浏览了一些谷歌搜索，我唯一能找到的是我需要一起使用 export default X 和 import X from 'path' 以及常规的 export 和 import { X } from 'path'。

我无法弄清楚我在这里做错了什么。有人可以帮忙吗？

这是我的 HomePage.jsx：

const HomePage = () => {
  return (
    <View>
      <Text>Home Page</Text>
    </View>
  );
};

export default HomePage;

这是我的 App.jsx：

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomePage from './src/pages/HomePage';
import TablePage from './src/pages/TablePage';

const App = () => {

  return (
    <NavigationContainer>
      <View style={styles.container}>
        <Text>Open up App.jsx to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
      <TabNavBar />
    </NavigationContainer>
  );
};

const Tab = createBottomTabNavigator();

function TabNavBar() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" compotent={HomePage} />
      <Tab.Screen name="Table" compotent={TablePage} />
    </Tab.Navigator>
  );
}

Answer 1

请更换

<Tab.Screen name="Home" compotent={HomePage} /> 

与

<Tab.Screen name="Home" component={HomePage} />

“Table”也一样。