如何使用React Navigation和Class组件创建底部选项卡栏

Question

我看过很多例子，展示了它如何与Function组件一起工作，但问题是我如何与Classes一起工作？我没有找到一个例子！

这就是它与功能的工作方式：Snack

这件事我真的需要帮助！

Answer 1

我很高兴让您知道，从react navigation 6开始，类组件完全可以做到这一点！

yarn add @react-navigation/bottom-tabs

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
class MainPage extends React.Component<any, any> {
render() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
}