在 React Native（RN）中，“导航与路由”通常指页面之间的跳转和页面栈管理。当前最主流的方案是：

React Navigation

官方推荐的社区导航库：

React Navigation 官网

安装：

npm install @react-navigation/native

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

npm install @react-navigation/native-stack

1. Stack（栈导航）

适用于：

• 登录 → 首页

• 首页 → 详情页

• 类似浏览器前进后退

示例：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <Button
      title="进入详情页"
      onPress={() =>
        navigation.navigate('Detail', { id: 1001 })
      }
    />
  );
}

function DetailScreen({ route }) {
  return (
    <Text>ID: {route.params.id}</Text>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
        />
        <Stack.Screen
          name="Detail"
          component={DetailScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

跳转：

navigation.navigate('Detail');

返回：

navigation.goBack();

---

2. Tab（底部导航）

适用于：

• 微信

• 抖音

• 电商首页

安装：

npm install @react-navigation/bottom-tabs

示例：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="首页" component={HomeScreen} />
        <Tab.Screen name="我的" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

效果：

┌─────────────┐
│     内容     │
├─────────────┤
│ 首页 | 我的  │
└─────────────┘

---

3. Drawer（侧边栏导航）

适用于：

• 管理后台

• 菜单抽屉

安装：

npm install @react-navigation/drawer

示例：

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

const Drawer = createDrawerNavigator();

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="首页" component={HomeScreen} />
        <Drawer.Screen name="设置" component={SettingScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

---

4. 路由参数传递

发送参数：

navigation.navigate('Detail', {
  id: 1001,
  title: '商品详情'
});

接收参数：

function DetailScreen({ route }) {
  const { id, title } = route.params;

  return (
    <Text>{title}</Text>
  );
}

---

5. 嵌套路由

实际项目常见结构：

RootStack
├── Login
└── MainTabs
    ├── Home
    ├── Message
    └── Mine

示例：

<Stack.Navigator>
  <Stack.Screen
    name="Main"
    component={TabNavigator}
  />
  <Stack.Screen
    name="Detail"
    component={DetailScreen}
  />
</Stack.Navigator>

从 Tab 页面直接跳详情：

navigation.navigate('Detail');

---

6. TypeScript 路由类型

推荐在 RN 项目中使用：

export type RootStackParamList = {
  Home: undefined;
  Detail: {
    id: number;
  };
};

页面：

type Props = NativeStackScreenProps<
  RootStackParamList,
  'Detail'
>;

这样可以获得：

• 路由名称提示

• 参数类型检查

• 自动补全

---

React Native 导航方案对比

方案	推荐度	特点
React Navigation	⭐⭐⭐⭐⭐	社区主流，功能完整
Expo Router	⭐⭐⭐⭐⭐	文件路由，类似 Next.js
React Native Navigation	⭐⭐⭐⭐	原生性能更强，配置复杂
Wix Navigation	⭐⭐⭐⭐	大型应用常用