反应页面之间的导航

Posted 2023-02-16

【中文标题】反应页面之间的导航

【英文标题】：React navigation between pages

【发布时间】：2021-12-10 13:42:06

【问题描述】：

我收到组件异常错误。找不到屏幕“主页”的“组件”、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>
  );

【问题讨论】：

在标签声明中将 compotent 修复为 component。正如所提到的错误，您的选项卡声明未能找到相应的组件来为您的路线呈现，因为您的路线声明中有错字。

哦。我的。实际的。上帝。太感谢了！！又一天想知道我为什么选择这条路:)

【参考方案1】：

请更换

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

与

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

“Table”也一样。