从零构建 React Native 导航体系-React Navigation

一、React Navigation v7 介绍

React Navigation v7 在架构和性能上都有显著优化：

• 原生性能提升 ：推荐使用 @react-navigation/native-stack，利用原生导航控制器实现更流畅的动画
• 模块化设计：核心包与导航器分离，按需安装减少包体积
• 统一的配置 API：无论是 Stack、Tab 还是 Drawer，配置方式更加一致
• 更好的 TypeScript 支持：内置类型推断，开发体验更友好

---

二、环境搭建：三步完成安装配置

步骤 1：安装核心依赖

npm install @react-navigation/native

步骤 2：添加原生能力库

这两个库是性能优化的关键，必须安装：

npm install react-native-screens react-native-safe-area-context

iOS 用户注意 ：安装后需执行 npx pod-install ios 链接原生代码。

步骤 3：按需安装导航器

# 堆栈导航（最常用）
npm install @react-navigation/native-stack

# 底部标签导航
npm install @react-navigation/bottom-tabs

# 抽屉导航
npm install @react-navigation/drawer

---

三、核心基础：Stack Navigator 实战

Stack Navigator 是移动应用的基石，它管理页面的堆栈历史，支持手势返回和切换动画。

3.1 创建你的第一个导航器

屏幕组件 （screens/Home.jsx）：

import { SafeAreaView, StyleSheet, Text, Pressable } from 'react-native';

const Home = ({ navigation }) => {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.title}>Home Screen</Text>
            <Pressable 
                onPress={() => navigation.navigate('Profile')}
                style={styles.button}
            >
                <Text style={styles.buttonText}>→ 跳转到 Profile</Text>
            </Pressable>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    title: { fontSize: 24, marginBottom: 20 },
    button: { 
        backgroundColor: '#4BC1D2', 
        padding: 12, 
        borderRadius: 8 
    },
    buttonText: { color: '#fff', fontWeight: 'bold' }
});

根组件配置 （App.js）：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './screens/Home';
import Profile from './screens/Profile';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen 
          name="Profile" 
          component={Profile}
          options={{ title: '个人中心' }}  // 自定义标题
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

关键点解析：

• NavigationContainer ：整个应用的导航大脑，管理状态与深度链接
• navigation.navigate('RouteName') ：最核心的跳转方法，自动管理堆栈
• 所有屏幕自动接收 navigation 属性 ：无需手动传递

---

四、丰富导航体验：Tab 与 Drawer

4.1 Bottom Tabs：主流 App 的首选

底部标签栏让用户能快速切换核心功能模块：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        // 动态图标配置
        tabBarIcon: ({ focused, color, size }) => {
          const iconMap = {
            Home: focused ? 'ios-home' : 'ios-home-outline',
            Settings: focused ? 'ios-settings' : 'ios-settings-outline',
          };
          return <Ionicons name={iconMap[route.name]} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#4BC1D2',  // 激活颜色
        tabBarInactiveTintColor: '#999',     // 非激活颜色
        headerShown: false,  // 隐藏堆栈标题，由内部导航器管理
      })}
    >
      <Tab.Screen name="Home" component={HomeStackScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

4.2 Drawer：侧边菜单的优雅实现

适合功能模块较多、需要层级导航的应用：

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
  return (
    <Drawer.Navigator
      drawerPosition="left"  // 抽屉从左侧滑出
      drawerStyle={{ width: 280 }}  // 自定义宽度
      drawerContentOptions={{
        activeTintColor: '#4BC1D2',
        labelStyle: { fontSize: 16 },
      }}
    >
      <Drawer.Screen name="Main" component={AppTabs} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
  );
}

---

五、导航器组合：构建复杂应用结构

真实场景通常是导航器嵌套：标签导航包含堆栈导航，抽屉导航包裹标签导航。

// 1. 首页模块的堆栈导航
function HomeStackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeMain" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

// 2. 设置模块的堆栈导航
function SettingsStackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="SettingsMain" component={SettingsScreen} />
      <Stack.Screen name="Account" component={AccountScreen} />
    </Stack.Navigator>
  );
}

// 3. 底部标签导航组合两个堆栈
function AppTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="HomeTab" component={HomeStackScreen} />
      <Tab.Screen name="SettingsTab" component={SettingsStackScreen} />
    </Tab.Navigator>
  );
}

// 4. 根组件：抽屉包裹标签导航
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="App" component={AppTabs} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

设计模式解读：

• 模块化：每个功能模块独立管理自己的页面堆栈
• 职责分离：Tab 负责一级导航，Stack 负责二级页面流转
• 用户体验：保持底部标签常驻，堆栈跳转不影响全局导航

---

六、页面通信：参数传递与返回处理

6.1 向下一个页面传参

// 发送方：HomeScreen
navigation.navigate('Details', {
  itemId: 86,
  itemName: 'React Navigation 指南',
  timestamp: Date.now()
});

// 接收方：DetailsScreen
function DetailsScreen({ route, navigation }) {
  const { itemId, itemName } = route.params;
  
  return (
    <View>
      <Text>商品ID: {itemId}</Text>
      <Text>商品名称: {itemName}</Text>
    </View>
  );
}

6.2 返回时携带数据

// DetailsScreen 返回时传参
navigation.navigate('Home', { result: 'success' });

// HomeScreen 接收返回参数
useEffect(() => {
  if (route.params?.result) {
    console.log('操作结果:', route.params.result);
  }
}, [route.params]);

6.3 useNavigation Hook：在深层组件中导航

当组件未直接接收 navigation prop 时：

import { useNavigation } from '@react-navigation/native';

function DeepChildComponent() {
  const navigation = useNavigation();
  
  return (
    <Button 
      title="返回首页" 
      onPress={() => navigation.navigate('Home')} 
    />
  );
}

---

七、进阶定制：让导航更贴合你的 App

7.1 自定义头部样式

<Stack.Screen 
  name="Details" 
  component={DetailsScreen}
  options={{
    headerStyle: { backgroundColor: '#f4511e' },
    headerTintColor: '#fff',  // 返回按钮和标题颜色
    headerTitleStyle: { fontWeight: 'bold' },
    headerRight: () => (
      <Button onPress={() => alert('分享')} title="分享" />
    ),
  }}
/>

7.2 深度链接（Deep Linking）

让外部链接能直接打开 App 内特定页面：

import { Linking } from 'react-native';

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: 'home',
      Details: 'details/:itemId',  // 动态参数
      Profile: 'profile',
    },
  },
};

function App() {
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        {/* ... */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

7.3 权限路由守卫

在渲染前进行权限检查：

function RequireAuth({ children }) {
  const { hasToken } = useAuth();
  const location = useLocation();
  
  const publicPaths = ["/login", "/register"];
  const isPublic = publicPaths.includes(location.pathname);
  
  if (!hasToken && !isPublic) {
    return <Navigate to="/login" replace state={{ from: location }} />;
  }
  
  return children;
}

---

八、版本升级指南与兼容性

v7 与旧版本的主要差异

表格

复制

特性	v6/v7 推荐	旧版本 (v4/v5)	说明
堆栈导航器	@react-navigation/native-stack	react-navigation-stack	原生性能，API 更简洁
Tab 导航器	@react-navigation/bottom-tabs	react-navigation-tabs	独立成包，配置更灵活
Drawer 导航器	@react-navigation/drawer	react-navigation-drawer	手势体验优化

提示 ：@react-navigation/stack 已逐步被 @react-navigation/native-stack 替代，新项目强烈推荐使用后者以获得原生性能。

---

九、总结

React Navigation v7 通过模块化架构 和原生性能优化，成为 React Native 导航的最佳选择。记住三个核心原则：

1. @react-navigation/native 是必需基础 ：所有项目都从此开始
2. 根据场景选择导航器：Stack 处理页面流，Tab 负责一级导航，Drawer 提供全局菜单
3. 嵌套而非平铺：复杂应用采用导航器组合，保持结构清晰

现在打开你的编辑器，开始构建流畅的导航体验吧！

---

参考资料：

• React Navigation 官方文档
• React Native 导航实现详解
• React Navigation v7 新特性