React Navigation配置底部标签导航报错找不到HomePage的component属性如何解决

你代码中的Tab.Screen组件属性名拼写错误，你写的是compotent，React Navigation要求的正确属性名为component，拼写不匹配导致框架无法识别到你传入的页面组件，才抛出找不到对应属性的报错。你的导出、导入语法完全符合规范，没有问题。

1. 修改App.jsx中TabNavBar函数内的Tab.Screen属性名即可解决报错：

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

2. 可选布局优化：你当前在NavigationContainer下同时渲染了顶部固定View和TabNavBar，会导致两个视图堆叠展示。如果需要保留顶部文本区域，建议调整结构如下，避免布局异常：

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

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