React Navigation 核心使用（Stack/Tab/Drawer）

React Navigation 是 React Native 中最主流的导航库。实际开发中80% 以上的场景主要围绕三种导航器Stack Navigator页面栈Bottom Tab Navigator底部标签栏Drawer Navigator侧边抽屉菜单1. 安装React Navigation 7.xnpm install react-navigation/native npm install react-native-screens react-native-safe-area-contextStacknpm install react-navigation/native-stackBottom Tabsnpm install react-navigation/bottom-tabsDrawernpm install react-navigation/drawer2. NavigationContainer所有导航都必须放在 NavigationContainer 中import { NavigationContainer } from react-navigation/native; export default function App() { return ( NavigationContainer {/* Navigator */} /NavigationContainer ); }3. Stack Navigator最常用。适用于首页 ↓ 详情页 ↓ 详情页 ↓ 详情页像浏览器历史记录一样压栈。创建import { createNativeStackNavigator } from react-navigation/native-stack; const Stack createNativeStackNavigator();页面function HomeScreen() { return null; } function DetailScreen() { return null; }注册路由Stack.Navigator Stack.Screen nameHome component{HomeScreen} / Stack.Screen nameDetail component{DetailScreen} / /Stack.Navigator页面跳转navigation.navigate(Detail);返回navigation.goBack();传递参数发送navigation.navigate(Detail, { id: 1001, });接收function DetailScreen({ route }) { const { id } route.params; return null; }替换页面登录场景常见navigation.replace(Home);效果Login ↓ replace Home返回键不会回到 Login。重置导航栈退出登录navigation.reset({ index: 0, routes: [{ name: Login }], });4. Bottom Tab Navigator适用于首页 消息 发现 我的创建import { createBottomTabNavigator } from react-navigation/bottom-tabs; const Tab createBottomTabNavigator();注册Tab.Navigator Tab.Screen nameHome component{HomeScreen} / Tab.Screen nameProfile component{ProfileScreen} / /Tab.Navigator效果------------------ 首页 我的 ------------------设置图标通常搭配npm install react-native-vector-iconsTab.Screen nameHome component{HomeScreen} options{{ tabBarIcon: ({ color, size }) ( Icon namehome color{color} size{size} / ), }} /Tab 配置隐藏标题screenOptions{{ headerShown: false }}设置激活颜色screenOptions{{ tabBarActiveTintColor: #007AFF, }}5. Drawer Navigator适用于☰ 菜单 ├ 首页 ├ 用户中心 ├ 设置 └ 关于创建import { createDrawerNavigator } from react-navigation/drawer; const Drawer createDrawerNavigator();注册Drawer.Navigator Drawer.Screen nameHome component{HomeScreen} / Drawer.Screen nameSettings component{SettingsScreen} / /Drawer.Navigator打开 Drawernavigation.openDrawer();关闭navigation.closeDrawer();切换navigation.toggleDrawer();6. 组合导航最重要实际项目不会单独使用。典型结构App │ └─ Stack │ ├─ Login │ └─ MainTabs │ ├─ Home ├─ Message └─ MineTab 放 Stack 中function MainTabs() { return ( Tab.Navigator Tab.Screen nameHome component{HomeScreen} / Tab.Screen nameMine component{MineScreen} / /Tab.Navigator ); }Stack.Navigator Stack.Screen nameLogin component{LoginScreen} / Stack.Screen nameMain component{MainTabs} / /Stack.Navigator7. TypeScript 类型定义推荐项目一开始就配置。export type RootStackParamList { Home: undefined; Detail: { id: number; }; };创建const Stack createNativeStackNavigatorRootStackParamList();跳转获得类型提示navigation.navigate(Detail, { id: 100, });错误参数会直接报错。8. 实际项目推荐结构src ├── navigation │ ├── RootNavigator.tsx │ ├── StackNavigator.tsx │ ├── TabNavigator.tsx │ └── DrawerNavigator.tsx │ ├── screens │ ├── Home │ ├── Login │ ├── Detail │ └── Profile │ └── App.tsx常见组合模式NavigationContainer │ ▼ Stack ├── Login ├── Register └── Tabs ├── Home ├── Message └── Mine这是目前 React Native 商业项目中最常见、最稳定的导航架构。