导航与手势

这一课你将能做到

1. 用 React Navigation 搭建「外层 Tab + 内层 Stack」的标准 App 骨架
2. 在页面间跳转、传递参数、回传数据，并自定义导航栏
3. 配置深链接让外部 URL 直达 App 内指定页面，理解 gesture-handler 在手势体系中的作用

为什么要学

App 的本质就是「页面 + 页面之间的流转」。没有导航，你的 App 永远只有一屏。React Navigation 是 RN 事实上的标准导航库——打开任意一个 RN 项目的 package.json，十有八九能看到它。这一课学的不只是 API，更是「一个正经 App 的骨架应该怎么搭」。

人话：Stack 导航像一叠卡片，新页面盖在旧页面上，返回就是抽走最上面那张；Tab 导航像电视遥控器下方的频道按钮，点哪个切哪个，各频道互不干扰、各自保留进度。真实 App 几乎都是「Tab 定骨架、Stack 管层级」的嵌套结构。

先建立图像

NavigationContainer（唯一根容器）
└── Tab.Navigator（底部标签：首页 / 我的）
    ├── HomeStack（首页频道内部的页面栈）
    │   ├── HomeMain（首页列表）
    │   └── Detail（详情页）
    └── ProfileStack（我的频道内部的页面栈）
        ├── ProfileMain（个人主页）
        └── Settings（设置页）

每个频道是一个独立的 Stack，切 Tab 不会丢失各自的浏览进度——你在「首页」点到第 3 层详情，切到「我的」再切回来，还在第 3 层。这就是嵌套导航的意义。

跟着做

步骤 1：安装依赖

npx expo install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context react-native-gesture-handler

一次装 6 个包别慌：@react-navigation/native 是核心，native-stack 和 bottom-tabs 是两种导航器，react-native-screens 和 react-native-gesture-handler 是把页面切换和手势放到原生线程执行的底座，safe-area-context 负责导航栏高度适配。它们是一个套装，缺一不可。

步骤 2：最小 Stack 导航

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Button, Text, View } from 'react-native';

const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>首页</Text>
      <Button title="去详情页" onPress={() => navigation.navigate('Detail', { id: 42 })} />
    </View>
  );
}

function DetailScreen({ route }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>详情页，收到 id = {route.params.id}</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: '首页' }} />
        <Stack.Screen name="Detail" component={DetailScreen} options={{ title: '详情' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}