RN导航与路由

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

官方推荐的社区导航库：

安装：

java 复制代码

npm install @react-navigation/native

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

npm install @react-navigation/native-stack

1. Stack（栈导航）

适用于：

登录 → 首页
首页 → 详情页
类似浏览器前进后退

示例：

javascript 复制代码

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>
  );
}

跳转：

arduino 复制代码

navigation.navigate('Detail');

ini 复制代码

navigation.goBack();

2. Tab（底部导航）

适用于：

微信
抖音
电商首页

安装：

bash 复制代码

npm install @react-navigation/bottom-tabs

示例：

javascript 复制代码

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（侧边栏导航）

适用于：

管理后台
菜单抽屉

安装：

bash 复制代码

npm install @react-navigation/drawer

示例：

javascript 复制代码

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. 路由参数传递

发送参数：

php 复制代码

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

接收参数：

javascript 复制代码

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

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

5. 嵌套路由

实际项目常见结构：

markdown 复制代码

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

示例：

ini 复制代码

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

从 Tab 页面直接跳详情：

arduino 复制代码

navigation.navigate('Detail');

6. TypeScript 路由类型

推荐在 RN 项目中使用：

ini 复制代码

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

页面：

ini 复制代码

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

这样可以获得：

路由名称提示
参数类型检查
自动补全

React Native 导航方案对比

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

React Navigation

1. Stack（栈导航）

2. Tab（底部导航）

3. Drawer（侧边栏导航）

4. 路由参数传递

5. 嵌套路由

6. TypeScript 路由类型

React Native 导航方案对比