【ReactNative】页面跳转与参数传递 - navigate、push 方法详解

📱 页面跳转与参数传递 - navigate、push 方法详解

👋 大家好，我是老曹。在本节课中，我们将深入探讨 React Navigation中的页面跳转与参数传递机制。通过本节课的学习，你将掌握如何使用 navigate 和 push方法实现页面跳转，如何传递参数给下一个页面，以及如何处理路由返回和重定向。

---

🌟 引言

在移动端开发中，页面跳转是导航的核心功能之一。React Navigation 提供了多种方法来实现页面跳转，例如 navigate 和 push。同时，我们还可以通过路由参数在页面之间传递数据。这些功能使得页面之间的交互更加灵活和高效。

---

🎯 学习目标

1. 掌握 navigate 和 push 的区别与用法
2. 学会传递参数给下一个页面
3. 理解路由返回与重定向的实现方式
4. 动手实践：构建一个带参数传递的多页面应用
5. 熟悉常见问题与解决方案

---

📚 课程内容详解

1️⃣ 页面跳转的基础概念

📌 概述

在 React Navigation 中，页面跳转主要通过 navigation 对象提供的方法实现。navigation 是每个页面组件的 props 中的一个属性，包含了各种导航相关的方法。

📌 核心方法

• navigate：跳转到指定页面，如果目标页面已经在堆栈中，则不会重复添加。
• push：强制将目标页面压入堆栈，即使它已经存在。

---

2️⃣ 使用 navigate 实现页面跳转

📌 示例代码

以下是一个简单的 navigate 示例：

import React from 'react';
import { Button, Text, View } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

export default HomeScreen;

📌 关键点分析

• navigation.navigate('Details') ：跳转到名为 Details 的页面。
• 如果 Details 页面已经在堆栈中，则不会重新创建实例。

---

3️⃣ 使用 push 实现页面跳转

📌 示例代码

以下是一个简单的 push 示例：

import React from 'react';
import { Button, Text, View } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Push Details"
        onPress={() => navigation.push('Details')}
      />
    </View>
  );
};

export default HomeScreen;

📌 关键点分析

• navigation.push('Details') ：每次调用都会在堆栈中创建一个新的 Details 页面实例。
• 适用于需要多次跳转到同一页面的场景。

---

4️⃣ 传递参数给下一个页面

📌 概述

在页面跳转时，我们可以通过 navigate 或 push 方法的第二个参数传递参数。目标页面可以通过 route.params 访问这些参数。

📌 示例代码

以下是传递参数的完整示例：

import React from 'react';
import { Button, Text, View } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() =>
          navigation.navigate('Details', { itemId: 86, otherParam: 'anything' })
        }
      />
    </View>
  );
};

const DetailsScreen = ({ route }) => {
  const { itemId, otherParam } = route.params || {};
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
      <Text>Item ID: {itemId}</Text>
      <Text>Other Param: {otherParam}</Text>
    </View>
  );
};

export { HomeScreen, DetailsScreen };

📌 关键点分析

• navigation.navigate('Details', { itemId: 86, otherParam: 'anything' }) ：传递参数到 Details 页面。
• route.params：在目标页面中访问传递的参数。

---

5️⃣ 路由返回与重定向

📌 返回上一页

使用 navigation.goBack() 方法可以返回到上一页：

<Button
  title="Go Back"
  onPress={() => navigation.goBack()}
/>

📌 重定向到特定页面

使用 navigation.reset() 方法可以清空当前堆栈并跳转到指定页面：

navigation.reset({
  index: 0,
  routes: [{ name: 'Home' }],
});

---

6️⃣ 动手实践：构建一个带参数传递的多页面应用

📌 实现步骤

1. 创建两个页面组件：HomeScreen 和 DetailsScreen。
2. 使用 navigate 方法跳转到 DetailsScreen 并传递参数。
3. 在 DetailsScreen 中显示传递的参数。
4. 添加返回按钮和重定向功能。

📌 完整代码示例

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

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() =>
          navigation.navigate('Details', { itemId: 86, otherParam: 'anything' })
        }
      />
    </View>
  );
};

const DetailsScreen = ({ route, navigation }) => {
  const { itemId, otherParam } = route.params || {};
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
      <Text>Item ID: {itemId}</Text>
      <Text>Other Param: {otherParam}</Text>
      <Button
        title="Go Back"
        onPress={() => navigation.goBack()}
      />
      <Button
        title="Redirect to Home"
        onPress={() =>
          navigation.reset({
            index: 0,
            routes: [{ name: 'Home' }],
          })
        }
      />
    </View>
  );
};

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

export default App;

---

7️⃣ 总结

通过本节课的学习，我们掌握了页面跳转与参数传递的核心知识点。以下是本节课的核心总结：

1. navigate 和 push：两种页面跳转方法的区别与适用场景。
2. 参数传递 ：通过 route.params 访问传递的参数。
3. 路由返回与重定向 ：使用 goBack 和 reset 方法实现。
4. 动手实践：结合实际案例，巩固所学知识。

希望你能通过本节课的内容，熟练掌握页面跳转与参数传递的技巧，并在实际项目中灵活应用！

---

🎉 恭喜完成第8节课！ 下一节课我们将学习网络请求与异步加载，敬请期待！