react-native @react-navigation/native 组件用法介绍

一、安装与基础配置

1. 核心依赖安装
   需安装以下包：

   npm install @react-navigation/native
   npx expo install react-native-screens react-native-safe-area-context
   

   若使用 Stack 导航，需额外安装：

   npm install @react-navigation/native-stack  # 推荐原生栈导航
   # 或旧版 Stack 导航（需手势库）
   npm install @react-navigation/stack react-native-gesture-handler
   

2. 导航容器初始化
   所有导航需包裹在 NavigationContainer 中：

   import { NavigationContainer } from '@react-navigation/native';
   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   
   const Stack = createNativeStackNavigator();
   
   export default function App() {
     return (
       
         
           
           
         
       
     );
   }
   

---

二、核心导航组件类型

1. Stack Navigator（堆栈导航）

   • 功能：管理页面层级跳转，支持参数传递与场景切换动画。
   • 包名：@react-navigation/native-stack（推荐）或 @react-navigation/stack
   • 关键配置：

2. Tab Navigator（底部/顶部标签导航）

   • 功能：实现多标签页切换，支持图标、徽章等定制。
   • 包名：@react-navigation/bottom-tabs
   • 示例配置：

     import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
     const Tab = createBottomTabNavigator();
     
     
       
       
     
     

3. Drawer Navigator（抽屉导航）

   • 功能：侧滑菜单导航，支持手势操作。
   • 包名：@react-navigation/drawer
   • 关键参数：

     drawerWidth={300}  // 抽屉宽度
     drawerPosition="left"  // 抽屉位置
     

---

三、导航方法与参数传递

1. 页面跳转与参数传递

   // 跳转并传参
   navigation.navigate('Details', { itemId: 86 });
   
   // 目标页面获取参数
   const { itemId } = route.params;
   

2. 常用导航方法

   • navigation.goBack()：返回上一页
   • navigation.push('Screen')：添加新页面到栈顶
   • navigation.popToTop()：返回栈底页面
   • navigation.setParams({ ... })：动态修改当前路由参数

---

四、导航头定制

通过 options 属性配置标题、样式及交互：

  alert('操作')} title="设置" />,
  }}
/>

支持动态配置（如根据参数修改标题）：

options={({ route }) => ({ title: route.params.title })}

---

五、高级功能

1. 嵌套导航
   支持 Stack、Tab、Drawer 导航的混合嵌套，例如 Tab 内嵌 Stack：

   const Tab = createBottomTabNavigator();
   const HomeStack = createNativeStackNavigator();
   
   function HomeStackScreen() {
     return (
       
         
         
       
     );
   }
   
   
     
   
   

2. 全局主题与样式
   通过 ThemeProvider 统一管理导航主题：

   import { ThemeProvider } from '@react-navigation/native';
   
   const theme = {
     colors: { background: '#fff', text: '#333' },
   };
   
   
     {/* ... */}
   
   

---