4、玩转页面跳转：React Navigation 指南，从单页到多页如鱼得水

---

🎯 技术专家导语

“React Native 里怎么做多页面跳转？”
“用 React Navigation，你就像魔术师一样，自由穿梭在页面之间！”

React Native 默认是单页面结构，想做多页跳转，必须借助专门的导航库——React Navigation，它是目前最成熟且灵活的方案。

---

🧭 一、什么是 React Navigation？

React Navigation 是一个基于 React 生态构建的导航解决方案，支持：

• 栈导航（Stack）
• 底部标签导航（Bottom Tabs）
• 抽屉导航（Drawer）
• 页面传参、嵌套路由、动态标题等高级功能

---

🪜 二、快速上手：StackNavigator 示例

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack

创建导航器

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

const Stack = createNativeStackNavigator()

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

页面跳转

const HomeScreen = ({ navigation }) => (
  <Button
    title="去详情页"
    onPress={() => navigation.navigate('Detail', { id: 42 })}
  />
)

---

📦 三、其他导航模式

1️⃣ Bottom Tab（底部标签）

npm install @react-navigation/bottom-tabs

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
const Tab = createBottomTabNavigator()

<Tab.Navigator>
  <Tab.Screen name="Feed" component={FeedScreen} />
  <Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>

2️⃣ Drawer（侧边抽屉）

npm install @react-navigation/drawer

适合用于侧边导航 + 设置面板场景。

---

🧠 四、页面传参 & 动态标题

页面参数传递

navigation.navigate('Detail', { userId: 99 })

接收参数

const route = useRoute()
const { userId } = route.params

动态修改标题

navigation.setOptions({ title: '新标题' })

---

✅ 五、总结：导航能力是 React Native 项目骨架

导航类型	场景
Stack	页面跳转
Bottom Tabs	多功能主页面
Drawer	设置页/侧边功能入口

---

📘 下一篇预告：
👉 《让 App 活起来：React Native 动画实战指南》