React 生态中的导航与手势交互方案对比

在 React 开发中，导航（Navigation）与路由（Routing）是实现页面跳转与状态管理的核心。然而，Web 端与移动端（React Native）的运行环境截然不同，导致解决方案无法通用。本文将深入对比这五个关键库，帮助你在不同场景下做出准确的技术决策。

🌐 Web 端路由：核心逻辑与 DOM 绑定

在 Web 开发中，react-router 与 react-router-dom 的关系常被误解。它们不是竞争关系，而是核心与实现的关系。

react-router 提供了路由的核心逻辑，不依赖任何特定平台。

• 适用于需要自定义历史对象或非 DOM 环境的场景。
• 通常不直接在 Web 项目中单独使用。

// react-router: 核心用法（通常配合自定义 history）
import { Router, Routes, Route } from 'react-router';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

function App() {
  return (
    <Router location={history.location} navigator={history}>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

react-router-dom 是专为 Web 浏览器设计的实现包。

• 内置了 BrowserRouter，自动处理 HTML5 History API。
• 提供了 Link、NavLink 等针对 DOM 优化的组件。
• 99% 的 Web 项目应直接使用此包。

// react-router-dom: 标准 Web 用法
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

📱 React Native 导航：JS 控制 vs 原生控制

在移动端，react-navigation 与 react-native-navigation 是两大主流方案，它们的架构理念完全不同。

react-navigation 采用 JavaScript 驱动的配置方式。

• 导航状态保存在 JS 线程，易于调试与定制。
• 底层使用原生组件渲染，但控制逻辑在 JS 层。
• 社区插件丰富，支持栈、标签、抽屉等多种模式。

// react-navigation: JS 驱动配置
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

react-native-navigation 采用完全原生的导航控制器。

• 每个屏幕都是独立的原生 ViewController/Activity。
• 性能更接近纯原生应用，尤其在复杂转场时。
• 配置繁琐，需要修改原生项目文件，不支持热重载某些导航结构。

// react-native-navigation: 原生控制
import { Navigation } from 'react-native-navigation';

Navigation.setRoot({
  root: {
    stack: {
      children: [
        {
          component: {
            name: 'HomeScreen',
            options: {
              topBar: {
                title: {
                  text: 'Home'
                }
              }
            }
          }
        }
      ]
    }
  }
});

🖐️ 手势交互：底层原生能力

react-native-gesture-handler 是 React Native 中处理手势的基础设施。

• 它将手势识别移到原生线程，避免 JS 线程阻塞导致的滑动卡顿。
• react-navigation v6+ 强制依赖此库以实现流畅的侧滑返回。
• 也可单独用于实现复杂的自定义手势（如绘图、游戏交互）。

// react-native-gesture-handler: 原生手势包装
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { TapGestureHandler } from 'react-native-gesture-handler';

function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <TapGestureHandler onActivated={() => console.log('Tapped')}>
        <View style={{ flex: 1, backgroundColor: 'white' }} />
      </TapGestureHandler>
    </GestureHandlerRootView>
  );
}

⚖️ 架构差异与性能权衡

选择导航库不仅仅是选 API，更是选择架构模型。

1. 线程模型与性能

react-navigation 的导航状态在 JS 线程。

• 优点：逻辑灵活，易于实现动态路由权限控制。
• 缺点：极端复杂动画下可能受 JS 线程繁忙影响。

// react-navigation: 动态路由配置
<Stack.Screen 
  name="Profile" 
  component={ProfileScreen}
  options={({ route }) => ({ title: route.params.userName })} 
/>

react-native-navigation 的导航状态在原生线程。

• 优点：转场动画极其流畅，不受 JS 阻塞影响。
• 缺点：跨屏幕传递数据较麻烦，需通过事件或原生模块。

// react-native-navigation: 原生传参
Navigation.push('componentId', {
  component: {
    name: 'Profile',
    passProps: {
      userName: 'Alice'
    }
  }
});

2. 配置复杂度

react-router-dom 和 react-navigation 偏好约定优于配置。

• 只需在 JS 文件中定义结构，无需触碰原生代码。
• 适合快速迭代的业务应用。

// react-router-dom: 简单声明
<Route path="/user/:id" element={<User />} />

react-native-navigation 需要原生层配合。

• 需在 iOS AppDelegate 和 Android MainActivity 中注册组件。
• 适合对原生体验有严格要求的大型应用。

// react-native-navigation: 原生注册 (iOS 示例)
[RCTRootView registerComponent:@"HomeScreen" lookupClass:^Class {
  return [HomeScreen class];
}];

3. 手势与导航的协同

在 React Native 中，导航往往依赖手势库。

• react-navigation 内部集成 react-native-gesture-handler 实现侧滑返回。
• 若单独使用 react-native-navigation，手势需额外配置。
• 忽略 react-native-gesture-handler 的根视图包装会导致手势失效。

// 错误：缺少根视图包装，手势可能不响应
export default function App() {
  return <NavigationContainer>...</NavigationContainer>;
}

// 正确：包裹根视图
export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer>...</NavigationContainer>
    </GestureHandlerRootView>
  );
}

📊 总结对比表

💡 选型建议

Web 项目：无需犹豫，直接使用 react-router-dom。除非你在编写底层路由库，否则不要单独安装 react-router。

React Native 项目：

• 首选 react-navigation。它平衡了性能与开发效率，社区支持最好，且能解决 95% 的需求。
• 仅在需要极致原生体验、复杂原生转场或已有原生团队支持时，考虑 react-native-navigation。
• 务必安装 react-native-gesture-handler 并按文档正确包裹根组件，这是保证移动端交互流畅的基础。

核心原则：不要为了微小的性能提升而牺牲开发效率，除非你的应用瓶颈确实在导航转场上。对于大多数业务驱动的应用，react-navigation 配合 gesture-handler 是最稳健的组合。