react导航栏菜单

React Navigation是一个广泛使用的JavaScript库，用于在React应用中管理页面导航。它提供了一套易于理解和集成的API，可以创建复杂的导航栏菜单，包括底部导航、抽屉式导航、堆栈导航等常见模式。

1. **底部导航** (Bottom Tab Navigator): 这是最常见的导航风格，底部有一个包含多个选项卡的固定栏，每个选项代表一个独立的屏幕或功能区。

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const BottomNav = createBottomTabNavigator();
<BottomNav.Navigator>
  <BottomNav.Screen name="Home" component={HomeScreen} />
  <BottomNav.Screen name="Details" component={DetailsScreen} />
</BottomNav.Navigator>;

2. **堆栈导航** (Stack Navigator): 适用于需要按照线性顺序展示屏幕的场景，新打开的页面会添加到当前屏幕顶部。

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
<Stack.Navigator>
  <Stack.Screen name="Login" component={LoginScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>;

3. **抽屉式导航** (DrawerNavigator): 展示在一个侧滑面板中的导航结构，常用于手机应用的主菜单。

import { DrawerNavigationProp } from '@react-navigation/native';
function App() {
  const drawer = useNavigation<DrawerNavigationProp>();
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
}

以上都是React Navigation的基本用法，你可以根据项目需求调整样式、动画和其他配置。