反应页面之间的导航

Question

我遇到组件异常错误。无法为屏幕 'HomePage.'

找到 'component'、getComponent 或 'children' 道具

然后我浏览了一些 google 搜索，我唯一能找到的是我需要同时使用 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”相同。

反应页面之间的导航

React navigation between pages

react-native

react-native-navigation